Getting started

Install

pnpm add ruri

Your first component

This sample is live - the button really works:

import { tags, Signal } from "ruri"

const { div, button, ul, li } = tags
const count = new Signal(0)

const app = div({},
    ul({}, li({}, "count: ", count)),
    button({ onclick: () => count.value++ }, "+1"),
)

output.append(app)

running...

Playground blocks are fenced with ``ruri: the docs client rewrites the import to the bundled framework and runs the code against an output element rendered below the listing.

tags is a typed proxy for every HTML, SVG and MathML element
props are plain objects; onclick becomes an event listener
signals passed as children become self-updating text nodes

Props

prop	behaviour
`class: ["a", "b"]`	arrays are joined
`checked: false`	boolean attributes follow the HTML syntax
`style: { color: "red" }`	objects are assigned to the style declaration
`value: someSignal`	reactive attributes update on change
`id: null`	removes the attribute

JSX

{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "ruri" } }

import { render, Signal } from "ruri"

const count = new Signal(0)
render(document.body, <button onclick={() => count.value++}>{count}</button>)