{"slug":"getting-started","title":"Getting started","headings":["Install","Your first component","Props","JSX"],"contentHtml":"

Getting started

Install

pnpm add ruri

Your first component

This sample is live - the button really works:

import { tags, Signal } from \"ruri\"\n\nconst { div, button, ul, li } = tags\nconst count = new Signal(0)\n\nconst app = div({},\n    ul({}, li({}, \"count: \", count)),\n    button({ onclick: () => count.value++ }, \"+1\"),\n)\n\noutput.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.

Props

propbehaviour
class: ["a", "b"]arrays are joined
checked: falseboolean attributes follow the HTML syntax
style: { color: "red" }objects are assigned to the style declaration
value: someSignalreactive attributes update on change
id: nullremoves the attribute

JSX

{ \"compilerOptions\": { \"jsx\": \"react-jsx\", \"jsxImportSource\": \"ruri\" } }
import { render, Signal } from "ruri"\n\nconst count = new Signal(0)\nrender(document.body, <button onclick={() => count.value++}>{count}</button>)
"}