static-jsx

library1.0.1jsnpmunverified

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.

web-framework serialization

npm install static-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · STATIC-JSX

static-jsx

web-frameworkjavascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

✓ import { h } from 'static-jsx'

✗ const { h } = require('static-jsx')

Library is ESM-only since v1.0.0; CommonJS require will fail.

Fragment

✓ import { Fragment } from 'static-jsx'

✗ 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)

✓ // In tsconfig: "jsxImportSource": "static-jsx" // Or per-file: /** @jsxImportSource static-jsx */

✗ import { jsx } from 'static-jsx'

Automatic transform imports from 'static-jsx/jsx-runtime'; do not manually import these functions.

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> */

Debug

Known issues

breakingLibrary is ESM-only; CommonJS require() will throw an error.

fix

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

affects: >=1.0.0-alpha.5

breakingpackage.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).

affects: >=1.0.0-alpha.6

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

fix

Access the html property: element.html.

affects: >=1.0.0

gotchaStrings are escaped by default; use RawHtml constructor to insert unescaped HTML.

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

Use import instead of require().

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

Bundler does not support package.json exports field.

fix

Update bundler configuration or use classic transform with manual imports.

Cannot find module 'static-jsx'

Package not installed or incorrect import path.

fix

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

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

3 hits · last 30 days

node

Resources

githubhttps://github.com/ianprime0509/static-jsx ↗

packagehttps://www.npmjs.com/package/static-jsx ↗