Public API Cheatsheet

The complete public surface of reactolith:

import { App, // mount the app on a root element Router, // intercepts links/forms and visits URLs as HTML Mercure, // SSE client that pipes HTML updates into App.render MercureLive, // <mercure-live topic="…"> partial-update component ReactolithComponent, // converts a single DOM element into a React tree ScrollRestoration, // standalone scroll-restoration helper AppProvider, // default React provider used by App RouterProvider, // exposes useRouter() (loading, lastError, navigate) useApp, // hook → current App instance useRouter, // hook → { router, loading, lastError, clearError } useMercureTopic, // hook → live JSON value for a topic useMercureEventSource,// low-level hook (raw SSE messages) createLoader, // resolve tag names against import.meta.glob() maps } from "reactolith";

Streaming fragments

import { SHELL_END, // "" — where the Router cuts FRAGMENT_ATTRIBUTE, // "data-fragment" — placeholder / template name FRAGMENT_READY_TAG, // "rl-fragment" — completion marker FRAGMENT_READY_END, // "</rl-fragment>" — stream delimiter } from "reactolith"; const app = new App(component, undefined, undefined, undefined, undefined, undefined, { streaming: true, }); app.replace(name, content); // HTML string | Node | Node[] | null → boolean app.applyFragments(html); // → string[] of applied names app.isFragmentPayload(html); // → boolean app.pendingFragments(); // → string[] still waiting app.on("fragment:received", (name, content) => {}); app.on("stream:ended", (pending) => {});

Partial responses

import { FRAGMENTS_CONTENT_TYPE, // "text/vnd.reactolith.fragments+html" FRAGMENTS_ACCEPT, // what the Router asks for when streaming is on REACTOLITH_HEADER, // "X-Reactolith" REACTOLITH_VERSION, // "1" REACTOLITH_FROM_HEADER, // "X-Reactolith-From" REACTOLITH_FRAGMENTS_HEADER, // "X-Reactolith-Fragments" (opt-in) } from "reactolith"; new App(component, undefined, undefined, undefined, undefined, undefined, { streaming: true, sendFragmentNames: true, }); app.fragmentNames(); // → every placeholder name in the tree router.on("fragments:applied", (input, init, pushState, response, html, finalUrl, names) => {});

Form helpers

import { Form, useFormErrors, useFormSubmitting, } from "reactolith";

Server entry point

import { renderToString } from "reactolith/server";

CLI

npx generate-web-types --components src/components/ui --out web-types.json