{"slug":"index","title":"Introduction","headings":["Features","Why hyperscript?"],"contentHtml":"<h1 id=\"introduction\">Introduction</h1><p><strong>ruri</strong> is a small UI framework built around signals and hyperscript tags, with a zero-dependency server for full-stack apps.</p><pre class=\"shiki github-dark\" style=\"background-color:#17171d;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583\">import</span><span style=\"color:#E1E4E8\"> { tags, Signal } </span><span style=\"color:#F97583\">from</span><span style=\"color:#9ECBFF\"> \"ruri\"</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#F97583\">const</span><span style=\"color:#E1E4E8\"> { </span><span style=\"color:#79B8FF\">div</span><span style=\"color:#E1E4E8\">, </span><span style=\"color:#79B8FF\">button</span><span style=\"color:#E1E4E8\"> } </span><span style=\"color:#F97583\">=</span><span style=\"color:#E1E4E8\"> tags</span></span>\n<span class=\"line\"><span style=\"color:#F97583\">const</span><span style=\"color:#79B8FF\"> count</span><span style=\"color:#F97583\"> =</span><span style=\"color:#F97583\"> new</span><span style=\"color:#B392F0\"> Signal</span><span style=\"color:#E1E4E8\">(</span><span style=\"color:#79B8FF\">0</span><span style=\"color:#E1E4E8\">)</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#B392F0\">div</span><span style=\"color:#E1E4E8\">({}, count, </span><span style=\"color:#B392F0\">button</span><span style=\"color:#E1E4E8\">({ </span><span style=\"color:#B392F0\">onclick</span><span style=\"color:#E1E4E8\">: () </span><span style=\"color:#F97583\">=></span><span style=\"color:#E1E4E8\"> count.value</span><span style=\"color:#F97583\">++</span><span style=\"color:#E1E4E8\"> }, </span><span style=\"color:#9ECBFF\">\"+1\"</span><span style=\"color:#E1E4E8\">))</span></span></code></pre><h2 id=\"features\">Features</h2><ul><li><strong>Signals</strong> - fine-grained reactivity with automatic dependency tracking and cleanup</li><li><strong>Hyperscript tags</strong> - typed proxies for every HTML / SVG / MathML element</li><li><strong>JSX</strong> - <code>jsxImportSource: &quot;ruri&quot;</code> works out of the box</li><li><strong>Lists</strong> - <code>each()</code> with keyed reconciliation and minimal-move reordering</li><li><strong>Full-stack</strong> - SSR, hydration that adopts the server DOM, router, static files, rpc and streaming</li><li><strong>Styles</strong> - <code>css()</code> turns style objects into generated class names</li></ul><h2 id=\"why-hyperscript\">Why hyperscript?</h2><p>ruri components are plain functions returning DOM nodes. There is no virtual DOM to allocate: element factories build real nodes directly, and updates flow through signals into exactly the text nodes and attributes that depend on them.</p><p>This documentation site itself is rendered by ruri&#039;s own SSR - the static build and the dev server both run the same pipeline.</p>"}