Building the DOM

Elements are the user interface. tosijs creates real DOM elements, directly, with ordinary function calls. There is no template language, no JSX and nothing to compile, and what you get back is what the browser gives you: an HTMLElement you can append, query and inspect.

This page is the overview. Each part links to the page with the detail.

Element creators

import { elements } from 'tosijs'

const { div, h1, input, button } = elements

document.body.append(
  div(
    { class: 'card' },
    h1('Hello'),
    input({ placeholder: 'your name' }),
    button('OK', { onClick: () => console.log('clicked') })
  )
)

elements has a creator for every tag. A creator takes its arguments in any order: strings and elements become children, a plain object sets attributes, properties, styles and event handlers. Element creators covers everything they accept, including SVG and MathML, and bindParts() for wiring up HTML that already exists.

Styling

Use CSS. tosijs adds a way to write it as JavaScript objects, CSS variables with defaults, and color math: see CSS.

Web components

When a piece of the page deserves its own tag, make it a custom element with Component. Components have no shadow DOM by default, compose with <slot>, and are bound like an <input>, through their value. Blueprints load components straight from markup.

Making it live

Everything above builds a static page. To have it follow your state, see Binding to the DOM.

• Element Creators
• CSS
• Web Components