A reactive framework for
user interfaces.
Retend is a JSX-based framework for interactive applications and user interfaces. Reactive state is connected to rendered output through a renderer interface.
function ToggleSwitch() {
const isOn = Cell.source(false);
const toggle = () => isOn.set(!isOn.get());
return (
<div>
<h2>Switch status: {isOn}</h2>
<button type="button" onClick={toggle}>Toggle</button>
</div>
);
}Composable.
Retend supports layouts built from small, reusable components.
Reactive.
Retend connects application state to rendered output and updates dependent bindings when state changes.
Fine-grained updates
Retend updates the nodes and properties affected by a state change instead of rerendering the entire component tree.
Included packages and features
The project includes routing, server rendering, asynchronous boundaries, development tooling, scoped context, and custom renderer support.
Router
Routing includes lazy loading, middleware, route locking, and reactive query parameters.
Server rendering
The server package supports server-side rendering, static site generation, and client hydration.
Async Boundaries
Coordinate loading states across component trees with
<Await>. Nested async data resolves together, eliminating layout shift.Hot Module Replacement
Hot Module Replacement preserves component state while source files are updated during development.
Scoped Context
Type-safe context values can be scoped to component subtrees. Scoped data is cleaned up when its Provider leaves the component tree.
Renderer architecture
The core uses a pluggable renderer interface. Renderers can target the browser, the server, or other host environments.
Start building today.
One command to scaffold a new project. TypeScript, routing, and dev server — all configured and ready.
npx retend-start@latest my-app