OsmosJS

Getting Started

Learn how to get started with Osmos.

Installation

Install the package using the following command :

npm install npm install @osmosjs/osmos@alpha
pnpm add yarn add @osmosjs/osmos@alpha
yarn add yarn add @osmosjs/osmos@alpha
bun add yarn add @osmosjs/osmos@alpha

Inside your tsconfig.json, allow usage of "jsx" and specify the jsxImportSource to use Osmos as your JSX runtime:

tsconfig.json
{
  "compileOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@osmosjs/osmos"
  }
}

Getting Started

Later you will learn the full capabilities of Osmos. For the moment lets render a simple html page with the most simple JSX.

const App = () => {
  return (
    <html>
      <body>
        <h1>Hello Osmos users!</h1>
      </body>
    </html>
  )
}

const html = await renderToString(<App />)
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello Osmos users!</h1>
  </body>
</html>

renderToString can be used to render to string. You can also use renderToReadableStream to stream content.

On this page