# JSX namespace

Global JSX element and reactive attribute types included by @getforma/core.

These global JSX types are loaded by the core declaration reference. They are not an @getforma/core/jsx package export. Event attributes accept handlers; reactive non-event attributes accept values or getters.

Published declaration: [@getforma/core@3.0.0](https://unpkg.com/@getforma/core@3.0.0/dist/jsx.d.ts).

## JSX interfaces and aliases

### Element

Global JSX namespace member; not a named package import.

```ts
type Element = HTMLElement | DocumentFragment;
```



### ElementChildrenAttribute

Global JSX namespace member; not a named package import.

```ts
interface ElementChildrenAttribute {
    children: {};
}
```



### HTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface HTMLAttributes<T extends EventTarget = HTMLElement> {
    class?: MaybeReactive<string>;
    className?: MaybeReactive<string>;
    id?: MaybeReactive<string>;
    style?: MaybeReactive<string | Record<string, string>>;
    title?: MaybeReactive<string>;
    tabIndex?: MaybeReactive<number>;
    hidden?: MaybeReactive<boolean>;
    role?: MaybeReactive<string>;
    slot?: string;
    dir?: MaybeReactive<string>;
    lang?: MaybeReactive<string>;
    draggable?: MaybeReactive<boolean>;
    contentEditable?: MaybeReactive<boolean | 'true' | 'false' | 'inherit'>;
    [key: `data-${string}`]: MaybeReactive<string | number | boolean> | undefined;
    [key: `aria-${string}`]: MaybeReactive<string | number | boolean> | undefined;
    onClick?: (e: MouseEvent) => void;
    onDblClick?: (e: MouseEvent) => void;
    onMouseDown?: (e: MouseEvent) => void;
    onMouseUp?: (e: MouseEvent) => void;
    onMouseEnter?: (e: MouseEvent) => void;
    onMouseLeave?: (e: MouseEvent) => void;
    onMouseMove?: (e: MouseEvent) => void;
    onContextMenu?: (e: MouseEvent) => void;
    onKeyDown?: (e: KeyboardEvent) => void;
    onKeyUp?: (e: KeyboardEvent) => void;
    onKeyPress?: (e: KeyboardEvent) => void;
    onFocus?: (e: FocusEvent) => void;
    onBlur?: (e: FocusEvent) => void;
    onFocusIn?: (e: FocusEvent) => void;
    onFocusOut?: (e: FocusEvent) => void;
    onInput?: (e: InputEvent) => void;
    onChange?: (e: Event) => void;
    onSubmit?: (e: SubmitEvent) => void;
    onReset?: (e: Event) => void;
    onInvalid?: (e: Event) => void;
    onCopy?: (e: ClipboardEvent) => void;
    onCut?: (e: ClipboardEvent) => void;
    onPaste?: (e: ClipboardEvent) => void;
    onTouchStart?: (e: TouchEvent) => void;
    onTouchEnd?: (e: TouchEvent) => void;
    onTouchMove?: (e: TouchEvent) => void;
    onTouchCancel?: (e: TouchEvent) => void;
    onPointerDown?: (e: PointerEvent) => void;
    onPointerUp?: (e: PointerEvent) => void;
    onPointerMove?: (e: PointerEvent) => void;
    onPointerEnter?: (e: PointerEvent) => void;
    onPointerLeave?: (e: PointerEvent) => void;
    onPointerCancel?: (e: PointerEvent) => void;
    onScroll?: (e: Event) => void;
    onWheel?: (e: WheelEvent) => void;
    onResize?: (e: UIEvent) => void;
    onAnimationStart?: (e: AnimationEvent) => void;
    onAnimationEnd?: (e: AnimationEvent) => void;
    onAnimationIteration?: (e: AnimationEvent) => void;
    onTransitionEnd?: (e: TransitionEvent) => void;
    onLoad?: (e: Event) => void;
    onError?: (e: Event) => void;
    ref?: (el: T) => void;
    children?: unknown;
    'data-forma-island'?: string;
    'data-forma-component'?: string;
    'data-forma-status'?: string;
    dangerouslySetInnerHTML?: {
        __html: RawMarkup;
    };
}
```



Related declarations: [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive), [`RawMarkup`](/docs/3.0/api-jsx/#type-RawMarkup)

### InputHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface InputHTMLAttributes extends HTMLAttributes<HTMLInputElement> {
    type?: MaybeReactive<string>;
    value?: MaybeReactive<string | number>;
    placeholder?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    checked?: MaybeReactive<boolean>;
    name?: string;
    autocomplete?: string;
    required?: MaybeReactive<boolean>;
    readonly?: MaybeReactive<boolean>;
    min?: MaybeReactive<string | number>;
    max?: MaybeReactive<string | number>;
    step?: MaybeReactive<string | number>;
    pattern?: string;
    maxLength?: number;
    minLength?: number;
    accept?: string;
    multiple?: boolean;
    autofocus?: boolean;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### SelectHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface SelectHTMLAttributes extends HTMLAttributes<HTMLSelectElement> {
    value?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    multiple?: boolean;
    name?: string;
    required?: MaybeReactive<boolean>;
    size?: number;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### TextareaHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface TextareaHTMLAttributes extends HTMLAttributes<HTMLTextAreaElement> {
    value?: MaybeReactive<string>;
    placeholder?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    readonly?: MaybeReactive<boolean>;
    rows?: number;
    cols?: number;
    name?: string;
    required?: MaybeReactive<boolean>;
    maxLength?: number;
    wrap?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### FormHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface FormHTMLAttributes extends HTMLAttributes<HTMLFormElement> {
    action?: string;
    method?: string;
    enctype?: string;
    target?: string;
    noValidate?: boolean;
    autocomplete?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes)

### AnchorHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface AnchorHTMLAttributes extends HTMLAttributes<HTMLAnchorElement> {
    href?: MaybeReactive<string>;
    target?: string;
    rel?: string;
    download?: string | boolean;
    hreflang?: string;
    type?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### ImgHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface ImgHTMLAttributes extends HTMLAttributes<HTMLImageElement> {
    src?: MaybeReactive<string>;
    alt?: MaybeReactive<string>;
    loading?: 'lazy' | 'eager';
    decoding?: 'sync' | 'async' | 'auto';
    width?: number | string;
    height?: number | string;
    srcset?: string;
    sizes?: string;
    crossOrigin?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### VideoHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface VideoHTMLAttributes extends HTMLAttributes<HTMLVideoElement> {
    src?: MaybeReactive<string>;
    preload?: 'none' | 'metadata' | 'auto';
    autoplay?: boolean;
    loop?: boolean;
    muted?: MaybeReactive<boolean>;
    controls?: boolean;
    width?: number | string;
    height?: number | string;
    poster?: string;
    playsInline?: boolean;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### LabelHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface LabelHTMLAttributes extends HTMLAttributes<HTMLLabelElement> {
    for?: string;
    htmlFor?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes)

### ButtonHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface ButtonHTMLAttributes extends HTMLAttributes<HTMLButtonElement> {
    type?: 'button' | 'submit' | 'reset';
    disabled?: MaybeReactive<boolean>;
    name?: string;
    value?: string;
    form?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### OptionHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface OptionHTMLAttributes extends HTMLAttributes<HTMLOptionElement> {
    value?: string;
    selected?: MaybeReactive<boolean>;
    disabled?: MaybeReactive<boolean>;
    label?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### IframeHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface IframeHTMLAttributes extends HTMLAttributes<HTMLIFrameElement> {
    src?: MaybeReactive<string>;
    srcdoc?: RawMarkup;
    sandbox?: string;
    allow?: string;
    width?: number | string;
    height?: number | string;
    loading?: 'lazy' | 'eager';
    name?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive), [`RawMarkup`](/docs/3.0/api-jsx/#type-RawMarkup)

### DialogHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface DialogHTMLAttributes extends HTMLAttributes<HTMLDialogElement> {
    open?: MaybeReactive<boolean>;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### CanvasHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface CanvasHTMLAttributes extends HTMLAttributes<HTMLCanvasElement> {
    width?: number | string;
    height?: number | string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes)

### TableCellHTMLAttributes

Global JSX namespace member; not a named package import.

```ts
interface TableCellHTMLAttributes extends HTMLAttributes<HTMLTableCellElement> {
    colSpan?: number;
    rowSpan?: number;
    scope?: string;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes)

### SVGAttributes

Global JSX namespace member; not a named package import.

```ts
interface SVGAttributes extends HTMLAttributes<SVGElement> {
    viewBox?: string;
    xmlns?: string;
    fill?: MaybeReactive<string>;
    stroke?: MaybeReactive<string>;
    strokeWidth?: MaybeReactive<string | number>;
    strokeLinecap?: string;
    strokeLinejoin?: string;
    d?: MaybeReactive<string>;
    cx?: MaybeReactive<string | number>;
    cy?: MaybeReactive<string | number>;
    r?: MaybeReactive<string | number>;
    rx?: MaybeReactive<string | number>;
    ry?: MaybeReactive<string | number>;
    x?: MaybeReactive<string | number>;
    y?: MaybeReactive<string | number>;
    x1?: MaybeReactive<string | number>;
    y1?: MaybeReactive<string | number>;
    x2?: MaybeReactive<string | number>;
    y2?: MaybeReactive<string | number>;
    width?: MaybeReactive<string | number>;
    height?: MaybeReactive<string | number>;
    transform?: MaybeReactive<string>;
    opacity?: MaybeReactive<string | number>;
    clipPath?: string;
    points?: MaybeReactive<string>;
    pathLength?: number;
}
```



Related declarations: [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`MaybeReactive`](/docs/3.0/api-jsx/#type-MaybeReactive)

### IntrinsicElements

Global JSX namespace member; not a named package import.

```ts
interface IntrinsicElements {
    div: HTMLAttributes<HTMLDivElement>;
    section: HTMLAttributes<HTMLElement>;
    article: HTMLAttributes<HTMLElement>;
    aside: HTMLAttributes<HTMLElement>;
    header: HTMLAttributes<HTMLElement>;
    footer: HTMLAttributes<HTMLElement>;
    main: HTMLAttributes<HTMLElement>;
    nav: HTMLAttributes<HTMLElement>;
    h1: HTMLAttributes<HTMLHeadingElement>;
    h2: HTMLAttributes<HTMLHeadingElement>;
    h3: HTMLAttributes<HTMLHeadingElement>;
    h4: HTMLAttributes<HTMLHeadingElement>;
    h5: HTMLAttributes<HTMLHeadingElement>;
    h6: HTMLAttributes<HTMLHeadingElement>;
    p: HTMLAttributes<HTMLParagraphElement>;
    span: HTMLAttributes<HTMLSpanElement>;
    strong: HTMLAttributes<HTMLElement>;
    em: HTMLAttributes<HTMLElement>;
    b: HTMLAttributes<HTMLElement>;
    i: HTMLAttributes<HTMLElement>;
    small: HTMLAttributes<HTMLElement>;
    code: HTMLAttributes<HTMLElement>;
    pre: HTMLAttributes<HTMLPreElement>;
    blockquote: HTMLAttributes<HTMLQuoteElement>;
    abbr: HTMLAttributes<HTMLElement>;
    cite: HTMLAttributes<HTMLElement>;
    mark: HTMLAttributes<HTMLElement>;
    sub: HTMLAttributes<HTMLElement>;
    sup: HTMLAttributes<HTMLElement>;
    del: HTMLAttributes<HTMLElement>;
    ins: HTMLAttributes<HTMLElement>;
    time: HTMLAttributes<HTMLTimeElement>;
    ul: HTMLAttributes<HTMLUListElement>;
    ol: HTMLAttributes<HTMLOListElement>;
    li: HTMLAttributes<HTMLLIElement>;
    dl: HTMLAttributes<HTMLDListElement>;
    dt: HTMLAttributes<HTMLElement>;
    dd: HTMLAttributes<HTMLElement>;
    form: FormHTMLAttributes;
    input: InputHTMLAttributes;
    select: SelectHTMLAttributes;
    textarea: TextareaHTMLAttributes;
    button: ButtonHTMLAttributes;
    label: LabelHTMLAttributes;
    option: OptionHTMLAttributes;
    optgroup: HTMLAttributes<HTMLOptGroupElement>;
    fieldset: HTMLAttributes<HTMLFieldSetElement>;
    legend: HTMLAttributes<HTMLLegendElement>;
    output: HTMLAttributes<HTMLOutputElement>;
    progress: HTMLAttributes<HTMLProgressElement>;
    meter: HTMLAttributes<HTMLMeterElement>;
    table: HTMLAttributes<HTMLTableElement>;
    caption: HTMLAttributes<HTMLTableCaptionElement>;
    colgroup: HTMLAttributes<HTMLTableColElement>;
    col: HTMLAttributes<HTMLTableColElement>;
    thead: HTMLAttributes<HTMLTableSectionElement>;
    tbody: HTMLAttributes<HTMLTableSectionElement>;
    tfoot: HTMLAttributes<HTMLTableSectionElement>;
    tr: HTMLAttributes<HTMLTableRowElement>;
    th: TableCellHTMLAttributes;
    td: TableCellHTMLAttributes;
    img: ImgHTMLAttributes;
    video: VideoHTMLAttributes;
    audio: HTMLAttributes<HTMLAudioElement>;
    source: HTMLAttributes<HTMLSourceElement>;
    picture: HTMLAttributes<HTMLPictureElement>;
    canvas: CanvasHTMLAttributes;
    svg: SVGAttributes;
    path: SVGAttributes;
    circle: SVGAttributes;
    rect: SVGAttributes;
    line: SVGAttributes;
    polyline: SVGAttributes;
    polygon: SVGAttributes;
    ellipse: SVGAttributes;
    g: SVGAttributes;
    defs: SVGAttributes;
    use: SVGAttributes;
    clipPath: SVGAttributes;
    mask: SVGAttributes;
    text: SVGAttributes;
    tspan: SVGAttributes;
    a: AnchorHTMLAttributes;
    iframe: IframeHTMLAttributes;
    dialog: DialogHTMLAttributes;
    details: HTMLAttributes<HTMLDetailsElement>;
    summary: HTMLAttributes<HTMLElement>;
    br: HTMLAttributes<HTMLBRElement>;
    hr: HTMLAttributes<HTMLHRElement>;
    wbr: HTMLAttributes<HTMLElement>;
    address: HTMLAttributes<HTMLElement>;
    figure: HTMLAttributes<HTMLElement>;
    figcaption: HTMLAttributes<HTMLElement>;
    link: HTMLAttributes<HTMLLinkElement>;
    meta: HTMLAttributes<HTMLMetaElement>;
    style: HTMLAttributes<HTMLStyleElement>;
    script: HTMLAttributes<HTMLScriptElement>;
    noscript: HTMLAttributes<HTMLElement>;
    template: HTMLAttributes<HTMLTemplateElement>;
}
```



Related declarations: [`AnchorHTMLAttributes`](/docs/3.0/api-jsx/#type-AnchorHTMLAttributes), [`ButtonHTMLAttributes`](/docs/3.0/api-jsx/#type-ButtonHTMLAttributes), [`CanvasHTMLAttributes`](/docs/3.0/api-jsx/#type-CanvasHTMLAttributes), [`DialogHTMLAttributes`](/docs/3.0/api-jsx/#type-DialogHTMLAttributes), [`FormHTMLAttributes`](/docs/3.0/api-jsx/#type-FormHTMLAttributes), [`HTMLAttributes`](/docs/3.0/api-jsx/#type-HTMLAttributes), [`IframeHTMLAttributes`](/docs/3.0/api-jsx/#type-IframeHTMLAttributes), [`ImgHTMLAttributes`](/docs/3.0/api-jsx/#type-ImgHTMLAttributes), [`InputHTMLAttributes`](/docs/3.0/api-jsx/#type-InputHTMLAttributes), [`LabelHTMLAttributes`](/docs/3.0/api-jsx/#type-LabelHTMLAttributes), [`OptionHTMLAttributes`](/docs/3.0/api-jsx/#type-OptionHTMLAttributes), [`SelectHTMLAttributes`](/docs/3.0/api-jsx/#type-SelectHTMLAttributes), [`SVGAttributes`](/docs/3.0/api-jsx/#type-SVGAttributes), [`TableCellHTMLAttributes`](/docs/3.0/api-jsx/#type-TableCellHTMLAttributes), [`TextareaHTMLAttributes`](/docs/3.0/api-jsx/#type-TextareaHTMLAttributes), [`VideoHTMLAttributes`](/docs/3.0/api-jsx/#type-VideoHTMLAttributes)

## Referenced declaration types

### MaybeReactive

Global JSX namespace member; not a named package import.

```ts
type MaybeReactive<T> = T | (() => T);
```

Forma JSX Type Definitions

Enables TypeScript checking for JSX syntax.
Every attribute accepts MaybeReactive<T> — a value or signal getter.

esbuild transforms JSX into h() calls:
  <div class="x">hi</div>  →  h("div", { class: "x" }, "hi")
  <>a b</>                  →  h(Fragment, null, "a", " ", "b")

### RawMarkup

Global JSX namespace member; not a named package import.

```ts
type RawMarkup = {
    readonly __formaTrustedHtml: true;
};
```

Markup for a raw sink: only what `trustedHtml()` returns (its
`TrustedHtml` type, restated here structurally because this file is copied
into dist/ as it is and cannot import from the source tree).

## Other entry points

[@getforma/core](/docs/3.0/api-core/) · [@getforma/core/runtime](/docs/3.0/api-runtime/) · [@getforma/core/runtime-hardened](/docs/3.0/api-runtime-hardened/) · [@getforma/core/runtime-csp](/docs/3.0/api-runtime-csp/) · [@getforma/core/tc39](/docs/3.0/api-tc39/) · [@getforma/core/http](/docs/3.0/api-http/) · [@getforma/core/storage](/docs/3.0/api-storage/)