Skip to main content
Home
Browse packagesDocsSign in

@mary/jsx@0.1.0

latest
mary-ext/pkg-jsx

Serialize JSX/HTML to string, fully type-safe

This package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
88%
Published
a year 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"
	}
}

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@mary/jsx

Import symbol

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

Import directly with a jsr specifier

import * as jsx from "jsr:@mary/jsx";

Add Package

pnpm i jsr:@mary/jsx
or (using pnpm 10.8 or older)
pnpm dlx jsr add @mary/jsx

Import symbol

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

Add Package

yarn add jsr:@mary/jsx
or (using Yarn 4.8 or older)
yarn dlx jsr add @mary/jsx

Import symbol

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

Add Package

vlt install jsr:@mary/jsx

Import symbol

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

Add Package

npx jsr add @mary/jsx

Import symbol

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

Add Package

bunx jsr add @mary/jsx

Import symbol

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