Syntax

    Estimated reading time: 2 minutes

    Kita Html uses standard JSX syntax. HTML elements and attributes from the HTML specification are type-checked.

    Fragments

    Use fragments to return multiple elements without a wrapper.

    const 
    const html: JSX.Element
    html     = (    
  <>
    <
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >First</
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >    
    <
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >Second</
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >    
  </>
)
    <div>First</div>
<div>Second</div>

    Boolean attributes

    When a boolean attribute is true, it renders as a valueless attribute. When false, it is omitted entirely.

    const 
    const html: JSX.Element
    html     = (    
  <>
    <
    JSX.IntrinsicElements.input: JSX.HtmlInputTag
    input     
    JSX.HtmlInputTag.disabled?: boolean | undefined
    disabled     />    
    <
    JSX.IntrinsicElements.input: JSX.HtmlInputTag
    input     
    JSX.HtmlInputTag.disabled?: boolean | undefined
    disabled    ={true} />    
    <
    JSX.IntrinsicElements.input: JSX.HtmlInputTag
    input     
    JSX.HtmlInputTag.disabled?: boolean | undefined
    disabled    ={false} />    
  </>
)
    <input disabled /><input disabled /><input />

    Style attribute

    The style attribute accepts both strings and objects. Object keys are converted from camelCase to kebab-case automatically.

    const 
    const html: JSX.Element
    html     = (    
  <>
    <
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div     
    JSX.HtmlTag.style?: string | Properties<0 | (string & {}), string & {}> | undefined
    A css style attribute which also supports a csstype object.
    style    ="color: red" />    
    <
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div     
    JSX.HtmlTag.style?: string | Properties<0 | (string & {}), string & {}> | undefined
    A css style attribute which also supports a csstype object.
    style    ={{ 
    StandardLonghandProperties<0 | (string & {}), string & {}>.color?: Property.Color | undefined
    This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
    

    Syntax: <color>
    

    Initial value: canvastext
    

    | Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| 1  |  1  | 1  | 12 | 3 |
    @seehttps ://developer.mozilla.org/docs/Web/CSS/Reference/Properties/color
    color    : 'red', 
    StandardLonghandProperties<0 | (string & {}), string & {}>.fontSize?: Property.FontSize<0 | (string & {})> | undefined
    This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
    

    Syntax: <absolute-size> | <relative-size> | <length-percentage [0,∞]> | math
    

    Initial value: medium
    

    | Chrome | Firefox | Safari |  Edge  |   IE    |
| :----: | :-----: | :----: | :----: | :-----: |
| 1  |  1  | 1  | 12 | 5.5 |
    @seehttps ://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-size
    fontSize    : '14px' }} />    
  </>
)
    <div style="color: red"></div>
<div style="color: red; font-size: 14px"></div>

    Class attribute

    The class attribute also accepts an array.

    Falsy values are filtered out and the remaining values are joined with spaces.

    This pattern is similar to clsx but does not support objects.

    const 
    const html: JSX.Element
    html     = <
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div     
    JSX.HtmlTag.class?: string | (string | number | boolean | null | undefined)[] | undefined
    The html class property. You can use an array to represent conditional class
names. Similar to the clsx package behavior.
    @example
    <div class={['a', true && 'b', false && 'c', 'd']} />
'<div class="a b d"></div>'

<div class={['class-a class-b', true && 'class-c']} />
'<div class="class-a class-b class-c"></div>'
    class    ={['base', 
    const isActive: false
    isActive     && 'active', 
    const size: "lg"
    size    ]} />
    <div class="base lg"></div>

    The tag element

    The <tag of="name"> element renders a tag whose name is determined at runtime. Use this when the tag name is dynamic or would otherwise be read as a component, such as a capitalized name.

    const 
    const html: JSX.Element
    html     = (    
  <
    JSX.IntrinsicElements.tag: JSX.HtmlUnspecifiedTag
    tag     
    JSX.HtmlUnspecifiedTag.of: string
    of    ="my-custom-element" 
    JSX.HtmlTag.id?: string | number | undefined
    id    ="el">    
    content
  </
    JSX.IntrinsicElements.tag: JSX.HtmlUnspecifiedTag
    tag    >    
)
    <my-custom-element id="el">content</my-custom-element>

    For tags known at compile time, prefer extending the JSX type system instead.

    Serialization

    Different JavaScript types serialize differently when used as children.

    ExpressionOutput
    {"abc"}abc
    {42}42
    {true}''
    {false}''
    {null}''
    {undefined}''
    {[1, 2, 3]}123
    {BigInt(42)}42

    Arrays are concatenated with no separator. Booleans, null, and undefined produce no output, matching React. bigint renders its digits, while React renders nothing.

    Void elements

    Void elements like <br />, <img />, <input />, and <meta /> do not produce a closing tag. The runtime detects void elements by tag name.

    Missing elements or attributes

    If an HTML element or attribute is missing from the type definitions, open a pull request adding it. See the contributing guide for setup instructions.