static-jsx

1.0.1 verified Fri May 01 auth: no javascript maintenance

A simple, dependency-free JSX runtime that renders JSX directly to raw HTML strings for static HTML template engines. Version 1.0.1 is the latest stable release, with no recent updates since 2022. Differentiators: no virtual DOM, no client-side hydration, purely static HTML generation. Supports both classic and automatic JSX transforms, function components, custom elements, and raw HTML escaping. Unlike React or Preact, it is not intended for interactive UIs but for server-side templating akin to Handlebars or Nunjucks, but with JSX syntax. Ships TypeScript types.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. ↓

cause static-jsx is ESM-only and cannot be required.

fix

Use import instead of require().

error Module not found: Can't resolve 'static-jsx/jsx-runtime' ↓

cause Bundler does not support package.json exports field.

fix

Update bundler configuration or use classic transform with manual imports.

error Cannot find module 'static-jsx' ↓

cause Package not installed or incorrect import path.

fix

Install the package: npm install static-jsx. Ensure import path is 'static-jsx'.

Warnings

breaking Library is ESM-only; CommonJS require() will throw an error. ↓

fix Use ES import syntax or upgrade Node.js to ESM support.

breaking package.json exports field required for automatic JSX transform; older bundlers may not support it. ↓

fix Use a bundler that supports the exports field (e.g., webpack 5+, Rollup, Vite).

gotcha JSX expressions always return a RawHtml instance, not a string. Use .html property to get the string. ↓

fix Access the html property: element.html.

gotcha Strings are escaped by default; use RawHtml constructor to insert unescaped HTML. ↓

fix Wrap safe HTML strings: new RawHtml('<div>safe</div>').

Install

npm install static-jsx

yarn add static-jsx

pnpm add static-jsx

Imports

h
wrong
```
const { h } = require('static-jsx')
```
correct
```
import { h } from 'static-jsx'
```
Library is ESM-only since v1.0.0; CommonJS require will fail.

Fragment

wrong

import Fragment from 'static-jsx'

correct

import { Fragment } from 'static-jsx'

Fragment is a named export, not a default export.

RawHtml
```
import { RawHtml } from 'static-jsx'
```
Use RawHtml constructor to mark strings as safe HTML.
jsx, jsxs, jsxDEV (automatic transform)
wrong
```
import { jsx } from 'static-jsx'
```
correct
```
// In tsconfig: "jsxImportSource": "static-jsx"
// Or per-file: /** @jsxImportSource static-jsx */
```
Automatic transform imports from 'static-jsx/jsx-runtime'; do not manually import these functions.

Quickstart

Renders JSX to an HTML string using automatic transform, demonstrating component usage, interpolation, and RawHtml for unescaped HTML.

// Install: npm install static-jsx

/** @jsxImportSource static-jsx */
import { RawHtml } from 'static-jsx';

const bold = (text: string) => <strong>{text}</strong>;

const page = (
  <html>
    <body>
      <h1>Hello, World!</h1>
      <p>{bold('This is bold.')}</p>
      <p>{new RawHtml('<em>Raw HTML</em>')}</p>
    </body>
  </html>
);

console.log(page.html);
/* Output:
<html><body><h1>Hello, World!</h1><p><strong>This is bold.</strong></p><p><em>Raw HTML</em></p></body></html>
*/