Rivet

Rivet attaches reactive TypeScript behaviour to HTML that has already been rendered on the server — no renderer, no Virtual DOM, no JSX. Calm, lean, browser-native, and built to plug into FULLHAUS TYPO3 sitepackages where the markup comes from Fluid templates.

Server-first

Markup comes from Fluid/server. Rivet marks roots via data-rivet and wires up behaviour only — the structure stays untouched.

Fine-grained reactivity

signal, computed and effect — a tiny, synchronous reactive system with zero dependencies.

Auto cleanup

Listeners, effects and event subscriptions clean themselves up on unmount. No leaks.

LLM-friendly

These docs ship /llms.txt and /llms-full.txt — the entire documentation as clean Markdown for AI tools.

Example

<div data-rivet="disclosure" data-rivet-id="main-menu">
  <button data-rivet-part="button" aria-expanded="false">Toggle</button>
  <div data-rivet-part="panel">Content</div>
</div>

import { createRivet, defineComponent } from "@fullhaus/rivet";

const disclosure = defineComponent(({ part, signal, on, effect }) => {
  const button = part("button");
  const panel = part("panel");
  const open = signal(false);

  on(button, "click", () => open.update((v) => !v));

  effect(() => {
    panel.hidden = !open();
    button.setAttribute("aria-expanded", String(open()));
  });

  return { show: () => open.set(true), hide: () => open.set(false) };
});

createRivet().component("disclosure", disclosure).mount();

Get started

Installation Install the package from the FULLHAUS registry.

Quick Start Mount your first component in five minutes.

TYPO3 Integration Rivet in a sitepackage with Vite & Fluid.

API Reference Component context, app API and reactivity.

---

Derived from lume by beardcoder (MIT) and adapted for FULLHAUS. License: MIT.