OsmosJS

Introduction

The light-weight, framework agnostic and customizable JSX runtime

Osmos is a light-weight and framework agnostic server-side JSX runtime.

  • 🚀 No build step required
  • ⚡ Supports Async components
  • ⏳ Streaming rendering
  • ⛏ Unpoly and AdonisJS integration
async function UsersList() {
  const users = await User.all()

  return (
    <ul>
      {users.map((user) => (
        <li>{user.name}</li>
      ))}
    </ul>
  )
}

function App() {
  return (
    <html>
      <body>
        <Users />
      </body>
    </html>
  )
}

Comparisons

React

Even tho React is now used on the server with Server Components it is a client-first JSX runtime made for building highly interactive Single Page Applications.

Osmos on the other hand is a server-only JSX runtime that can be used with client-side libraries to provide reactivity. With Osmos, your frontend is entirely generated by your server and you do not need to build an entire API for your client.

If you are looking to build highly interactive applications I would not recommend switching to Osmos.

EdgeJS

EdgeJS is a template engine for Node.js similar to Jinja or Mustache but with advanced features.

As Edge is an entirely custom templating engine it cannot benefit from Typescript types system and the tooling for IDEs is not complete making the developer experience complicated.

If you are using EdgeJS, I highly advise you to give Osmos a try.

mono-jsx

mono-jsx is a light-weight JSX runtime that renders <html> element to a Response object.

Osmos is a simplified, non-opinionated and extensible version of mono-jsx. mono-jsx have native support for building SPA and bring reactive primitives. Osmos does not bring any client-side features, it is up to the user to use libraries like Alpine.js, Unpoly to bring interactivity to their applications.

If you are using mono-jsx, Osmos + Unpoly is a great replacement.

Philosophy

KISS (Keep It Stupid Simple)

Osmos tries to be as simple as possible by only providing the basic requirements for rendering HTML on the server using JSX.

It is up to you, as a user or library author, to decide how you want to use it: generating simple static websites, building Hypermedia applications or creating the next Terminal UI framework.

Agnostic

Even tho Osmos has been originally made for the AdonisJS Framework it has been built with the goal of being fully framework agnostic while still providing all the necessary APIs to build powerful integrations for your favorite tools.

For example there is an Unpoly integration that implement the Server Protocol for optimized responses and conditional requests.

Customizable

While Osmos itself is light-weight and bring only basic requirements for rendering HTML with JSX, it provides APIs for extending its capabilities.

You can for example add custom renderers to modify the rendering pipeline and create powerful tools.

On this page