JSX Reference
JSX Reference: published entrypoints, signatures, and the constraints around them.
Example
Use DOM property names and typed event handlers directly; pass components values and callbacks instead of mutating rendered nodes.
<form onSubmit={(event) => {
event.preventDefault();
const form = event.currentTarget;
if (form instanceof HTMLFormElement) save(new FormData(form));
}}>
<label htmlFor="name">Project name</label>
<input id="name" name="name" required />
<button type="submit">Save</button>
</form>Elements
Askr's JSX runtime is imported from @askrjs/askr/jsx-runtime (or jsx-dev-runtime in development), and elements compile down to a VNode shape — a DOMElement with type, props, children, and an optional key. Intrinsic elements (div, button, and so on) and component functions both flow through the same jsx/jsxs factories exported off the root package.
Props
The base Props interface is deliberately loose — children, an optional key, and an index signature for arbitrary attributes — while IntrinsicProps narrows things for DOM elements with typed class/className, style (string or a style object), ref, and aria-*/data-* entries. Several intrinsic props, like class and style, accept a ReactiveProp<T> — either a plain value or a zero-arg function returning one — so you can pass a reactive getter directly without wrapping it.
Events
IntrinsicEventProps defines the standard on-event handlers you'd expect — onClick, onInput, onChange, onKeyDown, onPointerDown, onSubmit, and the rest — each typed to the matching native event (MouseEvent, InputEvent, KeyboardEvent, PointerEvent, SubmitEvent, etc.). Handlers are plain functions; there's no synthetic event system layered on top.
Children and fragments
Children can be a VNode (string, number, boolean, null, undefined, or a DOMElement), a JSXElement, or a readonly array of those nested arbitrarily deep — this union is what RenderableChild represents throughout the runtime. Fragment is exported from the root package for grouping children without introducing a wrapper element, and control-flow helpers like Show, For, Match/Case compose the same way as any other renderable child.