Get started – TypeScript

@fuaran-ui/ui is the ergonomic TypeScript author surface over the wire contract; @fuaran-ui/ops is the canonical codec + tree-op apply engine. The module layout mirrors the F# Fuaran.* surface.

Install

npm install @fuaran-ui/ui @fuaran-ui/ops

Author + validate a tree

import { fuaran, preEmitValidate, type NodeId } from '@fuaran-ui/ui';

const tree = fuaran.dashboard({
  id: 'root' as NodeId,
  children: [
    fuaran.heading({ id: 'title' as NodeId, text: 'Channel performance' }),
    fuaran.markdown('note' as NodeId, '**Hello** from a Fuaran tree.'),
  ],
});

const check = preEmitValidate(tree);
// check.ok === true, or check.error is a readonly PreEmitDefect[] (EMPTY_NODE_ID, …)

Encode to canonical wire JSON

import { encodeNode } from '@fuaran-ui/ops';

const wire = encodeNode(tree);
// canonical JSON – byte-identical to the F# and Python hosts

The tree you just built

Rendered by this very site from the same canonical JSON, with a one-click link into the playground:

Channel performance

Hello from a Fuaran tree.

{"accessibility":{"role":"main"},"id":"root","kind":{"$type":"Box","children":[{"id":"title","kind":{"$type":"Heading","level":2,"text":"Channel performance","variant":"Standard"}},{"id":"note","kind":{"$type":"Markdown","text":"**Hello** from a Fuaran tree."}}],"layout":{"$type":"Auto"},"role":"Dashboard"}}

Open in fuaran-live ↗

Render + hydrate in React with @fuaran-ui/renderer.
Mutate it as data – import { apply } from '@fuaran-ui/ops' and apply typed tree-ops instead of rebuilding.
On .NET? The same tree authors in F#, C#, or VB – byte-identical on the wire.
See the component reference and the guide.