About json-render
MyHub widgets are rendered by Vercel json-render — an open-source library that turns a declarative JSON tree into a live React UI. Everything in the widget guide ultimately compiles to a json-render schema.
Why json-render
| Property | What it gives you |
|---|---|
| Declarative | Widgets are data, not code. They can be authored by humans, generated by an LLM, stored in a DB, version-controlled, diffed in PRs. |
| Reactive | The renderer subscribes to the state paths each element reads. State changes re-render only the affected subtree. |
| Composable | Element types are pluggable. MyHub registers a library of opinionated components on top of the json-render baseline. |
| Sandboxed | A widget JSON can't execute arbitrary code — it can only call registered components and registered $computed helpers. The LLM can author widgets with no XSS attack surface. |
How MyHub layers on top
The MyHub widgets-system is a thin layer over json-render that adds:
| Addition | Why |
|---|---|
dataProvider block | A typed contract for "where does this widget's data come from", so the host can dispatch the right MCP call before render. |
Plugin-namespaced $computed resolution | Plugin helpers register as <slug>_<name> so two plugins can ship a format_date without colliding. |
| Component baseline | Card, Header, Stat, Table, etc. — the components MyHub guarantees every tenant has. |
| Linter | Catches "spec.root references unknown id" / "child id missing" before render. |
Where to read the formal grammar
For the precise semantics of every primitive ($state, $computed, watch, etc.), the source of truth is:
- json-render docs — the canonical specification.
- json-render on GitHub — implementation + examples.
This guide gives you the plugin-author's view; json-render's docs give you the underlying schema, edge cases, and version history.
When to read which
| You want to… | Read |
|---|---|
| Build a widget for the marketplace | This site (start at tutorials). |
| Understand a primitive's exact semantics | json-render docs. |
| See every component MyHub ships | The auto-generated catalog from npm run sync:widget-skills in the MyHub repo. |
| Write your own renderer | json-render's source. |