Minimal JSX templating for safe HTML strings.
microjsx renders JSX to HTML strings. It works well for server-side templates, static sites, emails,
and other places where a string is the whole output. This is not a React replacement and does not handle
browser interactivity.
Full API docs: jsdocs.io/package/microjsx
Examples: examples/microjsx
npm install microjsxUse the automatic JSX runtime with jsxImportSource. In tsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "microjsx"
}
}For Deno, use "jsxImportSource": "npm:microjsx" in deno.json.
import { render, unsafeHTML, type PropsWithChildren } from "microjsx";
function Layout({ title, children }: PropsWithChildren<{ title: string }>) {
return (
<html>
<head>
<title>{title}</title>
</head>
<body>{children}</body>
</html>
);
}
const html = render(
<Layout title="Hello">
<h1>Hello {"<JSX>"}</h1>
{unsafeHTML("<hr>")}
</Layout>,
);- Text and attributes are escaped by default. Use
unsafeHTML()only for trusted markup. stylesupports strings and objects, e.g.style="color:red"orstyle={{ marginTop: 8 }}.renderAsync()awaits async components, promise children, and promise attributes.- Nested
<head>elements are merged into the top-level<head>.