You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

jsx-async-runtime

Package Overview
Dependencies
Maintainers
0
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as html template engine.

0.5.2
Source
npmnpm
Version published
Maintainers
0
Created
Source

jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as html template engine.

Getting started

Installation

npm i jsx-async-runtime

Building

To make use of the jsx-async-runtime, you need to configure your transpiler to utilize this package for transforming the JSX syntax.

If you are using TypeScript for transpiling, simply set these options in the tsconfig file:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "jsx-async-runtime"
  }
}

Using

If you're using jsx-async-runtime as template engine, you might want to include data from an asynchronous operation in the resulting markup. To simplify this process, you can make your components asynchronous and send async requests from within them.

Please note: jsx-async-runtime doesn't escape html entities per default, so rendering user input makes your application vulnerable to cross site scripting. jsx-async-runtime exports a utility function called escapeEntities which can be used to render input from uncontrolled sources.

You can study the example project to learn about existing features.

import { escapeEntities, jsxToString } from "jsx-async-runtime";

export default function App() {
  return (
    <>
      {`<!DOCTYPE html>`}
      <html>
        <head>
          <meta charset="utf-8" />
          <title>Todos</title>
        </head>
        <body>
          <Header label="<Todos>" />
          <TodoList quantity={3} />
        </body>
      </html>
    </>
  );
}

function Header({ label }) {
  return (
    <section
      style={{
        "background-color": "red",
        "padding-bottom": "1rem",
      }}
    >
      <h1 style="color: white; text-align: center">{escapeEntities(label)}</h1>
    </section>
  );
}

async function TodoList({ quantity }) {
  const { todos } = await (await fetch("https://dummyjson.com/todos")).json();

  return (
    <table class="table">
      <thead class={{ thead: true, striped: false, sticky: true }}>
        <tr>
          <th>Label</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody class="tbody striped">
        {todos.slice(0, quantity).map(({ todo, completed }) => (
          <tr>
            <td>
              <label for="todo">{escapeEntities(todo)}</label>
            </td>
            <td>
              <label for="status">{completed ? "yes" : "no"}</label>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

console.log(await jsxToString(<App />));

Keywords

jsx
runtime
template
engine
ssr
async

FAQs

Package last updated on 04 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Crates.io Implements Trusted Publishing Support

Security News

Crates.io Implements Trusted Publishing Support

Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.

By Sarah Gooding  -  Jul 16, 2025