jsx-html.ts#
18 documented symbols. Read the signatures first, then expand each item for parameters, return types, and examples.
Reference#
variableconst ATTR_ALIASES: Record<string, string>React prop names whose HTML spelling is not the lowercased identifier.
React prop names whose HTML spelling is not the lowercased identifier.
Signature
const ATTR_ALIASES: Record<string, string>fneach<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNodeMaps over an array and renders each item.
Maps over an array and renders each item.
Signature
export function each<T>(items: T[], render: (item: T, index: number) => JSXNode): JSXNodeReturns
Examples
{each(items, (item) => <li>{item.name}</li>)}fnescapeHtml(str: string): stringEscapes HTML special characters to prevent XSS.
Escapes HTML special characters to prevent XSS.
Signature
function escapeHtml(str: string): stringParameters
-
strstring
Returns
string
fnFragment({ children }: { children?: JSXChild }): JSXNodeFragment component - renders children without a wrapper element.
Fragment component - renders children without a wrapper element.
Signature
export function Fragment({ children }: { children?: JSXChild }): JSXNodeReturns
fnjsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNodeCreates a JSX element. This is the core function called by the JSX transform.
Creates a JSX element. This is the core function called by the JSX transform.
Signature
export function jsx(type: JSXElementType, props: JSXProps, _key?: string): JSXNodeParameters
-
typeJSXElementType -
propsJSXProps -
_keystringoptional
Returns
modulejsx-htmlCustom JSX Runtime for Static HTML Generation This module provides a JSX runtime that outputs static HTML strings. No R…
Custom JSX Runtime for Static HTML Generation
This module provides a JSX runtime that outputs static HTML strings. No React, no hydration, no client-side JavaScript - just pure HTML.
This is the implementation. The JSX transform imports it through the ./jsx-runtime and ./jsx-dev-runtime entry points, which are the subpaths jsxImportSource resolves. Keeping the implementation under its own name keeps those two entries from colliding with the shared bundle chunk.
Examples
// tsconfig.json or vite.config.ts
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@ox-content/vite-plugin"
}
}
// MyComponent.tsx
export function Hero({ title }: { title: string }) {
return (
<section class="hero">
<h1>{title}</h1>
</section>
);
}typeJSXChild = string | number | boolean | null | undefined | JSXNode | JSXChild[]Valid JSX child types.
Valid JSX child types.
Signature
export type JSXChild = string | number | boolean | null | undefined | JSXNode | JSXChild[]typeJSXElementType = string | ((props: Record<string, unknown>) => JSXNode)JSX element type - either a string (intrinsic) or a function component.
JSX element type - either a string (intrinsic) or a function component.
Signature
export type JSXElementType = string | ((props: Record<string, unknown>) => JSXNode)interfaceJSXNodeJSX node - the result of JSX expressions.
JSX node - the result of JSX expressions.
Signature
export interface JSXNodeMembers
Properties
| Name | Type | Description |
|---|---|---|
__html |
string |
interfaceJSXPropsProps with children.
Props with children.
Signature
export interface JSXPropsfnjsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNodeCreates a JSX element with static children. Called by the JSX transform for ele…
Creates a JSX element with static children. Called by the JSX transform for elements with multiple children.
Signature
export function jsxs(type: JSXElementType, props: JSXProps, key?: string): JSXNodeParameters
-
typeJSXElementType -
propsJSXProps -
keystringoptional
Returns
fnraw(html: string): JSXNodeCreates raw HTML without escaping. Use with caution - only for trusted content.
Creates raw HTML without escaping. Use with caution - only for trusted content.
Signature
export function raw(html: string): JSXNodeParameters
-
htmlstring
Returns
Examples
<div>{raw('<strong>Bold</strong>')}</div>fnrenderAttr(name: string, value: unknown): stringRenders an attribute value to a string.
Renders an attribute value to a string.
Signature
function renderAttr(name: string, value: unknown): stringParameters
-
namestring -
valueunknown
Returns
string
fnrenderChildren(children: JSXChild): stringRenders children to HTML string.
Renders children to HTML string.
Signature
function renderChildren(children: JSXChild): stringParameters
-
childrenJSXChild
Returns
string
fnrenderToString(node: JSXNode): stringRenders a JSX node to an HTML string.
Renders a JSX node to an HTML string.
Signature
export function renderToString(node: JSXNode): stringParameters
-
nodeJSXNode
Returns
string
variableconst SVG_CAMEL_CASE = new Set(["viewBox"])SVG attributes that stay camelCase in HTML (they are case-sensitive).
SVG attributes that stay camelCase in HTML (they are case-sensitive).
Signature
const SVG_CAMEL_CASE = new Set(["viewBox"])fntoHtmlAttr(name: string): stringConverts a JSX/React prop name to the HTML attribute the runtime emits. HTML at…
Converts a JSX/React prop name to the HTML attribute the runtime emits.
HTML attributes are case-insensitive and conventionally lowercase (charSet → charset, tabIndex → tabindex). A few React names are not a lowercase of themselves (className, httpEquiv), and SVG names like viewBox must keep their case.
Signature
function toHtmlAttr(name: string): stringParameters
-
namestring
Returns
string
fnwhen(condition: boolean, content: JSXNode): JSXNodeConditionally renders content.
Conditionally renders content.
Signature
export function when(condition: boolean, content: JSXNode): JSXNodeParameters
-
conditionboolean -
contentJSXNode
Returns
Examples
{when(isLoggedIn, <UserMenu />)}