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.