Skip to main content

Serialize JSX/HTML to string, fully type-safe

This package works with Bun, Cloudflare Workers, Node.js, Deno, Browsers
JSR Score
88%
Published
3 months ago (0.1.0)

jsx

View on JSR
Source code

Serialize JSX to string, fully type-safe.

Usage

/** @jsxImportSource jsr:@mary/jsx */

import type { JSXNode } from 'jsr:@mary/jsx';

const Card = ({ title, children }: { title: string; children: JSXNode }) => {
	return (
		<div class='card'>
			<div class='card__title'>{title}</div>
			<div class='card__body'>{children}</div>
		</div>
	);
};

const App = () => {
	return (
		<>
			<h1>Hello!</h1>
			<Card title='Card title'>
				<p>We're inside a card!</p>
			</Card>
		</>
	);
};

const result = <App />;

result.value;

JSX templates are eagerly interpreted.

Precompiled JSX templates

This library supports Deno's precompiled JSX transformation for even faster serialization, you can make use of it by adding the following configuration to your deno.json file:

{
	"compilerOptions": {
		"jsx": "precompile",
		"jsxImportSource": "jsr:@mary/jsx"
	}
}

Add Package

deno add @mary/jsx

Import symbol

import * as mod from "@mary/jsx";

Add Package

npx jsr add @mary/jsx

Import symbol

import * as mod from "@mary/jsx";

Add Package

yarn dlx jsr add @mary/jsx

Import symbol

import * as mod from "@mary/jsx";

Add Package

pnpm dlx jsr add @mary/jsx

Import symbol

import * as mod from "@mary/jsx";

Add Package

bunx jsr add @mary/jsx

Import symbol

import * as mod from "@mary/jsx";