CINXE.COM
mojo.js - JavaScript real-time web framework
<!doctype html><html> <head> <link rel="apple-touch-icon" href="/static/mojo/touch-icon.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/mojo/touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/static/mojo/touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/mojo/touch-icon-180x180.png"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>mojo.js - JavaScript real-time web framework</title> <link rel="icon" href="/static/mojo/favicon.ico"> <script src="/static/mojo/jquery/jquery.js"></script> <script src="/static/mojo/highlight.js/highlight.min.js"></script> <link rel="stylesheet" href="/static/mojo/highlight.js/highlight-mojo-light.css"> <script>hljs.initHighlightingOnLoad();</script> <script src="/static/mojo/bootstrap/bootstrap.js"></script> <link rel="stylesheet" href="/static/mojo/bootstrap/bootstrap.css"> <link rel="stylesheet" href="/static/mojo/fontawesome/fontawesome.css"> <link rel="stylesheet" href="/static/app.css?v=1"> <link rel="stylesheet" href="/static/mojo.css"> </head> <body><div id="mojo-fun"> <a href="https://www.npmjs.com/package/@mojojs/core"> <img src="/static/mojo/unicorn.png"> </a> <img src="/static/mojo/balloon.png" id="mojo-balloon"> </div> <header> <nav class="navbar navbar-expand-lg navbar-dark mojobar"> <a href="/" id="mojobar-brand" class="navbar-brand"> <picture> <img src="/static/mojo/logo-white.png" srcset="/static/mojo/logo-white-2x.png 2x"> </picture> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarNav" class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Documentation </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/docs/">Overview</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="/docs/Introduction.md">Introduction</a> <a class="dropdown-item" href="/docs/Growing.md">Growing</a> <a class="dropdown-item" href="/docs/Routing.md">Routing</a> <a class="dropdown-item" href="/docs/Rendering.md">Rendering</a> <a class="dropdown-item" href="/docs/User-Agent.md">User-Agent</a> <a class="dropdown-item" href="/docs/Cookbook.md">Cookbook</a> <a class="dropdown-item" href="/docs/Contributing.md">Contributing</a> <a class="dropdown-item" href="/docs/FAQ.md">FAQ</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="/docs/Cheatsheet.md">Cheatsheet</a> <a class="dropdown-item" href="https://mojojs.org/api" target="_blank">API</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="communityDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Community </a> <div class="dropdown-menu" aria-labelledby="communityDropdown"> <a class="dropdown-item" href="https://web.libera.chat/#mojo">IRC</a> <a class="dropdown-item" href="https://github.com/mojolicious/mojo.js/discussions">Forum</a> <a class="dropdown-item" href="https://fosstodon.org/@mojolicious">Mastodon</a> <a class="dropdown-item" href="https://www.linkedin.com/groups/8963713/">LinkedIn</a> <a class="dropdown-item" href="https://github.com/mojolicious/mojo.js/wiki">Wiki</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="newsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> News </a> <div class="dropdown-menu" aria-labelledby="newsDropdown"> <a class="dropdown-item" href="/news/mojo.js-1-released">mojo.js 1.0 released</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/mojolicious/mojo.js/">Contribute on GitHub</a> </li> </ul> <a class="navbar-brand" href="https://mojolicious.org"> <picture> <img src="/static/mojo/mojolicious-white.png" srcset="/static/mojo/mojolicious-white-2x.png 2x"> </picture> </a> <form action="https://www.google.com/cse" target="_blank" class="form-inline my-2 my-lg-0"> <input type="hidden" name="cx" value="047dacf0d8b084ef8"> <input type="hidden" name="ie" value="URF-8"> <input type="search" name="q" placeholder="Search..."> </form> </div> </nav> </header> <div class="container"> <div class="row flex-wrap"> <main class="col-sm-12 col-md-8 col-lg-10 py-md-3 pl-md-5"> <div class="mojo-intro"> <div class="mojo-fortune"> <h1>It's as if a million lines of CGI cried out and were suddenly silenced</h1> <p> mojo.js was <a href="https://mojojs.org/news/mojo.js-1-released" target="_blank">designed</a> by a team with decades of experience developing the Mojolicious and Catalyst web frameworks, utilizing the latest web standards and technologies. Providing <b>performance</b> and <b>stability</b> for mission critical web services you can rely on, today and in ten years from now. </p> <p> Join us, and be a part of a friendly and knowledgeable community of developers that have been around since the early days of the web, and has built some of the largest websites along the way! </p> </div> <h2>Features</h2> <div class="row"> <div class="col-md"> <ul> <li> 3x faster than Express.js and 15x faster than Mojolicious. </li> <li> A <b>real-time web framework</b>, allowing you to easily grow single file prototypes into well-structured MVC web applications. <ul> <li> Powerful out of the box with RESTful routes, WebSockets, plugins, commands, logging, templates, content negotiation, session management, form and JSON validation, testing framework, static file server, cluster mode, CGI detection, first class Unicode support and much more for you to discover. </li> </ul> </li> <li> A powerful <b>web development toolkit</b>, that you can use for all kinds of applications, independently of the web framework. <ul> <li> High performance HTTP and WebSocket client/server implementation with support for HTTPS/WSS, cookies, redirects, urlencoded/multi-part forms, file uploads, JSON/YAML, HTML/XML, mocking, API testing, HTTP/SOCKS proxies, and gzip compression. </li> <li> HTML/XML parser with CSS selector support. </li> </ul> </li> <li> No frontend framework, mojo.js is for the <b>backend</b>. </li> <li> Written in <a href="https://www.typescriptlang.org">TypeScript</a>, with very clean <code>class</code> and <code>async</code>/<code>await</code> based APIs. </li> <li> Very few dependencies, to avoid supply chain attacks and allow for "Perl-grade" long term support and <b>backwards compatibility</b>. </li> <li> Fresh code based upon decades of experience developing <a href="https://mojolicious.org" target="_blank">Mojolicious</a> and <a href="http://catalyst.perl.org" target="_blank">Catalyst</a>, free and open source. </li> </ul> </div> <div class="col-xs mojo-promotion"> <a class="undecorated" href="https://shop.spreadshirt.com/kraih/"> <img src="/static/mojo/t-shirts.png" alt="T-Shirts"> </a> </div> </div> <div class="mojo-install"> <h2>Installation</h2> <p>All you need is Node.js 18.0.0 (or newer).</p> <pre class="mojo-terminal"><code class="nohighlight">$ npm install @mojojs/core</code></pre> <p> Maybe take a look at our high quality spin-off projects <a href="https://www.npmjs.com/package/@mojojs/dom">@mojojs/dom</a>, <a href="https://www.npmjs.com/package/@mojojs/path">@mojojs/path</a>, <a href="https://www.npmjs.com/package/@mojojs/pg">@mojojs/pg</a> and <a href="https://www.npmjs.com/package/@mojojs/template">@mojojs/template</a>. </p> </div> <div class="mojo-start"> <h2>Getting Started</h2> <p>These four lines are a whole web application.</p> <pre><code>import mojo from '@mojojs/core'; const app = mojo(); app.get('/', ctx => ctx.render({text: 'I ♥ Mojo!'})); app.start();</code></pre> <p> Use the built-in command system to start your web server. </p> <pre class="mojo-terminal"><code class="nohighlight">$ node index.mjs server [77264] Web application available at http://127.0.0.1:3000/</code></pre> <p> Test it with any HTTP client you prefer. </p> <pre class="mojo-terminal"><code class="nohighlight">$ curl http://127.0.0.1:3000/ I ♥ Mojo!</code></pre> </div> <div class="mojo-tape"> <h2>Duct Tape for the Web</h2> <p> Use all the latest Node.js and HTML features in convenient single file prototypes like this one, and grow them easily into well-structured <b>Model-View-Controller</b> web applications. </p> <pre><code>import mojo from '@mojojs/core'; const app = mojo(); app.get('/', async ctx => { await ctx.render({inline: inlineTemplate}); }); app.websocket('/title', ctx => { ctx.plain(async ws => { for await (const url of ws) { const res = await ctx.ua.get(url); const html = await res.html(); const title = html.at('title').text(); await ws.send(title); } }); }); app.start(); const inlineTemplate = ` <script> const ws = new WebSocket('<%= ctx.urlFor('title') %>'); ws.onmessage = event => { document.body.innerHTML += event.data }; ws.onopen = event => { ws.send('https://mojolicious.org') }; </script> `;</code></pre> </div> <div class="mojo-more"> <img src="/static/mojo/butterfly.png" class="mojo-butterfly"> <h1>Want to know more?</h1> <p> Take a look at our excellent <a href="https://mojojs.org/docs/">documentation</a>! </p> </div> </div> </main> </div> </div> <footer> <div class="container-fluid p-3 mojo-footer"> <div class="row"> <div class="col-sm align-self-center text-center mojo-free"> <b>Free</b> and <b>Open Source</b>. </div> <div class="col-sm align-self-center text-center mojo-copy"> <i class="far fa-copyright"></i> 2023 Sebastian Riedel and the <a href="https://github.com/mojolicious/mojo.js/blob/main/AUTHORS">mojo.js contributors</a>. </div> <div class="col-sm align-self-center text-center mojo-social"> <a alt="GitHub" href="https://github.com/mojolicious/mojo.js"><i class="fab fa-github-alt"></i></a> <a alt="Mastodon" rel="me" href="https://fosstodon.org/@mojolicious"><i class="fab fa-mastodon"></i></a> <a alt="LinkedIn" href="https://www.linkedin.com/groups/8963713/"><i class="fab fa-linkedin"></i></a> </div> </div> </div> </footer> <script> $(window).on("mousemove", function (e) { const height = $(document).height(); const positionY = -(height - 2 * e.screenY) / height; const width = $(document).width(); const positionX = -(width - 2 * e.screenX) / width; $("#mojo-balloon").css({ "right": 10 + positionX + "%", "top" : 220 + (positionY * -25) + "px"} ); }); $(window).on("mousemove", function (e) { const width = $(document).width(); const position = -(width - 2 * e.screenX) / width; $("#mojo-fun").css({"backgroundPosition": 0 + (position * 3) + "px 0"}); }); </script> </body> </html>