Showing preview only (4,464K chars total). Download the full file or copy to clipboard to get everything.
Repository: vercel-labs/json-render
Branch: main
Commit: b7993ed4ae81
Files: 1089
Total size: 4.1 MB
Directory structure:
gitextract_2q_khw51/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .cursor/
│ └── mcp.json
├── .github/
│ └── workflows/
│ ├── ci.yml
│ └── release.yml
├── .gitignore
├── .husky/
│ └── pre-commit
├── .npmrc
├── .vscode/
│ └── mcp.json
├── AGENTS.md
├── LICENSE
├── README.md
├── apps/
│ └── web/
│ ├── .env.example
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── app/
│ │ ├── (main)/
│ │ │ ├── docs/
│ │ │ │ ├── a2ui/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── adaptive-cards/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── ag-ui/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── ai-sdk/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── api/
│ │ │ │ │ ├── codegen/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── core/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── image/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── jotai/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── mcp/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── react/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── react-email/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── react-native/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── react-pdf/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── react-three-fiber/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── redux/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── remotion/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── shadcn/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── solid/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── svelte/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── vue/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── xstate/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ ├── yaml/
│ │ │ │ │ │ └── page.mdx
│ │ │ │ │ └── zustand/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── catalog/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── changelog/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── code-export/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── computed-values/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── custom-schema/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── data-binding/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── generation-modes/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── installation/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── migration/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── openapi/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── page.mdx
│ │ │ │ ├── quick-start/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── registry/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── renderers/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── schemas/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── skills/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── specs/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── streaming/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── validation/
│ │ │ │ │ └── page.mdx
│ │ │ │ ├── visibility/
│ │ │ │ │ └── page.mdx
│ │ │ │ └── watchers/
│ │ │ │ └── page.mdx
│ │ │ ├── examples/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── api/
│ │ │ ├── docs-chat/
│ │ │ │ └── route.ts
│ │ │ ├── docs-markdown/
│ │ │ │ └── route.ts
│ │ │ ├── generate/
│ │ │ │ └── route.ts
│ │ │ └── search/
│ │ │ └── route.ts
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── not-found.tsx
│ │ ├── og/
│ │ │ ├── [...slug]/
│ │ │ │ └── route.tsx
│ │ │ ├── og-image.tsx
│ │ │ └── route.tsx
│ │ └── playground/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ │ ├── code-block.tsx
│ │ ├── code-tabs.tsx
│ │ ├── code.tsx
│ │ ├── copy-button.tsx
│ │ ├── copy-page-button.tsx
│ │ ├── demo.tsx
│ │ ├── docs-chat.tsx
│ │ ├── docs-mobile-nav.tsx
│ │ ├── docs-sidebar.tsx
│ │ ├── expandable-code.tsx
│ │ ├── generation-modes-diagram.tsx
│ │ ├── header.tsx
│ │ ├── package-install.tsx
│ │ ├── playground.tsx
│ │ ├── search.tsx
│ │ ├── table-of-contents.tsx
│ │ ├── theme-provider.tsx
│ │ ├── theme-toggle.tsx
│ │ └── ui/
│ │ ├── accordion.tsx
│ │ ├── alert.tsx
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── checkbox.tsx
│ │ ├── collapsible.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── pagination.tsx
│ │ ├── popover.tsx
│ │ ├── progress.tsx
│ │ ├── radio-group.tsx
│ │ ├── resizable.tsx
│ │ ├── select.tsx
│ │ ├── separator.tsx
│ │ ├── sheet.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── sonner.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── textarea.tsx
│ │ ├── toggle-group.tsx
│ │ ├── toggle.tsx
│ │ └── tooltip.tsx
│ ├── components.json
│ ├── eslint.config.js
│ ├── lib/
│ │ ├── docs-navigation.ts
│ │ ├── examples.ts
│ │ ├── mdx-to-markdown.ts
│ │ ├── page-metadata.ts
│ │ ├── page-titles.ts
│ │ ├── rate-limit.ts
│ │ ├── render/
│ │ │ ├── catalog-display.ts
│ │ │ ├── catalog.ts
│ │ │ ├── registry.tsx
│ │ │ └── renderer.tsx
│ │ ├── search-index.ts
│ │ ├── spec-patch.ts
│ │ ├── use-playground-stream.ts
│ │ └── utils.ts
│ ├── mdx-components.tsx
│ ├── next.config.js
│ ├── package.json
│ ├── postcss.config.mjs
│ └── tsconfig.json
├── examples/
│ ├── chat/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ └── generate/
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ ├── theme-provider.tsx
│ │ │ ├── theme-toggle.tsx
│ │ │ └── ui/
│ │ │ ├── accordion.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── chart.tsx
│ │ │ ├── input.tsx
│ │ │ ├── label.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── table.tsx
│ │ │ └── tabs.tsx
│ │ ├── eslint.config.js
│ │ ├── lib/
│ │ │ ├── agent.ts
│ │ │ ├── rate-limit.ts
│ │ │ ├── render/
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── registry.tsx
│ │ │ │ └── renderer.tsx
│ │ │ ├── tools/
│ │ │ │ ├── crypto.ts
│ │ │ │ ├── github.ts
│ │ │ │ ├── hackernews.ts
│ │ │ │ ├── search.ts
│ │ │ │ └── weather.ts
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── dashboard/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ ├── generate/
│ │ │ │ │ └── route.ts
│ │ │ │ └── v1/
│ │ │ │ ├── accounts/
│ │ │ │ │ ├── [id]/
│ │ │ │ │ │ └── route.ts
│ │ │ │ │ └── route.ts
│ │ │ │ ├── customers/
│ │ │ │ │ ├── [id]/
│ │ │ │ │ │ └── route.ts
│ │ │ │ │ └── route.ts
│ │ │ │ ├── expenses/
│ │ │ │ │ ├── [id]/
│ │ │ │ │ │ ├── approve/
│ │ │ │ │ │ │ └── route.ts
│ │ │ │ │ │ ├── reject/
│ │ │ │ │ │ │ └── route.ts
│ │ │ │ │ │ └── route.ts
│ │ │ │ │ └── route.ts
│ │ │ │ ├── invoices/
│ │ │ │ │ ├── [id]/
│ │ │ │ │ │ ├── mark-paid/
│ │ │ │ │ │ │ └── route.ts
│ │ │ │ │ │ ├── route.ts
│ │ │ │ │ │ └── send/
│ │ │ │ │ │ └── route.ts
│ │ │ │ │ └── route.ts
│ │ │ │ ├── reports/
│ │ │ │ │ ├── export/
│ │ │ │ │ │ └── route.ts
│ │ │ │ │ └── profit-loss/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── reset/
│ │ │ │ │ └── route.ts
│ │ │ │ └── widgets/
│ │ │ │ ├── [id]/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── reorder/
│ │ │ │ │ └── route.ts
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ ├── add-widget-card.tsx
│ │ │ ├── code-highlight.tsx
│ │ │ ├── header.tsx
│ │ │ ├── sortable-widget.tsx
│ │ │ ├── theme-provider.tsx
│ │ │ ├── theme-toggle.tsx
│ │ │ ├── ui/
│ │ │ │ ├── accordion.tsx
│ │ │ │ ├── alert.tsx
│ │ │ │ ├── animated-border.tsx
│ │ │ │ ├── avatar.tsx
│ │ │ │ ├── badge.tsx
│ │ │ │ ├── button.tsx
│ │ │ │ ├── card.tsx
│ │ │ │ ├── chart.tsx
│ │ │ │ ├── checkbox.tsx
│ │ │ │ ├── dialog.tsx
│ │ │ │ ├── drawer.tsx
│ │ │ │ ├── dropdown-menu.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── pagination.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── progress.tsx
│ │ │ │ ├── radio-group.tsx
│ │ │ │ ├── select.tsx
│ │ │ │ ├── separator.tsx
│ │ │ │ ├── skeleton.tsx
│ │ │ │ ├── switch.tsx
│ │ │ │ ├── table.tsx
│ │ │ │ ├── tabs.tsx
│ │ │ │ ├── textarea.tsx
│ │ │ │ └── tooltip.tsx
│ │ │ └── widget.tsx
│ │ ├── components.json
│ │ ├── drizzle.config.ts
│ │ ├── eslint.config.js
│ │ ├── lib/
│ │ │ ├── db/
│ │ │ │ ├── connection.ts
│ │ │ │ ├── schema.ts
│ │ │ │ └── store.ts
│ │ │ ├── rate-limit.ts
│ │ │ ├── render/
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── registry.tsx
│ │ │ │ └── renderer.tsx
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ ├── scripts/
│ │ │ ├── clear.ts
│ │ │ └── seed.ts
│ │ └── tsconfig.json
│ ├── image/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ ├── generate/
│ │ │ │ │ └── route.ts
│ │ │ │ └── image/
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ └── ui/
│ │ │ ├── resizable.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ └── sheet.tsx
│ │ ├── components.json
│ │ ├── eslint.config.js
│ │ ├── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── examples.ts
│ │ │ ├── rate-limit.ts
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── mcp/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── server.ts
│ │ ├── src/
│ │ │ ├── catalog.ts
│ │ │ ├── globals.css
│ │ │ ├── main.tsx
│ │ │ └── mcp-app-view.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── no-ai/
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── eslint.config.js
│ │ ├── lib/
│ │ │ ├── examples.ts
│ │ │ └── render/
│ │ │ ├── catalog.ts
│ │ │ └── registry.tsx
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── react-email/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ ├── email/
│ │ │ │ │ └── route.ts
│ │ │ │ └── generate/
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ └── ui/
│ │ │ ├── button.tsx
│ │ │ ├── resizable.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── sheet.tsx
│ │ │ ├── tabs.tsx
│ │ │ └── textarea.tsx
│ │ ├── components.json
│ │ ├── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── examples.ts
│ │ │ ├── rate-limit.ts
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── react-native/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── _layout.tsx
│ │ │ ├── api/
│ │ │ │ └── generate+api.ts
│ │ │ └── index.tsx
│ │ ├── app.json
│ │ ├── lib/
│ │ │ └── render/
│ │ │ ├── catalog.ts
│ │ │ ├── registry.tsx
│ │ │ └── renderer.tsx
│ │ ├── metro.config.js
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── react-pdf/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ ├── generate/
│ │ │ │ │ └── route.ts
│ │ │ │ └── pdf/
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ └── ui/
│ │ │ ├── button.tsx
│ │ │ ├── resizable.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── sheet.tsx
│ │ │ ├── tabs.tsx
│ │ │ └── textarea.tsx
│ │ ├── components.json
│ │ ├── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── examples.ts
│ │ │ ├── rate-limit.ts
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── react-three-fiber/
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx
│ │ │ └── scenes/
│ │ │ ├── _helpers.ts
│ │ │ ├── clockwork-orrery.ts
│ │ │ ├── deep-sea-abyss.ts
│ │ │ ├── floating-islands.ts
│ │ │ ├── hyperspace-tunnel.ts
│ │ │ ├── index.ts
│ │ │ ├── mystify.ts
│ │ │ ├── orbital-chaos.ts
│ │ │ ├── perpetual-motion.ts
│ │ │ ├── pipes.ts
│ │ │ ├── portal-gallery.ts
│ │ │ ├── product-showroom.ts
│ │ │ ├── starfield.ts
│ │ │ └── storm-cell.ts
│ │ ├── eslint.config.js
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── remotion/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── app/
│ │ │ ├── api/
│ │ │ │ └── generate/
│ │ │ │ └── route.ts
│ │ │ ├── globals.css
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── rate-limit.ts
│ │ │ └── utils.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ └── tsconfig.json
│ ├── solid/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── DemoRenderer.tsx
│ │ │ ├── app.css
│ │ │ ├── index.tsx
│ │ │ └── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ ├── Badge.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Card.tsx
│ │ │ │ ├── Input.tsx
│ │ │ │ ├── ListItem.tsx
│ │ │ │ ├── Stack.tsx
│ │ │ │ └── Text.tsx
│ │ │ ├── registry.tsx
│ │ │ └── spec.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── stripe-app/
│ │ ├── README.md
│ │ ├── api/
│ │ │ ├── .env.example
│ │ │ ├── README.md
│ │ │ ├── app/
│ │ │ │ ├── api/
│ │ │ │ │ └── generate/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── next-env.d.ts
│ │ │ ├── next.config.ts
│ │ │ ├── package.json
│ │ │ └── tsconfig.json
│ │ ├── drawer-app/
│ │ │ ├── .env.example
│ │ │ ├── CHANGELOG.md
│ │ │ ├── README.md
│ │ │ ├── eslint.config.js
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── scripts/
│ │ │ │ └── setup.mjs
│ │ │ ├── src/
│ │ │ │ ├── lib/
│ │ │ │ │ ├── config.ts
│ │ │ │ │ ├── render/
│ │ │ │ │ │ ├── catalog/
│ │ │ │ │ │ │ ├── actions.ts
│ │ │ │ │ │ │ └── components.tsx
│ │ │ │ │ │ ├── catalog.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── renderer.tsx
│ │ │ │ │ ├── stream-spec.ts
│ │ │ │ │ └── stripe.ts
│ │ │ │ └── views/
│ │ │ │ ├── CustomerDetails.test.tsx
│ │ │ │ ├── CustomerDetails.tsx
│ │ │ │ ├── Customers.test.tsx
│ │ │ │ ├── Customers.tsx
│ │ │ │ ├── Home.test.tsx
│ │ │ │ ├── Home.tsx
│ │ │ │ ├── Invoices.tsx
│ │ │ │ ├── PaymentDetails.tsx
│ │ │ │ ├── Payments.tsx
│ │ │ │ ├── Products.tsx
│ │ │ │ └── Subscriptions.tsx
│ │ │ ├── stripe-app.template.json
│ │ │ ├── tsconfig.json
│ │ │ └── ui-extensions.d.ts
│ │ └── fullpage-app/
│ │ ├── .env.example
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.js
│ │ ├── jest.config.js
│ │ ├── package.json
│ │ ├── scripts/
│ │ │ └── setup.mjs
│ │ ├── src/
│ │ │ ├── lib/
│ │ │ │ ├── config.ts
│ │ │ │ ├── render/
│ │ │ │ │ ├── catalog/
│ │ │ │ │ │ ├── actions.ts
│ │ │ │ │ │ └── components.tsx
│ │ │ │ │ ├── catalog.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── renderer.tsx
│ │ │ │ ├── stream-spec.ts
│ │ │ │ └── stripe.ts
│ │ │ └── views/
│ │ │ └── FullPage.tsx
│ │ ├── stripe-app.template.json
│ │ ├── tsconfig.json
│ │ └── ui-extensions.d.ts
│ ├── svelte/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.svelte
│ │ │ ├── DemoRenderer.svelte
│ │ │ ├── app.css
│ │ │ ├── lib/
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── components/
│ │ │ │ │ ├── Badge.svelte
│ │ │ │ │ ├── Button.svelte
│ │ │ │ │ ├── Card.svelte
│ │ │ │ │ ├── Input.svelte
│ │ │ │ │ ├── ListItem.svelte
│ │ │ │ │ ├── Stack.svelte
│ │ │ │ │ └── Text.svelte
│ │ │ │ ├── registry.ts
│ │ │ │ └── spec.ts
│ │ │ ├── main.ts
│ │ │ └── vite-env.d.ts
│ │ ├── svelte.config.js
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── svelte-chat/
│ │ ├── .env.example
│ │ ├── .gitignore
│ │ ├── .npmrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── components.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.css
│ │ │ ├── app.d.ts
│ │ │ ├── app.html
│ │ │ ├── lib/
│ │ │ │ ├── agent.ts
│ │ │ │ ├── components/
│ │ │ │ │ └── ui/
│ │ │ │ │ ├── accordion/
│ │ │ │ │ │ ├── accordion-content.svelte
│ │ │ │ │ │ ├── accordion-item.svelte
│ │ │ │ │ │ ├── accordion-trigger.svelte
│ │ │ │ │ │ ├── accordion.svelte
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── alert/
│ │ │ │ │ │ ├── alert-description.svelte
│ │ │ │ │ │ ├── alert-title.svelte
│ │ │ │ │ │ ├── alert.svelte
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── badge/
│ │ │ │ │ │ ├── badge.svelte
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── button/
│ │ │ │ │ │ ├── button.svelte
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── card/
│ │ │ │ │ │ ├── card-action.svelte
│ │ │ │ │ │ ├── card-content.svelte
│ │ │ │ │ │ ├── card-description.svelte
│ │ │ │ │ │ ├── card-footer.svelte
│ │ │ │ │ │ ├── card-header.svelte
│ │ │ │ │ │ ├── card-title.svelte
│ │ │ │ │ │ ├── card.svelte
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── input/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── input.svelte
│ │ │ │ │ ├── label/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── label.svelte
│ │ │ │ │ ├── progress/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── progress.svelte
│ │ │ │ │ ├── radio-group/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── radio-group-item.svelte
│ │ │ │ │ │ └── radio-group.svelte
│ │ │ │ │ ├── select/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── select-content.svelte
│ │ │ │ │ │ ├── select-group-heading.svelte
│ │ │ │ │ │ ├── select-group.svelte
│ │ │ │ │ │ ├── select-item.svelte
│ │ │ │ │ │ ├── select-label.svelte
│ │ │ │ │ │ ├── select-portal.svelte
│ │ │ │ │ │ ├── select-scroll-down-button.svelte
│ │ │ │ │ │ ├── select-scroll-up-button.svelte
│ │ │ │ │ │ ├── select-separator.svelte
│ │ │ │ │ │ ├── select-trigger.svelte
│ │ │ │ │ │ └── select.svelte
│ │ │ │ │ ├── separator/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── separator.svelte
│ │ │ │ │ ├── table/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── table-body.svelte
│ │ │ │ │ │ ├── table-caption.svelte
│ │ │ │ │ │ ├── table-cell.svelte
│ │ │ │ │ │ ├── table-footer.svelte
│ │ │ │ │ │ ├── table-head.svelte
│ │ │ │ │ │ ├── table-header.svelte
│ │ │ │ │ │ ├── table-row.svelte
│ │ │ │ │ │ └── table.svelte
│ │ │ │ │ └── tabs/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── tabs-content.svelte
│ │ │ │ │ ├── tabs-list.svelte
│ │ │ │ │ ├── tabs-trigger.svelte
│ │ │ │ │ └── tabs.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── rate-limit.ts
│ │ │ │ ├── render/
│ │ │ │ │ ├── Renderer.svelte
│ │ │ │ │ ├── catalog.ts
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── Accordion.svelte
│ │ │ │ │ │ ├── Alert.svelte
│ │ │ │ │ │ ├── Badge.svelte
│ │ │ │ │ │ ├── BarChart.svelte
│ │ │ │ │ │ ├── Button.svelte
│ │ │ │ │ │ ├── Callout.svelte
│ │ │ │ │ │ ├── Card.svelte
│ │ │ │ │ │ ├── Grid.svelte
│ │ │ │ │ │ ├── Heading.svelte
│ │ │ │ │ │ ├── LineChart.svelte
│ │ │ │ │ │ ├── Link.svelte
│ │ │ │ │ │ ├── Metric.svelte
│ │ │ │ │ │ ├── PieChart.svelte
│ │ │ │ │ │ ├── Progress.svelte
│ │ │ │ │ │ ├── RadioGroup.svelte
│ │ │ │ │ │ ├── SelectInput.svelte
│ │ │ │ │ │ ├── Separator.svelte
│ │ │ │ │ │ ├── Skeleton.svelte
│ │ │ │ │ │ ├── Stack.svelte
│ │ │ │ │ │ ├── TabContent.svelte
│ │ │ │ │ │ ├── Table.svelte
│ │ │ │ │ │ ├── Tabs.svelte
│ │ │ │ │ │ ├── Text.svelte
│ │ │ │ │ │ ├── TextInput.svelte
│ │ │ │ │ │ └── Timeline.svelte
│ │ │ │ │ └── registry.ts
│ │ │ │ ├── tools/
│ │ │ │ │ ├── crypto.ts
│ │ │ │ │ ├── github.ts
│ │ │ │ │ ├── hackernews.ts
│ │ │ │ │ ├── search.ts
│ │ │ │ │ └── weather.ts
│ │ │ │ └── utils.ts
│ │ │ └── routes/
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.svelte
│ │ │ └── api/
│ │ │ └── generate/
│ │ │ └── +server.ts
│ │ ├── static/
│ │ │ └── robots.txt
│ │ ├── svelte.config.js
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── vite-renderers/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── main.ts
│ │ │ ├── react/
│ │ │ │ ├── App.tsx
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── mount.tsx
│ │ │ │ └── registry.tsx
│ │ │ ├── shared/
│ │ │ │ ├── catalog-def.ts
│ │ │ │ ├── handlers.ts
│ │ │ │ └── styles.css
│ │ │ ├── solid/
│ │ │ │ ├── App.tsx
│ │ │ │ ├── DemoRenderer.tsx
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── mount.tsx
│ │ │ │ └── registry.tsx
│ │ │ ├── spec.ts
│ │ │ ├── svelte/
│ │ │ │ ├── App.svelte
│ │ │ │ ├── DemoRenderer.svelte
│ │ │ │ ├── catalog.ts
│ │ │ │ ├── components/
│ │ │ │ │ ├── Badge.svelte
│ │ │ │ │ ├── Button.svelte
│ │ │ │ │ ├── Card.svelte
│ │ │ │ │ ├── Input.svelte
│ │ │ │ │ ├── ListItem.svelte
│ │ │ │ │ ├── RendererBadge.svelte
│ │ │ │ │ ├── RendererTabs.svelte
│ │ │ │ │ ├── Stack.svelte
│ │ │ │ │ └── Text.svelte
│ │ │ │ ├── mount.ts
│ │ │ │ └── registry.ts
│ │ │ └── vue/
│ │ │ ├── App.vue
│ │ │ ├── DemoRenderer.vue
│ │ │ ├── catalog.ts
│ │ │ ├── mount.ts
│ │ │ └── registry.ts
│ │ ├── svelte.config.js
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ └── vue/
│ ├── CHANGELOG.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── DemoRenderer.vue
│ │ ├── lib/
│ │ │ ├── catalog.ts
│ │ │ ├── registry.ts
│ │ │ └── spec.ts
│ │ └── main.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── package.json
├── packages/
│ ├── codegen/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── serialize.ts
│ │ │ ├── traverse.test.ts
│ │ │ ├── traverse.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── core/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── actions.test.ts
│ │ │ ├── actions.ts
│ │ │ ├── diff.ts
│ │ │ ├── edit-modes.ts
│ │ │ ├── env.d.ts
│ │ │ ├── index.ts
│ │ │ ├── merge.ts
│ │ │ ├── prompt.ts
│ │ │ ├── props.test.ts
│ │ │ ├── props.ts
│ │ │ ├── schema.test.ts
│ │ │ ├── schema.ts
│ │ │ ├── spec-validator.test.ts
│ │ │ ├── spec-validator.ts
│ │ │ ├── state-store.test.ts
│ │ │ ├── state-store.ts
│ │ │ ├── store-utils.ts
│ │ │ ├── types.test.ts
│ │ │ ├── types.ts
│ │ │ ├── validation.test.ts
│ │ │ ├── validation.ts
│ │ │ ├── visibility.test.ts
│ │ │ └── visibility.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── eslint-config/
│ │ ├── README.md
│ │ ├── base.js
│ │ ├── next.js
│ │ ├── package.json
│ │ └── react-internal.js
│ ├── image/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ ├── index.ts
│ │ │ │ └── standard.tsx
│ │ │ ├── index.ts
│ │ │ ├── render.test.tsx
│ │ │ ├── render.tsx
│ │ │ ├── schema.ts
│ │ │ ├── server.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── jotai/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── mcp/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.ts
│ │ │ ├── build-app-html-entry.ts
│ │ │ ├── build-app-html.ts
│ │ │ ├── index.ts
│ │ │ ├── server.ts
│ │ │ ├── types.ts
│ │ │ └── use-json-render-app.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── react/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── chained-actions.test.tsx
│ │ │ ├── contexts/
│ │ │ │ ├── actions.tsx
│ │ │ │ ├── repeat-scope.tsx
│ │ │ │ ├── state.test.tsx
│ │ │ │ ├── state.tsx
│ │ │ │ ├── validation.tsx
│ │ │ │ ├── visibility.test.tsx
│ │ │ │ └── visibility.tsx
│ │ │ ├── dynamic-forms.test.tsx
│ │ │ ├── hooks.test.ts
│ │ │ ├── hooks.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.test.tsx
│ │ │ ├── renderer.tsx
│ │ │ └── schema.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── react-email/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __fixtures__/
│ │ │ │ └── examples.ts
│ │ │ ├── catalog-types.ts
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ ├── index.ts
│ │ │ │ └── standard.tsx
│ │ │ ├── contexts/
│ │ │ │ ├── actions.tsx
│ │ │ │ ├── repeat-scope.tsx
│ │ │ │ ├── state.tsx
│ │ │ │ ├── validation.tsx
│ │ │ │ └── visibility.tsx
│ │ │ ├── index.ts
│ │ │ ├── render.test.tsx
│ │ │ ├── render.tsx
│ │ │ ├── renderer.tsx
│ │ │ ├── schema.ts
│ │ │ └── server.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── react-native/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ └── standard.tsx
│ │ │ ├── contexts/
│ │ │ │ ├── actions.tsx
│ │ │ │ ├── repeat-scope.tsx
│ │ │ │ ├── state.tsx
│ │ │ │ ├── validation.tsx
│ │ │ │ └── visibility.tsx
│ │ │ ├── hooks.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.tsx
│ │ │ └── schema.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── react-pdf/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ ├── index.ts
│ │ │ │ └── standard.tsx
│ │ │ ├── contexts/
│ │ │ │ ├── actions.tsx
│ │ │ │ ├── repeat-scope.tsx
│ │ │ │ ├── state.test.tsx
│ │ │ │ ├── state.tsx
│ │ │ │ ├── validation.tsx
│ │ │ │ └── visibility.tsx
│ │ │ ├── index.ts
│ │ │ ├── render.tsx
│ │ │ ├── renderer.tsx
│ │ │ ├── schema.ts
│ │ │ └── server.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── react-state/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── env.d.ts
│ │ │ ├── index.test.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ ├── tsup.config.ts
│ │ └── vitest.config.ts
│ ├── react-three-fiber/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog.ts
│ │ │ ├── components.tsx
│ │ │ ├── index.ts
│ │ │ ├── r3f-jsx.d.ts
│ │ │ ├── renderer.tsx
│ │ │ └── schemas.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── redux/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── remotion/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── catalog.ts
│ │ │ ├── components/
│ │ │ │ ├── ClipWrapper.tsx
│ │ │ │ ├── Renderer.tsx
│ │ │ │ ├── hooks.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── standard.tsx
│ │ │ │ └── types.ts
│ │ │ ├── index.ts
│ │ │ ├── schema.ts
│ │ │ └── server.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── shadcn/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── components.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog.ts
│ │ │ ├── components.tsx
│ │ │ ├── index.ts
│ │ │ ├── lib/
│ │ │ │ └── utils.ts
│ │ │ └── ui/
│ │ │ ├── accordion.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── carousel.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── collapsible.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── drawer.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── input.tsx
│ │ │ ├── label.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── textarea.tsx
│ │ │ ├── toggle-group.tsx
│ │ │ ├── toggle.tsx
│ │ │ └── tooltip.tsx
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── solid/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── chained-actions.test.tsx
│ │ │ ├── contexts/
│ │ │ │ ├── actions.test.tsx
│ │ │ │ ├── actions.tsx
│ │ │ │ ├── repeat-scope.tsx
│ │ │ │ ├── state.test.tsx
│ │ │ │ ├── state.tsx
│ │ │ │ ├── validation.test.tsx
│ │ │ │ ├── validation.tsx
│ │ │ │ ├── visibility.test.tsx
│ │ │ │ └── visibility.tsx
│ │ │ ├── dynamic-forms.test.tsx
│ │ │ ├── hooks.test.ts
│ │ │ ├── hooks.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.test.tsx
│ │ │ ├── renderer.tsx
│ │ │ └── schema.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── svelte/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── CatalogRenderer.svelte
│ │ │ ├── ConfirmDialog.svelte
│ │ │ ├── ConfirmDialogManager.svelte
│ │ │ ├── ElementRenderer.svelte
│ │ │ ├── JsonUIProvider.svelte
│ │ │ ├── Renderer.svelte
│ │ │ ├── RendererWithProvider.test.svelte
│ │ │ ├── RepeatChildren.svelte
│ │ │ ├── TestButton.svelte
│ │ │ ├── TestContainer.svelte
│ │ │ ├── TestText.svelte
│ │ │ ├── catalog-types.ts
│ │ │ ├── contexts/
│ │ │ │ ├── ActionProvider.svelte
│ │ │ │ ├── FunctionsContextProvider.svelte
│ │ │ │ ├── RepeatScopeProvider.svelte
│ │ │ │ ├── StateProvider.svelte
│ │ │ │ ├── ValidationProvider.svelte
│ │ │ │ ├── VisibilityProvider.svelte
│ │ │ │ ├── actions.test.ts
│ │ │ │ ├── state.test.ts
│ │ │ │ └── visibility.test.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.test.ts
│ │ │ ├── renderer.ts
│ │ │ ├── schema.ts
│ │ │ ├── streaming.svelte.ts
│ │ │ ├── utils.svelte.ts
│ │ │ └── utils.test.ts
│ │ ├── svelte.config.js
│ │ └── tsconfig.json
│ ├── typescript-config/
│ │ ├── base.json
│ │ ├── nextjs.json
│ │ ├── package.json
│ │ └── react-library.json
│ ├── ui/
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ └── code.tsx
│ │ └── tsconfig.json
│ ├── vue/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── catalog-types.ts
│ │ │ ├── composables/
│ │ │ │ ├── actions.test.ts
│ │ │ │ ├── actions.ts
│ │ │ │ ├── repeat-scope.ts
│ │ │ │ ├── state.test.ts
│ │ │ │ ├── state.ts
│ │ │ │ ├── validation.test.ts
│ │ │ │ ├── validation.ts
│ │ │ │ ├── visibility.test.ts
│ │ │ │ └── visibility.ts
│ │ │ ├── dynamic-forms.test.ts
│ │ │ ├── hooks.test.ts
│ │ │ ├── hooks.ts
│ │ │ ├── index.ts
│ │ │ ├── renderer.test.ts
│ │ │ ├── renderer.ts
│ │ │ └── schema.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── xstate/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── yaml/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── diff.test.ts
│ │ │ ├── diff.ts
│ │ │ ├── index.ts
│ │ │ ├── merge.test.ts
│ │ │ ├── merge.ts
│ │ │ ├── parser.test.ts
│ │ │ ├── parser.ts
│ │ │ ├── prompt.test.ts
│ │ │ ├── prompt.ts
│ │ │ ├── transform.test.ts
│ │ │ └── transform.ts
│ │ ├── tsconfig.json
│ │ ├── tsup.config.ts
│ │ └── vitest.config.ts
│ └── zustand/
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── index.test.ts
│ │ └── index.ts
│ ├── tsconfig.json
│ └── tsup.config.ts
├── pnpm-workspace.yaml
├── scripts/
│ └── generate-og-images.mts
├── skills/
│ ├── codegen/
│ │ └── SKILL.md
│ ├── core/
│ │ └── SKILL.md
│ ├── image/
│ │ └── SKILL.md
│ ├── jotai/
│ │ └── SKILL.md
│ ├── mcp/
│ │ └── SKILL.md
│ ├── react/
│ │ └── SKILL.md
│ ├── react-email/
│ │ └── SKILL.md
│ ├── react-native/
│ │ └── SKILL.md
│ ├── react-pdf/
│ │ └── SKILL.md
│ ├── react-three-fiber/
│ │ └── SKILL.md
│ ├── redux/
│ │ └── SKILL.md
│ ├── remotion/
│ │ └── SKILL.md
│ ├── remotion-best-practices/
│ │ ├── SKILL.md
│ │ └── rules/
│ │ ├── 3d.md
│ │ ├── animations.md
│ │ ├── assets/
│ │ │ ├── charts-bar-chart.tsx
│ │ │ ├── text-animations-typewriter.tsx
│ │ │ └── text-animations-word-highlight.tsx
│ │ ├── assets.md
│ │ ├── audio.md
│ │ ├── calculate-metadata.md
│ │ ├── can-decode.md
│ │ ├── charts.md
│ │ ├── compositions.md
│ │ ├── display-captions.md
│ │ ├── extract-frames.md
│ │ ├── fonts.md
│ │ ├── get-audio-duration.md
│ │ ├── get-video-dimensions.md
│ │ ├── get-video-duration.md
│ │ ├── gifs.md
│ │ ├── images.md
│ │ ├── import-srt-captions.md
│ │ ├── light-leaks.md
│ │ ├── lottie.md
│ │ ├── maps.md
│ │ ├── measuring-dom-nodes.md
│ │ ├── measuring-text.md
│ │ ├── parameters.md
│ │ ├── sequencing.md
│ │ ├── subtitles.md
│ │ ├── tailwind.md
│ │ ├── text-animations.md
│ │ ├── timing.md
│ │ ├── transcribe-captions.md
│ │ ├── transitions.md
│ │ ├── transparent-videos.md
│ │ ├── trimming.md
│ │ └── videos.md
│ ├── shadcn/
│ │ └── SKILL.md
│ ├── skill-creator/
│ │ ├── LICENSE.txt
│ │ ├── SKILL.md
│ │ ├── references/
│ │ │ ├── output-patterns.md
│ │ │ └── workflows.md
│ │ └── scripts/
│ │ ├── init_skill.py
│ │ ├── package_skill.py
│ │ └── quick_validate.py
│ ├── solid/
│ │ └── SKILL.md
│ ├── svelte/
│ │ └── SKILL.md
│ ├── vue/
│ │ └── SKILL.md
│ ├── xstate/
│ │ └── SKILL.md
│ ├── yaml/
│ │ └── SKILL.md
│ └── zustand/
│ └── SKILL.md
├── tests/
│ └── e2e/
│ ├── package.json
│ ├── state-store-e2e.test.ts
│ └── vitest.config.ts
├── turbo.json
└── vitest.config.mts
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in the repository](https://github.com/changesets/changesets).
## Adding a changeset
To add a changeset, run `pnpm changeset` in the root of the repository. This will prompt you to select
which packages have changed and what type of version bump (major, minor, or patch) should be applied.
All `@json-render/*` packages are versioned together -- a changeset for any one of them will bump all
packages to the same version.
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [
[
"@json-render/core",
"@json-render/react",
"@json-render/react-email",
"@json-render/react-pdf",
"@json-render/shadcn",
"@json-render/react-native",
"@json-render/remotion",
"@json-render/codegen",
"@json-render/zustand",
"@json-render/redux",
"@json-render/jotai",
"@json-render/vue",
"@json-render/xstate",
"@json-render/image",
"@json-render/mcp",
"@json-render/svelte",
"@json-render/solid",
"@json-render/react-three-fiber",
"@json-render/yaml"
]
],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"privatePackages": {
"version": true,
"tag": false
}
}
================================================
FILE: .cursor/mcp.json
================================================
{
"mcpServers": {
"json-render": {
"command": "npx",
"args": ["tsx", "examples/mcp/server.ts", "--stdio"]
}
}
}
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
push:
branches:
- main
pull_request:
branches:
- main
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
lint:
name: Lint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm lint
test:
name: Test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- name: Build packages
run: pnpm turbo run build --filter='./packages/*'
- run: pnpm test
typecheck:
name: Type Check
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm type-check
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- main
workflow_dispatch:
concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions:
contents: write
pull-requests: write
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
registry-url: "https://registry.npmjs.org"
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Create Release Pull Request or Publish
uses: changesets/action@v1
with:
version: pnpm ci:version
publish: pnpm ci:publish
title: "chore: version packages"
commit: "chore: version packages"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NODE_AUTH_TOKEN: ${{ secrets.NPM_VERCEL_TOKEN_ELEVATED }}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# Dependencies
node_modules
.pnp
.pnp.js
.pnpm-store/
# Local env files
.env*
!.env.example
# Testing
coverage
# Turbo
.turbo
# Vercel
.vercel
# Expo
.expo/
# Build Outputs
.next/
out/
build
dist
*.tsbuildinfo
.svelte-kit/
# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Misc
.DS_Store
*.pem
# opensrc - source code for packages
opensrc/
# Stripe apps (generated from template + build artifacts)
examples/stripe-app/*/stripe-app.json
examples/stripe-app/*/.build
examples/stripe-app/*/yarn.lock
================================================
FILE: .husky/pre-commit
================================================
pnpm lint-staged
================================================
FILE: .npmrc
================================================
================================================
FILE: .vscode/mcp.json
================================================
{
"servers": {
"json-render": {
"type": "stdio",
"command": "npx",
"args": ["tsx", "examples/mcp/server.ts", "--stdio"]
}
}
}
================================================
FILE: AGENTS.md
================================================
# AGENTS.md
Instructions for AI coding agents working with this codebase.
## Package Management
**Always check the latest version before installing a package.**
Before adding or updating any dependency, verify the current latest version on npm:
```bash
npm view <package-name> version
```
Or check multiple packages at once:
```bash
npm view ai version
npm view @ai-sdk/provider-utils version
npm view zod version
```
This ensures we don't install outdated versions that may have incompatible types or missing features.
## Code Style
- Do not use emojis in code or UI
- Use shadcn CLI to add shadcn/ui components: `pnpm dlx shadcn@latest add <component>`
- **Web app docs (`apps/web/`):** Never use Markdown table syntax (`| col | col |`). Always use HTML `<table>` with `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`. Markdown tables do not render correctly in the web app. Inside HTML table cells, curly braces must be escaped as JSX expressions (e.g. `<code>{'{ "$state": "/path" }'}</code>`) because MDX parses `{` as a JSX expression boundary.
## AI SDK / AI Gateway
When using the Vercel AI SDK (`ai` package) with AI Gateway, pass the model as a plain string identifier -- do not import a provider constructor:
```ts
import { streamText } from "ai";
const result = streamText({
model: "anthropic/claude-haiku-4.5",
prompt: "...",
});
```
This requires `AI_GATEWAY_API_KEY` to be set in the environment. See `tests/e2e/` for examples.
## Dev Servers
All apps and examples with dev servers use [portless](https://github.com/vercel-labs/portless) to avoid hardcoded ports. Portless assigns random ports and exposes each app via `.localhost` URLs.
Naming convention:
- Main web app: `json-render` → `json-render.localhost:1355`
- Examples: `[name]-demo.json-render` → `[name]-demo.json-render.localhost:1355`
When adding a new example that runs a dev server, wrap its `dev` script with `portless <name>`:
```json
{
"scripts": {
"dev": "portless my-example-demo.json-render next dev --turbopack"
}
}
```
Do **not** add `--port` flags -- portless handles port assignment automatically. Do **not** add portless as a project dependency; it must be installed globally.
## Workflow
- Run `pnpm type-check` after each turn to ensure type safety
- When making user-facing changes (new packages, API changes, new features, renamed exports, changed behavior), update the relevant documentation:
- Package `README.md` files in `packages/*/README.md`
- Root `README.md` (if packages table, install commands, or examples are affected)
- Web app docs in `apps/web/` (if guides, API references, or examples need updating)
- Skills in `skills/*/SKILL.md` (if the package has a corresponding skill)
- `AGENTS.md` (if workflow or conventions change)
## Releases
This monorepo uses [Changesets](https://github.com/changesets/changesets) for versioning and publishing.
### Fixed version group
All public `@json-render/*` packages are in a **fixed** group (see `.changeset/config.json`). A changeset that bumps any one of them bumps all of them to the same version. You only need to list the packages that actually changed in the changeset front matter — the fixed group handles the rest.
### Preparing a release
When asked to prepare a release (e.g. "prepare v0.12.0"):
1. **Create a changeset file** at `.changeset/v0-<N>-release.md` following the existing pattern:
- YAML front matter listing changed packages with bump type (`minor` for feature releases, `patch` for bug-fix-only releases)
- A one-line summary, then `### New:` / `### Improved:` / `### Fixed:` sections describing each change
- Always list `@json-render/core` plus any packages with actual code changes
2. **Do NOT bump versions** in `package.json` files — CI runs `pnpm ci:version` (which calls `changeset version`) to do that automatically
3. **Do NOT manually write `CHANGELOG.md`** entries — `changeset version` generates them from the changeset file
4. **Add new packages to the fixed group** in `.changeset/config.json` if they should be versioned together with the rest
5. **Fill documentation gaps** — every public package should have:
- A row in the root `README.md` packages table
- A renderer section in the root `README.md` (if it's a renderer)
- An API reference page at `apps/web/app/(main)/docs/api/<name>/page.mdx`
- An entry in `apps/web/lib/page-titles.ts` and `apps/web/lib/docs-navigation.ts`
- An entry in the docs-chat system prompt (`apps/web/app/api/docs-chat/route.ts`)
- A skill at `skills/<name>/SKILL.md`
- A `packages/<name>/README.md`
6. **Run `pnpm type-check`** after all changes to verify nothing is broken
### CI scripts
- `pnpm changeset` — interactively create a new changeset
- `pnpm ci:version` — run `changeset version` + lockfile update (CI only)
- `pnpm ci:publish` — build all packages and publish to npm (CI only)
<!-- opensrc:start -->
## Source Code Reference
Source code for dependencies is available in `opensrc/` for deeper understanding of implementation details.
See `opensrc/sources.json` for the list of available packages and their versions.
Use this source code when you need to understand how a package works internally, not just its types/interface.
### Fetching Additional Source Code
To fetch source code for a package or repository you need to understand, run:
```bash
npx opensrc <package> # npm package (e.g., npx opensrc zod)
npx opensrc pypi:<package> # Python package (e.g., npx opensrc pypi:requests)
npx opensrc crates:<package> # Rust crate (e.g., npx opensrc crates:serde)
npx opensrc <owner>/<repo> # GitHub repo (e.g., npx opensrc vercel/ai)
```
<!-- opensrc:end -->
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2025 Vercel Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
# json-render
**The Generative UI framework.**
Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
```bash
# for React
npm install @json-render/core @json-render/react
# for React with pre-built shadcn/ui components
npm install @json-render/shadcn
# or for React Native
npm install @json-render/core @json-render/react-native
# or for video
npm install @json-render/core @json-render/remotion
# or for PDF documents
npm install @json-render/core @json-render/react-pdf
# or for HTML email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# or for Vue
npm install @json-render/core @json-render/vue
# or for Svelte
npm install @json-render/core @json-render/svelte
# or for SolidJS
npm install @json-render/core @json-render/solid
# or for 3D scenes
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
```
## Why json-render?
json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails, AI generates within them:
- **Guardrailed** - AI can only use components in your catalog
- **Predictable** - JSON output matches your schema, every time
- **Fast** - Stream and render progressively as the model responds
- **Cross-Platform** - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog
- **Batteries Included** - 36 pre-built shadcn/ui components ready to use
## Quick Start
### 1. Define Your Catalog
```typescript
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
const catalog = defineCatalog(schema, {
components: {
Card: {
props: z.object({ title: z.string() }),
description: "A card container",
},
Metric: {
props: z.object({
label: z.string(),
value: z.string(),
format: z.enum(["currency", "percent", "number"]).nullable(),
}),
description: "Display a metric value",
},
Button: {
props: z.object({
label: z.string(),
action: z.string(),
}),
description: "Clickable button",
},
},
actions: {
export_report: { description: "Export dashboard to PDF" },
refresh_data: { description: "Refresh all metrics" },
},
});
```
### 2. Define Your Components
```tsx
import { defineRegistry, Renderer } from "@json-render/react";
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) => (
<div className="card">
<h3>{props.title}</h3>
{children}
</div>
),
Metric: ({ props }) => (
<div className="metric">
<span>{props.label}</span>
<span>{format(props.value, props.format)}</span>
</div>
),
Button: ({ props, emit }) => (
<button onClick={() => emit("press")}>{props.label}</button>
),
},
});
```
### 3. Render AI-Generated Specs
```tsx
function Dashboard({ spec }) {
return <Renderer spec={spec} registry={registry} />;
}
```
**That's it.** AI generates JSON, you render it safely.
---
## Packages
| Package | Description |
| --------------------------- | ---------------------------------------------------------------------- |
| `@json-render/core` | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities |
| `@json-render/react` | React renderer, contexts, hooks |
| `@json-render/vue` | Vue 3 renderer, composables, providers |
| `@json-render/svelte` | Svelte 5 renderer with runes-based reactivity |
| `@json-render/solid` | SolidJS renderer with fine-grained reactive contexts |
| `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
| `@json-render/react-three-fiber` | React Three Fiber renderer for 3D scenes (19 built-in components) |
| `@json-render/react-native` | React Native renderer with standard mobile components |
| `@json-render/remotion` | Remotion video renderer, timeline schema |
| `@json-render/react-pdf` | React PDF renderer for generating PDF documents from specs |
| `@json-render/react-email` | React Email renderer for HTML/plain-text emails from specs |
| `@json-render/image` | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
| `@json-render/codegen` | Utilities for generating code from json-render UI trees |
| `@json-render/redux` | Redux / Redux Toolkit adapter for `StateStore` |
| `@json-render/zustand` | Zustand adapter for `StateStore` |
| `@json-render/jotai` | Jotai adapter for `StateStore` |
| `@json-render/xstate` | XState Store (atom) adapter for `StateStore` |
| `@json-render/mcp` | MCP Apps integration for Claude, ChatGPT, Cursor, VS Code |
| `@json-render/yaml` | YAML wire format with streaming parser, edit modes, AI SDK transform |
## Renderers
### React (UI)
```tsx
import { defineRegistry, Renderer } from "@json-render/react";
import { schema } from "@json-render/react/schema";
// Flat spec format (root key + elements map)
const spec = {
root: "card-1",
elements: {
"card-1": {
type: "Card",
props: { title: "Hello" },
children: ["button-1"],
},
"button-1": {
type: "Button",
props: { label: "Click me" },
children: [],
},
},
};
// defineRegistry creates a type-safe component registry
const { registry } = defineRegistry(catalog, { components });
<Renderer spec={spec} registry={registry} />;
```
### Vue (UI)
```typescript
import { h } from "vue";
import { defineRegistry, Renderer } from "@json-render/vue";
import { schema } from "@json-render/vue/schema";
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) =>
h("div", { class: "card" }, [h("h3", null, props.title), children]),
Button: ({ props, emit }) =>
h("button", { onClick: () => emit("press") }, props.label),
},
});
// In your Vue component template:
// <Renderer :spec="spec" :registry="registry" />
```
### Svelte (UI)
```typescript
import { defineRegistry, Renderer } from "@json-render/svelte";
import { schema } from "@json-render/svelte/schema";
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) => /* Svelte 5 snippet */,
Button: ({ props, emit }) => /* Svelte 5 snippet */,
},
});
// In your Svelte component:
// <Renderer spec={spec} registry={registry} />
```
### Solid (UI)
```tsx
import { defineRegistry, Renderer } from "@json-render/solid";
import { schema } from "@json-render/solid/schema";
const { registry } = defineRegistry(catalog, {
components: {
Card: (renderProps) => <div>{renderProps.children}</div>,
Button: (renderProps) => (
<button onClick={() => renderProps.emit("press")}>
{renderProps.element.props.label as string}
</button>
),
},
});
<Renderer spec={spec} registry={registry} />;
```
### shadcn/ui (Web)
```tsx
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { shadcnComponents } from "@json-render/shadcn";
// Pick components from the 36 standard definitions
const catalog = defineCatalog(schema, {
components: {
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Heading: shadcnComponentDefinitions.Heading,
Button: shadcnComponentDefinitions.Button,
},
actions: {},
});
// Use matching implementations
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Heading: shadcnComponents.Heading,
Button: shadcnComponents.Button,
},
});
<Renderer spec={spec} registry={registry} />;
```
### React Native (Mobile)
```tsx
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react-native/schema";
import {
standardComponentDefinitions,
standardActionDefinitions,
} from "@json-render/react-native/catalog";
import { defineRegistry, Renderer } from "@json-render/react-native";
// 25+ standard components included
const catalog = defineCatalog(schema, {
components: { ...standardComponentDefinitions },
actions: standardActionDefinitions,
});
const { registry } = defineRegistry(catalog, { components: {} });
<Renderer spec={spec} registry={registry} />;
```
### Remotion (Video)
```tsx
import { Player } from "@remotion/player";
import {
Renderer,
schema,
standardComponentDefinitions,
} from "@json-render/remotion";
// Timeline spec format
const spec = {
composition: {
id: "video",
fps: 30,
width: 1920,
height: 1080,
durationInFrames: 300,
},
tracks: [{ id: "main", name: "Main", type: "video", enabled: true }],
clips: [
{
id: "clip-1",
trackId: "main",
component: "TitleCard",
props: { title: "Hello" },
from: 0,
durationInFrames: 90,
},
],
audio: { tracks: [] },
};
<Player
component={Renderer}
inputProps={{ spec }}
durationInFrames={spec.composition.durationInFrames}
fps={spec.composition.fps}
compositionWidth={spec.composition.width}
compositionHeight={spec.composition.height}
/>;
```
### React PDF (Documents)
```typescript
import { renderToBuffer } from "@json-render/react-pdf";
const spec = {
root: "doc",
elements: {
doc: {
type: "Document",
props: { title: "Invoice" },
children: ["page-1"],
},
"page-1": {
type: "Page",
props: { size: "A4" },
children: ["heading-1", "table-1"],
},
"heading-1": {
type: "Heading",
props: { text: "Invoice #1234", level: "h1" },
children: [],
},
"table-1": {
type: "Table",
props: {
columns: [
{ header: "Item", width: "60%" },
{ header: "Price", width: "40%", align: "right" },
],
rows: [
["Widget A", "$10.00"],
["Widget B", "$25.00"],
],
},
children: [],
},
},
};
// Render to buffer, stream, or file
const buffer = await renderToBuffer(spec);
```
### React Email (Email)
```typescript
import { renderToHtml } from "@json-render/react-email";
import { schema, standardComponentDefinitions } from "@json-render/react-email";
import { defineCatalog } from "@json-render/core";
const catalog = defineCatalog(schema, {
components: standardComponentDefinitions,
});
const spec = {
root: "html-1",
elements: {
"html-1": {
type: "Html",
props: { lang: "en", dir: "ltr" },
children: ["head-1", "body-1"],
},
"head-1": { type: "Head", props: {}, children: [] },
"body-1": {
type: "Body",
props: { style: { backgroundColor: "#f6f9fc" } },
children: ["container-1"],
},
"container-1": {
type: "Container",
props: {
style: { maxWidth: "600px", margin: "0 auto", padding: "20px" },
},
children: ["heading-1", "text-1"],
},
"heading-1": { type: "Heading", props: { text: "Welcome" }, children: [] },
"text-1": {
type: "Text",
props: { text: "Thanks for signing up." },
children: [],
},
},
};
const html = await renderToHtml(spec);
```
### Image (SVG/PNG)
```typescript
import { renderToPng } from "@json-render/image/render";
const spec = {
root: "frame",
elements: {
frame: {
type: "Frame",
props: { width: 1200, height: 630, backgroundColor: "#1a1a2e" },
children: ["heading"],
},
heading: {
type: "Heading",
props: { text: "Hello World", level: "h1", color: "#ffffff" },
children: [],
},
},
};
// Render to PNG (requires @resvg/resvg-js)
const png = await renderToPng(spec, { fonts });
// Or render to SVG string
import { renderToSvg } from "@json-render/image/render";
const svg = await renderToSvg(spec, { fonts });
```
### Three.js (3D)
```tsx
import { defineCatalog } from "@json-render/core";
import { schema, defineRegistry } from "@json-render/react";
import {
threeComponentDefinitions,
threeComponents,
ThreeCanvas,
} from "@json-render/react-three-fiber";
const catalog = defineCatalog(schema, {
components: {
Box: threeComponentDefinitions.Box,
Sphere: threeComponentDefinitions.Sphere,
AmbientLight: threeComponentDefinitions.AmbientLight,
DirectionalLight: threeComponentDefinitions.DirectionalLight,
OrbitControls: threeComponentDefinitions.OrbitControls,
},
actions: {},
});
const { registry } = defineRegistry(catalog, {
components: {
Box: threeComponents.Box,
Sphere: threeComponents.Sphere,
AmbientLight: threeComponents.AmbientLight,
DirectionalLight: threeComponents.DirectionalLight,
OrbitControls: threeComponents.OrbitControls,
},
});
<ThreeCanvas
spec={spec}
registry={registry}
shadows
camera={{ position: [5, 5, 5], fov: 50 }}
style={{ width: "100%", height: "100vh" }}
/>;
```
## Features
### Streaming (SpecStream)
Stream AI responses progressively:
```typescript
import { createSpecStreamCompiler } from "@json-render/core";
const compiler = createSpecStreamCompiler<MySpec>();
// Process chunks as they arrive
const { result, newPatches } = compiler.push(chunk);
setSpec(result); // Update UI with partial result
// Get final result
const finalSpec = compiler.getResult();
```
### AI Prompt Generation
Generate system prompts from your catalog:
```typescript
const systemPrompt = catalog.prompt();
// Includes component descriptions, props schemas, available actions
```
### Conditional Visibility
```json
{
"type": "Alert",
"props": { "message": "Error occurred" },
"visible": [
{ "$state": "/form/hasError" },
{ "$state": "/form/errorDismissed", "not": true }
]
}
```
### Dynamic Props
Any prop value can be data-driven using expressions:
```json
{
"type": "Icon",
"props": {
"name": {
"$cond": { "$state": "/activeTab", "eq": "home" },
"$then": "home",
"$else": "home-outline"
},
"color": {
"$cond": { "$state": "/activeTab", "eq": "home" },
"$then": "#007AFF",
"$else": "#8E8E93"
}
}
}
```
Expression forms:
- **`{ "$state": "/state/key" }`** - reads a value from the state model
- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition and picks a branch
- **`{ "$template": "Hello, ${/user/name}!" }`** - interpolates state values into strings
- **`{ "$computed": "fn", "args": { ... } }`** - calls a registered function with resolved args
### Actions
Components can trigger actions, including the built-in `setState` action:
```json
{
"type": "Pressable",
"props": {
"action": "setState",
"actionParams": { "statePath": "/activeTab", "value": "home" }
},
"children": ["home-icon"]
}
```
The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.
### State Watchers
React to state changes by triggering actions:
```json
{
"type": "Select",
"props": {
"value": { "$bindState": "/form/country" },
"options": ["US", "Canada", "UK"]
},
"watch": {
"/form/country": {
"action": "loadCities",
"params": { "country": { "$state": "/form/country" } }
}
}
}
```
`watch` is a top-level field on elements (sibling of `type`/`props`/`children`). Watchers fire when the watched value changes, not on initial render.
---
## Demo
```bash
git clone https://github.com/vercel-labs/json-render
cd json-render
pnpm install
pnpm dev
```
- http://json-render.localhost:1355 - Docs & Playground
- http://dashboard-demo.json-render.localhost:1355 - Example Dashboard
- http://react-email-demo.json-render.localhost:1355 - React Email Example
- http://remotion-demo.json-render.localhost:1355 - Remotion Video Example
- Chat Example: run `pnpm dev` in `examples/chat`
- Svelte Example: run `pnpm dev` in `examples/svelte` or `examples/svelte-chat`
- Vue Example: run `pnpm dev` in `examples/vue`
- Vite Renderers (React + Vue + Svelte + Solid): run `pnpm dev` in `examples/vite-renderers`
- React Native example: run `npx expo start` in `examples/react-native`
## How It Works
```mermaid
flowchart LR
A[User Prompt] --> B[AI + Catalog]
B --> C[JSON Spec]
C --> D[Renderer]
B -.- E([guardrailed])
C -.- F([predictable])
D -.- G([streamed])
```
1. **Define the guardrails** - what components, actions, and data bindings AI can use
2. **Prompt** - describe what you want in natural language
3. **AI generates JSON** - output is always predictable, constrained to your catalog
4. **Render fast** - stream and render progressively as the model responds
## License
Apache-2.0
================================================
FILE: apps/web/.env.example
================================================
# Vercel AI Gateway
# Automatically authenticated when deployed on Vercel
# For local development, get your key from https://vercel.com/ai-gateway
AI_GATEWAY_API_KEY=
# AI Model Configuration
# Override the default model used for UI generation
# Default: anthropic/claude-haiku-4.5
AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
# Vercel KV (Rate Limiting)
# Automatically populated when you add Vercel KV to your project
KV_REST_API_URL=
KV_REST_API_TOKEN=
# Rate Limiting
# RATE_LIMIT_PER_MINUTE=10
# RATE_LIMIT_PER_DAY=100
================================================
FILE: apps/web/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# env files (can opt-in for commiting if needed)
.env*
!.env.example
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
.env*.local
================================================
FILE: apps/web/CHANGELOG.md
================================================
# web
## 0.1.9
### Patch Changes
- Updated dependencies [43b7515]
- @json-render/core@0.14.1
- @json-render/codegen@0.14.1
- @json-render/react@0.14.1
- @json-render/yaml@0.14.1
## 0.1.8
### Patch Changes
- Updated dependencies [a8afd8b]
- @json-render/core@0.14.0
- @json-render/yaml@0.14.0
- @json-render/codegen@0.14.0
- @json-render/react@0.14.0
## 0.1.7
### Patch Changes
- Updated dependencies [5b32de8]
- @json-render/core@0.13.0
- @json-render/codegen@0.13.0
- @json-render/react@0.13.0
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/codegen@0.12.1
- @json-render/react@0.12.1
## 0.1.5
### Patch Changes
- Updated dependencies [63c339b]
- @json-render/core@0.12.0
- @json-render/codegen@0.12.0
- @json-render/react@0.12.0
## 0.1.4
### Patch Changes
- Updated dependencies [3f1e71e]
- @json-render/core@0.11.0
- @json-render/codegen@0.11.0
- @json-render/react@0.11.0
## 0.1.3
### Patch Changes
- Updated dependencies [9cef4e9]
- @json-render/core@0.10.0
- @json-render/react@0.10.0
- @json-render/codegen@0.10.0
## 0.1.2
### Patch Changes
- Updated dependencies [b103676]
- @json-render/react@0.9.1
- @json-render/core@0.9.1
- @json-render/codegen@0.9.1
## 0.1.1
### Patch Changes
- Updated dependencies [1d755c1]
- @json-render/core@0.9.0
- @json-render/react@0.9.0
- @json-render/codegen@0.9.0
================================================
FILE: apps/web/README.md
================================================
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://json-render.localhost:1355](http://json-render.localhost:1355) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
================================================
FILE: apps/web/app/(main)/docs/a2ui/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/a2ui")
# A2UI Integration
Use `@json-render/core` to support [A2UI](https://a2ui.org) natively.
<div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-4 mb-8">
<p className="text-sm text-amber-700 dark:text-amber-300">
<strong>Concept:</strong> This page demonstrates how json-render can support A2UI. The examples are illustrative and may require adaptation for production use.
</p>
</div>
## Native A2UI Support
`@json-render/core` is schema-agnostic. Define a catalog that matches A2UI's format and build a renderer that understands it - no conversion layer needed.
## Example A2UI Message
A2UI uses an adjacency list model - a flat list of components with ID references. This makes it easy to patch individual components:
```json
{
"surfaceUpdate": {
"surfaceId": "main",
"components": [
{
"id": "header",
"component": {
"Text": {
"text": {"literalString": "Book Your Table"},
"usageHint": "h1"
}
}
},
{
"id": "date-picker",
"component": {
"DateTimeInput": {
"label": {"literalString": "Select Date"},
"value": {"path": "/reservation/date"},
"enableDate": true
}
}
},
{
"id": "submit-btn",
"component": {
"Button": {
"child": "submit-text",
"action": {"name": "confirm_booking"}
}
}
},
{
"id": "submit-text",
"component": {
"Text": {"text": {"literalString": "Confirm Reservation"}}
}
}
]
}
}
```
## Define the A2UI Catalog
```typescript
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
import { z } from 'zod';
// A2UI BoundValue schema
const BoundString = z.object({
literalString: z.string().optional(),
path: z.string().optional(),
}).refine(d => d.literalString || d.path);
// A2UI children schema
const Children = z.object({
explicitList: z.array(z.string()).optional(),
template: z.object({
dataBinding: z.string(),
componentId: z.string(),
}).optional(),
}).refine(d => d.explicitList || d.template);
export const a2uiCatalog = defineCatalog(schema, {
components: {
Text: {
description: 'Displays text content',
props: z.object({
text: BoundString,
usageHint: z.enum(['h1', 'h2', 'h3', 'body', 'caption']).optional(),
}),
},
Button: {
description: 'Interactive button',
props: z.object({
child: z.string(),
action: z.object({
name: z.string(),
context: z.array(z.object({
key: z.string(),
value: BoundString,
})).optional(),
}).optional(),
}),
},
DateTimeInput: {
description: 'Date/time picker',
props: z.object({
label: BoundString.optional(),
value: BoundString.optional(),
enableDate: z.boolean().optional(),
enableTime: z.boolean().optional(),
}),
},
Column: {
description: 'Vertical layout',
props: z.object({
children: Children,
}),
},
Row: {
description: 'Horizontal layout',
props: z.object({
children: Children,
}),
},
// Add more A2UI standard components...
},
});
```
## Define the A2UI Schema
Define the schema for A2UI message types:
```typescript
import { z } from 'zod';
// Component instance in the adjacency list
const A2UIComponent = z.object({
id: z.string(),
component: z.record(z.record(z.unknown())),
});
// Surface update message
const SurfaceUpdate = z.object({
surfaceId: z.string().optional(),
components: z.array(A2UIComponent),
});
// State model update message
const StateModelUpdate = z.object({
surfaceId: z.string().optional(),
path: z.string().optional(),
contents: z.array(z.object({
key: z.string(),
valueString: z.string().optional(),
valueNumber: z.number().optional(),
valueBoolean: z.boolean().optional(),
valueMap: z.array(z.unknown()).optional(),
})),
});
// Begin rendering message
const BeginRendering = z.object({
surfaceId: z.string().optional(),
root: z.string(),
catalogId: z.string().optional(),
});
// Complete A2UI message schema
export const A2UIMessage = z.object({
surfaceUpdate: SurfaceUpdate.optional(),
dataModelUpdate: StateModelUpdate.optional(),
beginRendering: BeginRendering.optional(),
deleteSurface: z.object({ surfaceId: z.string() }).optional(),
});
```
## Build an A2UI Renderer
Create a renderer that processes the A2UI adjacency list format:
```tsx
import { a2uiCatalog } from './catalog';
// Component registry
const components = {
Text: ({ text, usageHint }) => {
const Tag = usageHint?.startsWith('h') ? usageHint : 'p';
return <Tag>{text}</Tag>;
},
Button: ({ children, action, onAction }) => (
<button onClick={() => onAction?.(action)}>{children}</button>
),
DateTimeInput: ({ label, value, onChange }) => (
<label>
{label}
<input type="date" value={value} onChange={e => onChange?.(e.target.value)} />
</label>
),
Column: ({ children }) => <div className="flex flex-col gap-2">{children}</div>,
Row: ({ children }) => <div className="flex gap-2">{children}</div>,
};
// Render A2UI surface
export function renderA2UI(
componentMap: Map<string, any>,
dataModel: Record<string, any>,
rootId: string,
onAction?: (action: any) => void
) {
function resolveBoundValue(bound: any) {
if (!bound) return undefined;
if (bound.literalString) return bound.literalString;
if (bound.path) {
const parts = bound.path.replace(/^\//, '').split('/');
let value = dataModel;
for (const p of parts) value = value?.[p];
return value;
}
}
function render(id: string): React.ReactNode {
const comp = componentMap.get(id);
if (!comp) return null;
const [type, props] = Object.entries(comp.component)[0];
const Component = components[type];
if (!Component) return null;
// Resolve props
const resolved: any = {};
for (const [key, val] of Object.entries(props as any)) {
if (key === 'child') {
resolved.children = render(val as string);
} else if (key === 'children' && val?.explicitList) {
resolved.children = val.explicitList.map(render);
} else if (val && typeof val === 'object' && ('literalString' in val || 'path' in val)) {
resolved[key] = resolveBoundValue(val);
} else {
resolved[key] = val;
}
}
return <Component key={id} {...resolved} onAction={onAction} />;
}
return render(rootId);
}
```
## Usage
```tsx
const [components] = useState(() => new Map());
const [dataModel, setDataModel] = useState({});
const [rootId, setRootId] = useState<string | null>(null);
// Process A2UI messages
function handleMessage(msg: any) {
if (msg.surfaceUpdate) {
for (const comp of msg.surfaceUpdate.components) {
components.set(comp.id, comp);
}
}
if (msg.dataModelUpdate) {
setDataModel(prev => ({ ...prev, ...msg.dataModelUpdate.contents }));
}
if (msg.beginRendering) {
setRootId(msg.beginRendering.root);
}
}
// Render
{rootId && renderA2UI(components, dataModel, rootId, handleAction)}
```
## Next
Learn about [Adaptive Cards integration](/docs/adaptive-cards) for another UI protocol.
================================================
FILE: apps/web/app/(main)/docs/adaptive-cards/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/adaptive-cards")
# Adaptive Cards Integration
Use json-render to render [Microsoft Adaptive Cards](https://adaptivecards.io) natively.
<div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-4 mb-8">
<p className="text-sm text-amber-700 dark:text-amber-300">
<strong>Concept:</strong> This page demonstrates how json-render can support Adaptive Cards. The examples are illustrative and may require adaptation for production use.
</p>
</div>
## Adaptive Cards Overview
Adaptive Cards is a JSON-based format for platform-agnostic UI snippets. Cards have a `body` array of elements and an optional `actions` array for interactive buttons.
### Example Adaptive Card
```json
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Hello, Adaptive Cards!",
"size": "large",
"weight": "bolder"
},
{
"type": "Image",
"url": "https://example.com/image.png",
"altText": "Example image"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "This is inside a container",
"wrap": true
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{ "type": "TextBlock", "text": "Column 1" }
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{ "type": "TextBlock", "text": "Column 2" }
]
}
]
},
{
"type": "Input.Text",
"id": "userInput",
"placeholder": "Enter your name",
"label": "Name"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
},
{
"type": "Action.OpenUrl",
"title": "Learn More",
"url": "https://adaptivecards.io"
}
]
}
```
## Creating an Adaptive Cards Catalog
Define a catalog matching the Adaptive Cards element types:
```typescript
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
import { z } from 'zod';
// Common Adaptive Cards properties
const Spacing = z.enum(['none', 'small', 'default', 'medium', 'large', 'extraLarge', 'padding']);
const HorizontalAlignment = z.enum(['left', 'center', 'right']);
const VerticalAlignment = z.enum(['top', 'center', 'bottom']);
const FontSize = z.enum(['small', 'default', 'medium', 'large', 'extraLarge']);
const FontWeight = z.enum(['lighter', 'default', 'bolder']);
const ImageSize = z.enum(['auto', 'stretch', 'small', 'medium', 'large']);
const ImageStyle = z.enum(['default', 'person']);
// Base element properties shared by most elements
const BaseElement = {
id: z.string().optional(),
isVisible: z.boolean().optional(),
separator: z.boolean().optional(),
spacing: Spacing.optional(),
};
export const adaptiveCardsCatalog = defineCatalog(schema, {
components: {
// Root card
AdaptiveCard: {
description: 'Root Adaptive Card container',
props: z.object({
version: z.string(),
body: z.array(z.unknown()).optional(),
actions: z.array(z.unknown()).optional(),
fallbackText: z.string().optional(),
minHeight: z.string().optional(),
rtl: z.boolean().optional(),
verticalContentAlignment: VerticalAlignment.optional(),
}),
},
// Elements
TextBlock: {
description: 'Displays text with formatting options',
props: z.object({
...BaseElement,
text: z.string(),
color: z.enum(['default', 'dark', 'light', 'accent', 'good', 'warning', 'attention']).optional(),
fontType: z.enum(['default', 'monospace']).optional(),
horizontalAlignment: HorizontalAlignment.optional(),
isSubtle: z.boolean().optional(),
maxLines: z.number().optional(),
size: FontSize.optional(),
weight: FontWeight.optional(),
wrap: z.boolean().optional(),
}),
},
Image: {
description: 'Displays an image',
props: z.object({
...BaseElement,
url: z.string(),
altText: z.string().optional(),
backgroundColor: z.string().optional(),
height: z.string().optional(),
width: z.string().optional(),
horizontalAlignment: HorizontalAlignment.optional(),
size: ImageSize.optional(),
style: ImageStyle.optional(),
}),
},
Container: {
description: 'Groups elements together',
props: z.object({
...BaseElement,
items: z.array(z.unknown()),
style: z.enum(['default', 'emphasis', 'good', 'attention', 'warning', 'accent']).optional(),
verticalContentAlignment: VerticalAlignment.optional(),
bleed: z.boolean().optional(),
minHeight: z.string().optional(),
}),
},
ColumnSet: {
description: 'Arranges columns horizontally',
props: z.object({
...BaseElement,
columns: z.array(z.unknown()),
horizontalAlignment: HorizontalAlignment.optional(),
minHeight: z.string().optional(),
}),
},
Column: {
description: 'A column within a ColumnSet',
props: z.object({
...BaseElement,
items: z.array(z.unknown()).optional(),
width: z.union([z.string(), z.number()]).optional(),
style: z.enum(['default', 'emphasis', 'good', 'attention', 'warning', 'accent']).optional(),
verticalContentAlignment: VerticalAlignment.optional(),
}),
},
FactSet: {
description: 'Displays a series of facts as key/value pairs',
props: z.object({
...BaseElement,
facts: z.array(z.object({
title: z.string(),
value: z.string(),
})),
}),
},
// Inputs
'Input.Text': {
description: 'Text input field',
props: z.object({
...BaseElement,
id: z.string(),
isMultiline: z.boolean().optional(),
maxLength: z.number().optional(),
placeholder: z.string().optional(),
label: z.string().optional(),
value: z.string().optional(),
style: z.enum(['text', 'tel', 'url', 'email', 'password']).optional(),
isRequired: z.boolean().optional(),
errorMessage: z.string().optional(),
}),
},
'Input.Number': {
description: 'Number input field',
props: z.object({
...BaseElement,
id: z.string(),
max: z.number().optional(),
min: z.number().optional(),
placeholder: z.string().optional(),
label: z.string().optional(),
value: z.number().optional(),
isRequired: z.boolean().optional(),
errorMessage: z.string().optional(),
}),
},
'Input.Toggle': {
description: 'Toggle/checkbox input',
props: z.object({
...BaseElement,
id: z.string(),
title: z.string(),
label: z.string().optional(),
value: z.string().optional(),
valueOff: z.string().optional(),
valueOn: z.string().optional(),
isRequired: z.boolean().optional(),
}),
},
'Input.ChoiceSet': {
description: 'Dropdown or radio/checkbox group',
props: z.object({
...BaseElement,
id: z.string(),
choices: z.array(z.object({
title: z.string(),
value: z.string(),
})),
isMultiSelect: z.boolean().optional(),
style: z.enum(['compact', 'expanded']).optional(),
label: z.string().optional(),
value: z.string().optional(),
placeholder: z.string().optional(),
isRequired: z.boolean().optional(),
}),
},
// Actions
'Action.OpenUrl': {
description: 'Opens a URL',
props: z.object({
title: z.string().optional(),
url: z.string(),
iconUrl: z.string().optional(),
}),
},
'Action.Submit': {
description: 'Submits input data',
props: z.object({
title: z.string().optional(),
data: z.unknown().optional(),
iconUrl: z.string().optional(),
}),
},
'Action.ShowCard': {
description: 'Shows a card inline',
props: z.object({
title: z.string().optional(),
card: z.unknown(),
iconUrl: z.string().optional(),
}),
},
'Action.Execute': {
description: 'Universal action for bots',
props: z.object({
title: z.string().optional(),
verb: z.string().optional(),
data: z.unknown().optional(),
iconUrl: z.string().optional(),
}),
},
},
});
```
## Building an Adaptive Cards Renderer
Create a renderer that processes Adaptive Cards JSON. See the [A2UI integration](/docs/a2ui) page for a similar pattern. The key is mapping each Adaptive Card element type to a React component, resolving nested `items` and `columns` arrays recursively.
## Usage Example
Render an Adaptive Card and handle actions:
```tsx
'use client';
import { AdaptiveCardRenderer } from './adaptive-card-renderer';
const card = {
type: 'AdaptiveCard' as const,
version: '1.5',
body: [
{
type: 'TextBlock',
text: 'Contact Form',
size: 'large',
weight: 'bolder',
},
{
type: 'Input.Text',
id: 'name',
label: 'Your Name',
placeholder: 'Enter your name',
},
{
type: 'Input.Text',
id: 'message',
label: 'Message',
placeholder: 'Enter your message',
isMultiline: true,
},
],
actions: [
{
type: 'Action.Submit',
title: 'Send',
data: { action: 'submitForm' },
},
],
};
export function ContactCard() {
const handleAction = (action: any, inputData: Record<string, unknown>) => {
console.log('Action:', action);
console.log('Input data:', inputData);
// Send to your backend
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action, data: inputData }),
});
};
return <AdaptiveCardRenderer card={card} onAction={handleAction} />;
}
```
## Handling Action.Execute for Bots
For bot scenarios, handle `Action.Execute` with the verb and data:
```typescript
interface ActionExecutePayload {
action: {
type: 'Action.Execute';
verb: string;
data?: unknown;
};
inputs: Record<string, unknown>;
}
async function handleBotAction(payload: ActionExecutePayload) {
const response = await fetch('/api/bot/action', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
verb: payload.action.verb,
data: payload.action.data,
inputs: payload.inputs,
}),
});
// Bot may return a new card to render
const result = await response.json();
if (result.card) {
return result.card; // New AdaptiveCard to render
}
}
```
## Next
Learn about [A2UI integration](/docs/a2ui) for another agent-driven UI protocol.
================================================
FILE: apps/web/app/(main)/docs/ag-ui/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/ag-ui")
# AG-UI Integration
Use json-render to support [AG-UI](https://docs.copilotkit.ai/ag-ui) (Agent User Interaction Protocol) from CopilotKit.
<div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-4 mb-8">
<p className="text-sm text-amber-700 dark:text-amber-300">
<strong>Concept:</strong> This page demonstrates how json-render can support AG-UI. The examples are illustrative and may require adaptation for production use.
</p>
</div>
## What is AG-UI?
AG-UI is an open protocol for connecting AI agents to user interfaces. It provides a standardized way for agents to render UI components, handle user input, and manage state. The protocol uses events streamed over HTTP to update the UI in real-time.
## AG-UI Event Types
AG-UI defines several event types for agent-UI communication:
- `TEXT_MESSAGE_START` / `TEXT_MESSAGE_CONTENT` / `TEXT_MESSAGE_END` — Streaming text messages
- `TOOL_CALL_START` / `TOOL_CALL_ARGS` / `TOOL_CALL_END` — Tool/function calls
- `STATE_SNAPSHOT` / `STATE_DELTA` — State updates
- `CUSTOM` — Custom events for UI rendering
### Example AG-UI Event Stream
```json
{"type": "RUN_STARTED", "threadId": "thread-123", "runId": "run-456"}
{"type": "TEXT_MESSAGE_START", "messageId": "msg-1", "role": "assistant"}
{"type": "TEXT_MESSAGE_CONTENT", "messageId": "msg-1", "delta": "Here's a dashboard for you:"}
{"type": "TEXT_MESSAGE_END", "messageId": "msg-1"}
{"type": "TOOL_CALL_START", "toolCallId": "tc-1", "toolCallName": "render_ui"}
{"type": "TOOL_CALL_ARGS", "toolCallId": "tc-1", "delta": "{\"component\": \"Dashboard\", \"props\": {\"title\": \"Sales\"}}"}
{"type": "TOOL_CALL_END", "toolCallId": "tc-1"}
{"type": "RUN_FINISHED"}
```
## Define the AG-UI Schema
Define schemas for AG-UI event types:
```typescript
import { z } from 'zod';
// Base event schema
const BaseEvent = z.object({
type: z.string(),
timestamp: z.number().optional(),
});
// Text message events
const TextMessageStart = BaseEvent.extend({
type: z.literal('TEXT_MESSAGE_START'),
messageId: z.string(),
role: z.enum(['user', 'assistant']),
});
const TextMessageContent = BaseEvent.extend({
type: z.literal('TEXT_MESSAGE_CONTENT'),
messageId: z.string(),
delta: z.string(),
});
const TextMessageEnd = BaseEvent.extend({
type: z.literal('TEXT_MESSAGE_END'),
messageId: z.string(),
});
// Tool call events
const ToolCallStart = BaseEvent.extend({
type: z.literal('TOOL_CALL_START'),
toolCallId: z.string(),
toolCallName: z.string(),
parentMessageId: z.string().optional(),
});
const ToolCallArgs = BaseEvent.extend({
type: z.literal('TOOL_CALL_ARGS'),
toolCallId: z.string(),
delta: z.string(),
});
const ToolCallEnd = BaseEvent.extend({
type: z.literal('TOOL_CALL_END'),
toolCallId: z.string(),
});
// State events
const StateSnapshot = BaseEvent.extend({
type: z.literal('STATE_SNAPSHOT'),
snapshot: z.record(z.unknown()),
});
const StateDelta = BaseEvent.extend({
type: z.literal('STATE_DELTA'),
delta: z.array(z.object({
op: z.enum(['add', 'remove', 'replace']),
path: z.string(),
value: z.unknown().optional(),
})),
});
// Custom event for UI components
const CustomEvent = BaseEvent.extend({
type: z.literal('CUSTOM'),
name: z.string(),
value: z.unknown(),
});
// Run lifecycle events
const RunStarted = BaseEvent.extend({
type: z.literal('RUN_STARTED'),
threadId: z.string(),
runId: z.string(),
});
const RunFinished = BaseEvent.extend({
type: z.literal('RUN_FINISHED'),
});
const RunError = BaseEvent.extend({
type: z.literal('RUN_ERROR'),
message: z.string(),
code: z.string().optional(),
});
// Union of all events
export const AGUIEvent = z.discriminatedUnion('type', [
TextMessageStart,
TextMessageContent,
TextMessageEnd,
ToolCallStart,
ToolCallArgs,
ToolCallEnd,
StateSnapshot,
StateDelta,
CustomEvent,
RunStarted,
RunFinished,
RunError,
]);
export type AGUIEvent = z.infer<typeof AGUIEvent>;
```
## Define the AG-UI Catalog
Create a catalog for UI components that agents can render:
```typescript
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
import { z } from 'zod';
export const aguiCatalog = defineCatalog(schema, {
components: {
Container: {
description: 'A container for grouping elements',
props: z.object({
direction: z.enum(['row', 'column']).optional(),
gap: z.enum(['none', 'sm', 'md', 'lg']).optional(),
padding: z.enum(['none', 'sm', 'md', 'lg']).optional(),
}),
},
Card: {
description: 'A card with optional title',
props: z.object({
title: z.string().optional(),
description: z.string().optional(),
}),
},
Text: {
description: 'Text content',
props: z.object({
content: z.string(),
variant: z.enum(['body', 'heading', 'caption', 'code']).optional(),
}),
},
Metric: {
description: 'Displays a metric value',
props: z.object({
label: z.string(),
value: z.union([z.string(), z.number()]),
change: z.number().optional(),
format: z.enum(['number', 'currency', 'percent']).optional(),
}),
},
Button: {
description: 'Interactive button',
props: z.object({
label: z.string(),
variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).optional(),
disabled: z.boolean().optional(),
}),
},
Alert: {
description: 'Alert message',
props: z.object({
message: z.string(),
type: z.enum(['info', 'success', 'warning', 'error']).optional(),
}),
},
// Add more components...
},
actions: {
submit: {
description: 'Submit form data',
params: z.object({ formId: z.string() }),
},
navigate: {
description: 'Navigate to a URL',
params: z.object({ url: z.string() }),
},
callback: {
description: 'Trigger a callback to the agent',
params: z.object({
name: z.string(),
data: z.record(z.unknown()).optional(),
}),
},
},
});
```
## Build an AG-UI Event Processor
Process AG-UI events and render UI components:
```tsx
'use client';
import React, { useState, useCallback } from 'react';
import { AGUIEvent } from './schema';
interface AGUIState {
messages: Array<{
id: string;
role: 'user' | 'assistant';
content: string;
}>;
toolCalls: Map<string, {
name: string;
args: string;
result?: unknown;
}>;
state: Record<string, unknown>;
isRunning: boolean;
}
export function useAGUI() {
const [aguiState, setAGUIState] = useState<AGUIState>({
messages: [],
toolCalls: new Map(),
state: {},
isRunning: false,
});
const processEvent = useCallback((event: AGUIEvent) => {
switch (event.type) {
case 'RUN_STARTED':
setAGUIState(prev => ({ ...prev, isRunning: true }));
break;
case 'RUN_FINISHED':
setAGUIState(prev => ({ ...prev, isRunning: false }));
break;
case 'TEXT_MESSAGE_START':
setAGUIState(prev => ({
...prev,
messages: [...prev.messages, {
id: event.messageId,
role: event.role,
content: '',
}],
}));
break;
case 'TEXT_MESSAGE_CONTENT':
setAGUIState(prev => ({
...prev,
messages: prev.messages.map(msg =>
msg.id === event.messageId
? { ...msg, content: msg.content + event.delta }
: msg
),
}));
break;
case 'TOOL_CALL_START':
setAGUIState(prev => {
const toolCalls = new Map(prev.toolCalls);
toolCalls.set(event.toolCallId, { name: event.toolCallName, args: '' });
return { ...prev, toolCalls };
});
break;
case 'TOOL_CALL_ARGS':
setAGUIState(prev => {
const toolCalls = new Map(prev.toolCalls);
const tc = toolCalls.get(event.toolCallId);
if (tc) {
toolCalls.set(event.toolCallId, { ...tc, args: tc.args + event.delta });
}
return { ...prev, toolCalls };
});
break;
case 'STATE_SNAPSHOT':
setAGUIState(prev => ({ ...prev, state: event.snapshot }));
break;
}
}, []);
return { state: aguiState, processEvent };
}
```
## Usage Example
```tsx
'use client';
import { useAGUI } from './use-agui';
import { renderToolCallUI } from './renderer';
export function AGUIChat() {
const { state, processEvent } = useAGUI();
async function startRun(prompt: string) {
const response = await fetch('/api/agent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
});
const reader = response.body?.getReader();
const decoder = new TextDecoder();
while (reader) {
const { done, value } = await reader.read();
if (done) break;
const lines = decoder.decode(value).split('\n').filter(Boolean);
for (const line of lines) {
const event = JSON.parse(line);
processEvent(event);
}
}
}
return (
<div className="space-y-4">
{state.messages.map(msg => (
<div key={msg.id} className={`p-3 rounded ${
msg.role === 'assistant' ? 'bg-muted' : 'bg-primary/10'
}`}>
{msg.content}
</div>
))}
{Array.from(state.toolCalls.values()).map((tc, i) => (
<div key={i}>{renderToolCallUI(tc)}</div>
))}
<form onSubmit={(e) => {
e.preventDefault();
const input = e.currentTarget.querySelector('input');
if (input?.value) {
startRun(input.value);
input.value = '';
}
}}>
<input
type="text"
placeholder="Ask the agent..."
className="w-full px-4 py-2 border rounded"
disabled={state.isRunning}
/>
</form>
</div>
);
}
```
## Next
Learn about [OpenAPI integration](/docs/openapi) for rendering forms from API schemas.
================================================
FILE: apps/web/app/(main)/docs/ai-sdk/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/ai-sdk")
# AI SDK Integration
Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Standalone** (standalone UI) and **Inline** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
## Installation
```bash
npm install ai @ai-sdk/react
```
## Standalone Mode
In standalone mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
### API Route
```typescript
// app/api/generate/route.ts
import { streamText } from "ai";
import { catalog } from "@/lib/catalog";
export async function POST(req: Request) {
const { prompt, currentTree } = await req.json();
const systemPrompt = catalog.prompt();
// Optionally include current UI state for context
const contextPrompt = currentTree
? `\n\nCurrent UI state:\n${JSON.stringify(currentTree, null, 2)}`
: "";
const result = streamText({
model: yourModel,
system: systemPrompt + contextPrompt,
prompt,
});
return result.toTextStreamResponse();
}
```
### Client
Use `useUIStream` on the client to compile the JSONL stream into a spec:
```tsx
"use client";
import { useUIStream, Renderer } from "@json-render/react";
function GenerativeUI() {
const { spec, isStreaming, error, send } = useUIStream({
api: "/api/generate",
});
return (
<div>
<button
onClick={() => send("Create a dashboard with metrics")}
disabled={isStreaming}
>
{isStreaming ? "Generating..." : "Generate"}
</button>
{error && <p className="text-red-500">{error.message}</p>}
<Renderer spec={spec} registry={registry} loading={isStreaming} />
</div>
);
}
```
## Inline Mode
In inline mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
### API Route
Use `pipeJsonRender` to separate text from JSONL patches in the stream. Patches are emitted as data parts that the client can pick up.
```typescript
// app/api/chat/route.ts
import { streamText } from "ai";
import { pipeJsonRender } from "@json-render/core";
import {
createUIMessageStream,
createUIMessageStreamResponse,
} from "ai";
import { catalog } from "@/lib/catalog";
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: yourModel,
system: catalog.prompt({ mode: "inline" }),
messages,
});
const stream = createUIMessageStream({
execute: async ({ writer }) => {
writer.merge(pipeJsonRender(result.toUIMessageStream()));
},
});
return createUIMessageStreamResponse({ stream });
}
```
### Client
Use `useChat` from the AI SDK and `useJsonRenderMessage` from json-render to extract the spec from each message:
```tsx
"use client";
import { useChat } from "@ai-sdk/react";
import { useJsonRenderMessage, Renderer } from "@json-render/react";
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: "/api/chat",
});
return (
<div>
<div>
{messages.map((msg) => (
<ChatMessage key={msg.id} message={msg} />
))}
</div>
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={handleInputChange}
placeholder="Ask something..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}
function ChatMessage({ message }: { message: { parts: Array<{ type: string; text?: string; data?: unknown }> } }) {
const { spec, text, hasSpec } = useJsonRenderMessage(message.parts);
return (
<div>
{text && <p>{text}</p>}
{hasSpec && spec && (
<Renderer spec={spec} registry={registry} />
)}
</div>
);
}
```
## Prompt Engineering
The `catalog.prompt()` method creates an optimized system prompt that:
- Lists all available components and their props
- Describes available actions
- Specifies the expected output format (JSONL-only or text + JSONL depending on mode)
- Includes examples for better generation
### Custom Rules
Pass custom rules to tailor AI behavior:
```typescript
const systemPrompt = catalog.prompt({
customRules: [
"Always use Card components for grouping related content",
"Prefer horizontal layouts (Row) for metrics",
"Use consistent spacing with padding=\"md\"",
],
});
```
### Inline Mode Prompt
```typescript
const inlinePrompt = catalog.prompt({ mode: "inline" });
```
In inline mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
## Which Mode?
<div className="my-6 overflow-x-auto">
<table className="mdx-table w-full text-sm border-collapse">
<thead>
<tr>
<th></th>
<th>Standalone</th>
<th>Inline</th>
</tr>
</thead>
<tbody>
<tr>
<td>Output</td>
<td>JSONL only</td>
<td>Text + JSONL</td>
</tr>
<tr>
<td>Text-only replies</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>System prompt</td>
<td><code>catalog.prompt()</code></td>
<td><code>{"catalog.prompt({ mode: \"inline\" })"}</code></td>
</tr>
<tr>
<td>Stream utility</td>
<td><code>useUIStream</code></td>
<td><code>pipeJsonRender</code> + <code>useJsonRenderMessage</code></td>
</tr>
<tr>
<td>Use case</td>
<td>Playgrounds, builders</td>
<td>Chatbots, copilots</td>
</tr>
</tbody>
</table>
</div>
Learn more in the [Generation Modes](/docs/generation-modes) guide.
## Next
- Learn about [progressive streaming](/docs/streaming)
- See the [chat example](https://github.com/vercel-labs/json-render/tree/main/examples/chat) for a complete implementation
================================================
FILE: apps/web/app/(main)/docs/api/codegen/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/codegen")
# @json-render/codegen
Utilities for generating code from UI trees.
## Tree Traversal
### traverseSpec
Walk the UI spec depth-first.
```typescript
function traverseSpec(
spec: Spec,
visitor: TreeVisitor,
startKey?: string
): void
interface TreeVisitor {
(element: UIElement, key: string, depth: number, parent: UIElement | null): void;
}
```
### collectUsedComponents
Get all unique component types used in a spec.
```typescript
function collectUsedComponents(spec: Spec): Set<string>
// Example
const components = collectUsedComponents(spec);
// Set { 'Card', 'Metric', 'Chart' }
```
### collectStatePaths
Get all state paths referenced in props (statePath, bindPath, etc.).
```typescript
function collectStatePaths(spec: Spec): Set<string>
// Example
const paths = collectStatePaths(spec);
// Set { 'analytics/revenue', 'analytics/customers' }
```
### collectActions
Get all action names used in the spec.
```typescript
function collectActions(spec: Spec): Set<string>
// Example
const actions = collectActions(spec);
// Set { 'submit_form', 'refresh_data' }
```
## Serialization
### serializePropValue
Serialize a single value to a code string.
```typescript
function serializePropValue(
value: unknown,
options?: SerializeOptions
): { value: string; needsBraces: boolean }
// Examples
serializePropValue("hello")
// { value: '"hello"', needsBraces: false }
serializePropValue(42)
// { value: '42', needsBraces: true }
serializePropValue({ $state: '/user/name' })
// { value: '{ $state: "/user/name" }', needsBraces: true }
```
### serializeProps
Serialize a props object to a JSX attributes string.
```typescript
function serializeProps(
props: Record<string, unknown>,
options?: SerializeOptions
): string
// Example
serializeProps({ title: 'Dashboard', columns: 3, disabled: true })
// 'title="Dashboard" columns={3} disabled'
```
### escapeString
Escape a string for use in code.
```typescript
function escapeString(
str: string,
quotes?: 'single' | 'double'
): string
```
## Types
### GeneratedFile
```typescript
interface GeneratedFile {
/** File path relative to project root */
path: string;
/** File contents */
content: string;
}
```
### CodeGenerator
```typescript
interface CodeGenerator {
/** Generate files from a UI spec */
generate(spec: Spec): GeneratedFile[];
}
```
### SerializeOptions
```typescript
interface SerializeOptions {
/** Quote style for strings */
quotes?: 'single' | 'double';
/** Indent for objects/arrays */
indent?: number;
}
```
================================================
FILE: apps/web/app/(main)/docs/api/core/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/core")
# @json-render/core
Core types, schemas, and utilities.
## defineCatalog
Creates a type-safe catalog definition with schema validation.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
function defineCatalog<T extends ZodType>(
s: T,
config: CatalogConfig
): Catalog
// Use the React schema for standard UI specs
const catalog = defineCatalog(schema, {
components: {...},
actions: {...},
});
```
### CatalogConfig
```typescript
interface CatalogConfig {
components: Record<string, ComponentDefinition>;
actions?: Record<string, ActionDefinition>;
functions?: Record<string, FunctionDefinition>;
}
interface ComponentDefinition {
props: ZodObject; // Use .nullable() for optional props
slots?: string[]; // Named slots (e.g., ["default"])
description?: string; // Help AI understand usage
}
interface ActionDefinition {
params?: ZodObject;
description?: string;
}
interface FunctionDefinition {
description?: string;
}
```
### Catalog Instance
The returned catalog provides methods for AI prompt generation, validation, and schema export:
```typescript
interface Catalog {
// Data
readonly data: CatalogConfig; // The catalog configuration
readonly componentNames: string[]; // List of component names
readonly actionNames: string[]; // List of action names
// AI Prompt Generation
prompt(options?: PromptOptions): string;
// Validation
validate(spec: unknown): SpecValidationResult;
zodSchema(): z.ZodType; // Get the Zod schema for specs
// Export
jsonSchema(): object; // Export as JSON Schema
}
interface PromptOptions {
system?: string; // Custom system message intro
customRules?: string[]; // Additional rules to append
mode?: "standalone" | "inline" | "generate" | "chat"; // Output mode (default: "standalone")
editModes?: EditMode[]; // Edit modes to document in prompt (default: ["patch"])
}
interface SpecValidationResult<T> {
success: boolean;
data?: T; // Validated spec (if success)
error?: z.ZodError; // Validation errors (if failed)
}
```
### Catalog Methods
```typescript
// Generate AI system prompt
const systemPrompt = catalog.prompt({
customRules: ["Always use Card as root element"],
});
// Validate a spec from AI
const result = catalog.validate(aiOutput);
if (result.success) {
render(result.data);
} else {
console.error(result.error);
}
// Get Zod schema for custom validation
const schema = catalog.zodSchema();
const parsed = schema.safeParse(aiOutput);
// Export as JSON Schema (for structured outputs)
const jsonSchema = catalog.jsonSchema();
```
## Schema System
json-render uses a flexible schema system that defines both the AI output format (spec) and what catalogs must provide. Each renderer package provides its own schema (e.g., @json-render/react exports `schema`).
### schema
The schema for flat UI element trees. This is exported from @json-render/react.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/react/schema';
// schema defines:
// - Spec shape: { root: string, elements: Record<string, UIElement> }
// - Catalog shape: { components: {...}, actions: {...} }
const catalog = defineCatalog(schema, {
components: {
Card: {
props: z.object({ title: z.string() }),
slots: ["default"],
description: "Container card",
},
},
actions: {
submit: {
params: z.object({ formId: z.string() }),
description: "Submit a form",
},
},
});
```
### SchemaOptions
When creating schemas with `defineSchema`, you can pass options:
```typescript
interface SchemaOptions {
promptTemplate?: PromptTemplate; // Custom AI prompt generator
defaultRules?: string[]; // Default rules injected before custom rules in prompts
builtInActions?: BuiltInAction[]; // Actions always available at runtime, auto-injected into prompts
}
interface BuiltInAction {
name: string; // Action name (e.g. "setState")
description: string; // Human-readable description for the LLM
}
```
Built-in actions are injected into prompts as `[built-in]` and are handled by the runtime (e.g. `ActionProvider`) without requiring handlers in `defineRegistry`. The React schema declares `setState`, `pushState`, and `removeState` as built-in.
### defineSchema
Create custom schemas for different output formats (e.g., page-based, block-based).
```typescript
import { defineSchema } from '@json-render/core';
const mySchema = defineSchema((s) => ({
// What the AI outputs (spec)
spec: s.object({
title: s.string(),
blocks: s.array(s.object({
type: s.ref("catalog.blocks"),
content: s.any(),
})),
}),
// What the catalog must provide
catalog: s.object({
blocks: s.map({
props: s.zod(),
description: s.string(),
}),
}),
}));
```
### Schema Builder API
The schema builder provides these methods:
```typescript
// Primitive types
s.string() // String value
s.number() // Number value
s.boolean() // Boolean value
s.any() // Any value
// Compound types
s.array(item) // Array of items
s.object({ ... }) // Object with shape
s.record(value) // Record/map with value type
// Catalog references (for type safety)
s.ref("catalog.components") // Reference to catalog key (becomes enum)
s.propsOf("catalog.components") // Props schema from catalog entry
// Catalog definitions
s.map({ props: s.zod(), ... }) // Map of named entries with shared shape
s.zod() // Placeholder for user-provided Zod schema
// Modifiers
s.optional() // Mark field as optional
```
## Zod Schemas
Pre-built Zod schemas for common json-render types:
### Dynamic Value Schemas
```typescript
import {
DynamicValueSchema, // string | number | boolean | null | { $state: string }
DynamicStringSchema, // string | { $state: string }
DynamicNumberSchema, // number | { $state: string }
DynamicBooleanSchema, // boolean | { $state: string }
} from '@json-render/core';
// Dynamic values can be literals or state path references
type DynamicValue<T> = T | { $state: string };
// Example: a prop that can be a literal or bound to state
const schema = z.object({
label: DynamicStringSchema, // "Hello" or { $state: "/user/name" }
});
```
### Visibility Schemas
```typescript
import { VisibilityConditionSchema } from '@json-render/core';
// Use in component props that need conditional rendering
const schema = z.object({
visible: VisibilityConditionSchema.optional(),
});
```
### Action Schemas
```typescript
import {
ActionSchema, // Full action definition
ActionConfirmSchema, // Confirmation dialog config
ActionOnSuccessSchema, // Success handler config
ActionOnErrorSchema, // Error handler config
} from '@json-render/core';
```
### Validation Schemas
```typescript
import {
ValidationCheckSchema, // Single validation check
ValidationConfigSchema, // Full validation config with checks array
} from '@json-render/core';
```
## SpecStream
SpecStream is json-render's streaming format for progressively building specs from JSONL patches.
### createSpecStreamCompiler
Create a streaming compiler that incrementally builds a spec:
```typescript
import { createSpecStreamCompiler } from '@json-render/core';
const compiler = createSpecStreamCompiler<MySpec>();
// Process streaming chunks
const { result, newPatches } = compiler.push(chunk);
// Get final result
const spec = compiler.getResult();
// Reset for reuse
compiler.reset();
```
### compileSpecStream
Compile an entire SpecStream string at once:
```typescript
import { compileSpecStream } from '@json-render/core';
const jsonl = `{"op":"add","path":"/root","value":{}}
{"op":"add","path":"/root/type","value":"Card"}`;
const spec = compileSpecStream<MySpec>(jsonl);
```
### Low-Level Utilities
```typescript
import {
parseSpecStreamLine,
applySpecStreamPatch,
} from '@json-render/core';
// Parse a single line
const patch = parseSpecStreamLine('{"op":"add","path":"/root","value":{}}');
// Apply patch to object (mutates in place)
const obj = {};
applySpecStreamPatch(obj, patch);
```
### applySpecPatch
Apply a single SpecStream patch to a Spec object (mutates in place, returns the spec):
```typescript
import { applySpecPatch } from '@json-render/core';
let spec: Spec = { root: "", elements: {} };
applySpecPatch(spec, { op: "add", path: "/root", value: "main" });
// For React state updates, spread to create a new reference:
setSpec({ ...applySpecPatch(spec, patch) });
```
### nestedToFlat
Convert a nested element tree (with inline children) into the flat `Spec` format:
```typescript
import { nestedToFlat } from '@json-render/core';
const flat = nestedToFlat({
type: "Card",
props: { title: "Hello" },
children: [
{ type: "Text", props: { content: "World" }, children: [] }
],
});
// { root: "el-0", elements: { "el-0": ..., "el-1": ... } }
```
### createJsonRenderTransform
Low-level `TransformStream` that separates text from JSONL patches in a mixed AI stream. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text.
The transform properly splits text blocks around spec data by emitting `text-end`/`text-start` pairs, ensuring the AI SDK creates separate text parts and preserving correct interleaving of prose and UI in `message.parts`.
```typescript
import { createJsonRenderTransform } from '@json-render/core';
const transform = createJsonRenderTransform();
// Use with ReadableStream.pipeThrough(transform) for custom pipelines
```
Most users should use `pipeJsonRender()` instead, which wraps this transform for the common AI SDK use case.
### createMixedStreamParser
Parse a mixed stream of text and JSONL patches (used for Inline mode):
```typescript
import { createMixedStreamParser } from '@json-render/core';
const parser = createMixedStreamParser({
onText: (text) => appendToMessage(text),
onPatch: (patch) => applySpecPatch(spec, patch),
});
// As chunks arrive from the stream:
for await (const chunk of stream) {
parser.push(chunk);
}
parser.flush();
```
### pipeJsonRender
Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Inline mode API routes.
```typescript
import { pipeJsonRender } from '@json-render/core';
import { createUIMessageStream, createUIMessageStreamResponse } from 'ai';
const stream = createUIMessageStream({
execute: async ({ writer }) => {
writer.merge(pipeJsonRender(result.toUIMessageStream()));
},
});
return createUIMessageStreamResponse({ stream });
```
See [Generation Modes](/docs/generation-modes) for full Inline mode setup.
### SpecStream Types
Fully compliant with [RFC 6902](https://datatracker.ietf.org/doc/html/rfc6902):
```typescript
interface SpecStreamLine {
op: 'add' | 'remove' | 'replace' | 'move' | 'copy' | 'test';
path: string;
value?: unknown; // Required for add, replace, test
from?: string; // Required for move, copy
}
interface SpecStreamCompiler<T> {
push(chunk: string): { result: T; newPatches: SpecStreamLine[] };
getResult(): T;
getPatches(): SpecStreamLine[];
reset(): void;
}
interface MixedStreamCallbacks {
onText: (text: string) => void;
onPatch: (patch: SpecStreamLine) => void;
}
interface MixedStreamParser {
push(chunk: string): void;
flush(): void;
}
```
## Utility Functions
### Path Utilities
```typescript
import { getByPath, setByPath } from '@json-render/core';
// Get value by JSON Pointer path
const value = getByPath(state, '/user/name'); // "Alice"
// Set value by path (mutates object)
setByPath(state, '/user/email', 'alice@example.com');
```
### resolveDynamicValue
```typescript
import { resolveDynamicValue } from '@json-render/core';
// Resolve a dynamic value against state
const name = resolveDynamicValue("Hello", state); // "Hello"
const name2 = resolveDynamicValue({ $state: "/user/name" }, state); // "Alice"
```
### findFormValue
```typescript
import { findFormValue } from '@json-render/core';
// Find form values regardless of path format
// Checks: params.name, params["form.name"], state["form.name"], state.form.name
const value = findFormValue("name", params, state);
```
## buildUserPrompt
Build structured user prompts for AI generation, with support for refinement and state context.
```typescript
import { buildUserPrompt } from '@json-render/core';
function buildUserPrompt(options: UserPromptOptions): string
interface UserPromptOptions {
prompt: string; // The user's text prompt
currentSpec?: Spec | null; // Existing spec to refine (triggers edit mode)
state?: Record<string, unknown> | null; // Runtime state context to include
maxPromptLength?: number; // Max length for user text (truncates before wrapping)
editModes?: EditMode[]; // Edit modes for refinement (default: ["patch"])
}
```
### Fresh generation
```typescript
const userPrompt = buildUserPrompt({ prompt: "create a todo app" });
```
### Refinement (edit modes)
When `currentSpec` is provided, the prompt instructs the AI to use the specified edit modes instead of recreating the entire spec. Available modes: `"patch"` (RFC 6902), `"merge"` (RFC 7396), and `"diff"` (unified diff).
```typescript
const userPrompt = buildUserPrompt({
prompt: "add a dark mode toggle",
currentSpec: existingSpec,
editModes: ["patch", "merge"],
});
```
### With state context
Include runtime state so the AI knows what data is available:
```typescript
const userPrompt = buildUserPrompt({
prompt: "show my data",
state: { todos: [{ text: "Buy milk" }] },
});
```
## Edit Modes
Universal edit mode utilities for modifying existing specs. Used by `buildUserPrompt` internally and available for direct use.
```typescript
import {
buildEditInstructions,
buildEditUserPrompt,
isNonEmptySpec,
type EditMode,
type EditConfig,
} from '@json-render/core';
type EditMode = "patch" | "merge" | "diff";
```
### buildEditInstructions
Generate the prompt section describing available edit modes. Supports both JSON and YAML formats.
```typescript
function buildEditInstructions(config: EditConfig, format: "json" | "yaml"): string
const instructions = buildEditInstructions({ modes: ["patch", "merge"] }, "json");
```
### buildEditUserPrompt
Build a user prompt for editing an existing spec. Includes the current spec (with line numbers when diff mode is enabled) and mode-specific instructions.
```typescript
function buildEditUserPrompt(options: BuildEditUserPromptOptions): string
interface BuildEditUserPromptOptions {
prompt: string;
currentSpec?: Spec | null;
config?: EditConfig;
format: "json" | "yaml";
maxPromptLength?: number;
serializer?: (spec: Spec) => string;
}
```
### isNonEmptySpec
Check whether a value is a non-empty spec (has a root string and at least one element).
```typescript
function isNonEmptySpec(spec: unknown): spec is Spec
```
## Deep Merge and Diff
Format-agnostic utilities for merging and diffing spec objects.
### deepMergeSpec
Deep-merge with RFC 7396 semantics: `null` deletes, arrays replace, objects recurse. Neither input is mutated.
```typescript
import { deepMergeSpec } from '@json-render/core';
function deepMergeSpec(
base: Record<string, unknown>,
patch: Record<string, unknown>
): Record<string, unknown>
const merged = deepMergeSpec(currentSpec, { elements: { main: { props: { title: "New" } } } });
```
### diffToPatches
Generate RFC 6902 JSON Patch operations that transform one object into another. Arrays are compared shallowly and replaced atomically; plain objects recurse.
```typescript
import { diffToPatches } from '@json-render/core';
function diffToPatches(
oldObj: Record<string, unknown>,
newObj: Record<string, unknown>,
basePath?: string
): JsonPatch[]
const patches = diffToPatches(oldSpec, newSpec);
// [{ op: "replace", path: "/elements/main/props/title", value: "New Title" }]
```
## evaluateVisibility
Evaluates a visibility condition against the state model.
```typescript
function evaluateVisibility(
condition: VisibilityCondition | undefined,
ctx: VisibilityContext
): boolean
interface VisibilityContext {
stateModel: StateModel;
repeatItem?: unknown; // Current repeat item (inside repeat scope)
repeatIndex?: number; // Current repeat array index (inside repeat scope)
}
type VisibilityCondition =
| { $state: string } // truthiness
| { $state: string; not: true } // falsy
| { $state: string; eq: unknown } // equality
| { $state: string; neq: unknown } // inequality
| { $state: string; gt: number } // greater than
| { $state: string; gte: number } // gte
| { $state: string; lt: number } // lt
| { $state: string; lte: number } // lte
| { $item: string } // item field (repeat scope)
| { $item: string; eq: unknown } // item field equality
| { $index: true } // index truthiness (repeat scope)
| { $index: true; gt: number } // index comparison
| VisibilityCondition[] // implicit AND
| { $and: VisibilityCondition[] } // explicit AND
| { $or: VisibilityCondition[] } // OR
| boolean; // always / never
```
## Types
### UIElement
```typescript
interface UIElement {
type: string;
props: Record<string, unknown>;
children?: string[]; // Keys of child elements
visible?: VisibilityCondition;
on?: Record<string, ActionBinding | ActionBinding[]>; // Event bindings
repeat?: { statePath: string; key?: string }; // Repeat for arrays
}
```
Elements are stored in the `elements` map keyed by string IDs. The key comes from the map, not from the element itself.
### Spec (Element Tree)
```typescript
interface Spec {
root: string | null; // Key of root element
elements: Record<string, UIElement>; // Flat element map
state?: Record<string, unknown>; // Initial state model
}
```
Elements are stored as a flat map with string keys. The tree structure is built by following the `children` arrays.
### ActionBinding
```typescript
interface ActionBinding {
action: string;
params?: Record<string, DynamicValue>;
confirm?: {
title: string;
message: string;
variant?: 'default' | 'danger';
};
onSuccess?: { set: Record<string, unknown> };
onError?: { set: Record<string, unknown> };
preventDefault?: boolean; // Prevent default browser behavior (e.g. navigation on links)
}
```
### ValidationSchema
```typescript
interface ValidationSchema {
checks: ValidationCheck[];
validateOn?: 'change' | 'blur' | 'submit';
}
interface ValidationCheck {
type: string;
args?: Record<string, unknown>;
message: string;
}
```
================================================
FILE: apps/web/app/(main)/docs/api/image/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/image")
# @json-render/image
Image renderer. Turn JSON specs into SVG and PNG images using [Satori](https://github.com/vercel/satori).
## Install
```bash
npm install @json-render/core @json-render/image
```
For PNG output, also install the optional peer dependency:
```bash
npm install @resvg/resvg-js
```
See the [Image example](https://github.com/vercel-labs/json-render/tree/main/examples/image) for a full working example.
## schema
The image element schema for image specs. Use with `defineCatalog` from core.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema, standardComponentDefinitions } from '@json-render/image';
const catalog = defineCatalog(schema, {
components: standardComponentDefinitions,
});
```
## Render Functions
Server-side functions for producing image output. Both accept a spec and optional `RenderOptions`.
```typescript
import { renderToSvg, renderToPng } from '@json-render/image/render';
const svg = await renderToSvg(spec, { fonts });
const png = await renderToPng(spec, { fonts });
await writeFile('output.png', png);
```
### RenderOptions
```typescript
interface RenderOptions {
registry?: ComponentRegistry;
includeStandard?: boolean; // default: true
state?: Record<string, unknown>;
fonts?: SatoriOptions['fonts'];
width?: number;
height?: number;
}
```
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fonts</code></td>
<td><code>{"SatoriOptions['fonts']"}</code></td>
<td><code>[]</code></td>
<td>Font data for text rendering (required for meaningful output)</td>
</tr>
<tr>
<td><code>width</code></td>
<td><code>number</code></td>
<td>Frame prop</td>
<td>Override the output image width</td>
</tr>
<tr>
<td><code>height</code></td>
<td><code>number</code></td>
<td>Frame prop</td>
<td>Override the output image height</td>
</tr>
<tr>
<td><code>registry</code></td>
<td><code>{"Record<string, ComponentRenderer>"}</code></td>
<td><code>{"{}"}</code></td>
<td>Custom component map (merged with standard components)</td>
</tr>
<tr>
<td><code>includeStandard</code></td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>Include built-in standard components</td>
</tr>
<tr>
<td><code>state</code></td>
<td><code>{"Record<string, unknown>"}</code></td>
<td><code>{"{}"}</code></td>
<td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
</tr>
</tbody>
</table>
## Standard Components
### Root
#### Frame
Root image container. Defines the output image dimensions and background. Must be the root element.
```typescript
{
width: number;
height: number;
backgroundColor: string | null;
padding: number | null;
display: "flex" | "none" | null;
flexDirection: "row" | "column" | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
}
```
### Layout
#### Box
Generic container with padding, margin, background, border, and flex alignment. Supports absolute positioning.
```typescript
{
padding: number | null;
paddingTop: number | null;
paddingBottom: number | null;
paddingLeft: number | null;
paddingRight: number | null;
margin: number | null;
backgroundColor: string | null;
borderWidth: number | null;
borderColor: string | null;
borderRadius: number | null;
flex: number | null;
width: number | string | null;
height: number | string | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
flexDirection: "row" | "column" | null;
position: "relative" | "absolute" | null;
top: number | null;
left: number | null;
right: number | null;
bottom: number | null;
overflow: "visible" | "hidden" | null;
}
```
#### Row
Horizontal flex layout with optional wrapping.
```typescript
{
gap: number | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
padding: number | null;
flex: number | null;
wrap: boolean | null;
}
```
#### Column
Vertical flex layout.
```typescript
{
gap: number | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
padding: number | null;
flex: number | null;
}
```
### Content
#### Heading
Heading text at various levels. h1 is largest, h4 is smallest.
```typescript
{
text: string;
level: "h1" | "h2" | "h3" | "h4" | null;
color: string | null;
align: "left" | "center" | "right" | null;
letterSpacing: number | string | null;
lineHeight: number | null;
}
```
#### Text
Body text with configurable size, color, weight, and alignment.
```typescript
{
text: string;
fontSize: number | null;
color: string | null;
align: "left" | "center" | "right" | null;
fontWeight: "normal" | "bold" | null;
fontStyle: "normal" | "italic" | null;
lineHeight: number | null;
letterSpacing: number | string | null;
textDecoration: "none" | "underline" | "line-through" | null;
}
```
#### Image
Image from a URL with optional dimensions and fit.
```typescript
{
src: string;
width: number | null;
height: number | null;
borderRadius: number | null;
objectFit: "contain" | "cover" | "fill" | "none" | null;
}
```
### Decorative
#### Divider
Horizontal line separator.
```typescript
{
color: string | null;
thickness: number | null;
marginTop: number | null;
marginBottom: number | null;
}
```
#### Spacer
Empty vertical space.
```typescript
{
height: number | null;
}
```
## Catalog Definitions
Pre-built definitions for creating image catalogs:
```typescript
import { standardComponentDefinitions } from '@json-render/image/catalog';
import { defineCatalog } from '@json-render/core';
import { schema } from '@json-render/image';
const catalog = defineCatalog(schema, {
components: {
...standardComponentDefinitions,
// Add custom components
},
});
```
## Server-Safe Import
Import schema and catalog definitions without pulling in React or Satori:
```typescript
import { schema, standardComponentDefinitions } from '@json-render/image/server';
```
## Sub-path Exports
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@json-render/image</code></td>
<td>Full package: schema, renderer, components, render functions</td>
</tr>
<tr>
<td><code>@json-render/image/server</code></td>
<td>Schema and catalog definitions only (no React or Satori)</td>
</tr>
<tr>
<td><code>@json-render/image/catalog</code></td>
<td>Standard component definitions and types</td>
</tr>
<tr>
<td><code>@json-render/image/render</code></td>
<td>Server-side render functions only</td>
</tr>
</tbody>
</table>
## Types
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ImageSchema</code></td>
<td>Schema type for image specs</td>
</tr>
<tr>
<td><code>ImageSpec</code></td>
<td>Spec type for image output</td>
</tr>
<tr>
<td><code>RenderOptions</code></td>
<td>Options for render functions</td>
</tr>
<tr>
<td><code>ComponentRenderProps</code></td>
<td>Props passed to component render functions</td>
</tr>
<tr>
<td><code>ComponentRenderer</code></td>
<td>Component render function type</td>
</tr>
<tr>
<td><code>ComponentRegistry</code></td>
<td>Map of component names to render functions</td>
</tr>
<tr>
<td><code>StandardComponentDefinitions</code></td>
<td>Type of the standard component definitions object</td>
</tr>
<tr>
<td><code>StandardComponentProps{'<K>'}</code></td>
<td>Inferred props type for a standard component by name</td>
</tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/jotai/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/jotai")
# @json-render/jotai
Jotai adapter for json-render's `StateStore` interface.
## Installation
```bash
npm install @json-render/jotai @json-render/core @json-render/react jotai
```
## jotaiStateStore
Create a `StateStore` backed by a Jotai atom.
```typescript
import { jotaiStateStore } from "@json-render/jotai";
```
### Options
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>atom</code></td>
<td><code>{'WritableAtom<StateModel, [StateModel], void>'}</code></td>
<td>Yes</td>
<td>A writable atom holding the state model.</td>
</tr>
<tr>
<td><code>store</code></td>
<td>Jotai <code>Store</code></td>
<td>No</td>
<td>The Jotai store instance. Defaults to a new store created internally. Pass your own to share state with <code>{'<Provider>'}</code>.</td>
</tr>
</tbody>
</table>
### Example
```typescript
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom });
```
```tsx
<StateProvider store={store}>
{/* json-render reads/writes go through Jotai */}
</StateProvider>
```
### Shared Jotai Store
If your app already uses a Jotai `<Provider>` with a custom store, pass it so both json-render and your components share the same state:
```typescript
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom, store: jStore });
```
```tsx
<JotaiProvider store={jStore}>
<StateProvider store={store}>
{/* Both json-render and useAtom() see the same state */}
</StateProvider>
</JotaiProvider>
```
## Re-exports
<table>
<thead>
<tr>
<th>Export</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>StateStore</code></td>
<td><code>@json-render/core</code></td>
</tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/mcp/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/mcp")
# @json-render/mcp
MCP Apps integration for json-render. Serve json-render UIs as interactive [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
## Install
```bash
npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk
```
For the iframe-side React UI, also install:
```bash
npm install @json-render/react react react-dom
```
See the [MCP example](https://github.com/vercel-labs/json-render/tree/main/examples/mcp) for a full working example.
## Overview
MCP Apps let MCP servers return interactive HTML UIs that render directly inside chat conversations. `@json-render/mcp` bridges json-render catalogs with the MCP Apps protocol:
1. Your **catalog** defines which components and actions the AI can use
2. The **MCP server** exposes the catalog as a tool with the spec schema
3. The **bundled HTML** renders json-render specs inside the host's sandboxed iframe
4. The AI generates a spec, the host renders it, and users interact with the live UI
## Server API
### createMcpApp
Create a fully-configured MCP server. This is the main entry point.
```typescript
import { createMcpApp } from "@json-render/mcp";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import fs from "node:fs";
const server = createMcpApp({
name: "My Dashboard",
version: "1.0.0",
catalog: myCatalog,
html: fs.readFileSync("dist/index.html", "utf-8"),
});
await server.connect(new StdioServerTransport());
```
#### CreateMcpAppOptions
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code></td>
<td><code>string</code></td>
<td>Server name shown in client UIs</td>
</tr>
<tr>
<td><code>version</code></td>
<td><code>string</code></td>
<td>Server version</td>
</tr>
<tr>
<td><code>catalog</code></td>
<td><code>Catalog</code></td>
<td>json-render catalog defining available components</td>
</tr>
<tr>
<td><code>html</code></td>
<td><code>string</code></td>
<td>Self-contained HTML for the iframe UI</td>
</tr>
<tr>
<td><code>tool</code></td>
<td><code>McpToolOptions</code></td>
<td>Optional tool name/title/description overrides</td>
</tr>
</tbody>
</table>
### registerJsonRenderTool
Register a json-render tool on an existing `McpServer`. Use this when you need to add json-render to a server that has other tools.
```typescript
import { registerJsonRenderTool } from "@json-render/mcp";
registerJsonRenderTool(server, {
catalog,
name: "render-ui",
title: "Render UI",
description: "Render an interactive UI",
resourceUri: "ui://render-ui/view.html",
});
```
### registerJsonRenderResource
Register the UI resource that serves the bundled HTML.
```typescript
import { registerJsonRenderResource } from "@json-render/mcp";
registerJsonRenderResource(server, {
resourceUri: "ui://render-ui/view.html",
html: bundledHtml,
});
```
## Client API (`@json-render/mcp/app`)
These exports run inside the sandboxed iframe rendered by the MCP host.
### useJsonRenderApp
React hook that connects to the MCP host, listens for tool results, and maintains the current json-render spec.
```tsx
import { useJsonRenderApp } from "@json-render/mcp/app";
import { JSONUIProvider, Renderer } from "@json-render/react";
function McpAppView({ registry }) {
const { spec, loading, connected, error } = useJsonRenderApp({
name: "my-app",
version: "1.0.0",
});
if (error) return <div>Error: {error.message}</div>;
if (!spec) return <div>Waiting...</div>;
return (
<JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
<Renderer spec={spec} registry={registry} loading={loading} />
</JSONUIProvider>
);
}
```
#### UseJsonRenderAppReturn
<table>
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>spec</code></td>
<td><code>{'Spec | null'}</code></td>
<td>Current json-render spec</td>
</tr>
<tr>
<td><code>loading</code></td>
<td><code>boolean</code></td>
<td>Whether the spec is still being received</td>
</tr>
<tr>
<td><code>connected</code></td>
<td><code>boolean</code></td>
<td>Whether connected to the host</td>
</tr>
<tr>
<td><code>connecting</code></td>
<td><code>boolean</code></td>
<td>Whether currently connecting</td>
</tr>
<tr>
<td><code>error</code></td>
<td><code>{'Error | null'}</code></td>
<td>Connection error, if any</td>
</tr>
<tr>
<td><code>app</code></td>
<td><code>{'App | null'}</code></td>
<td>The underlying MCP App instance</td>
</tr>
<tr>
<td><code>callServerTool</code></td>
<td><code>{'(name, args?) => Promise<void>'}</code></td>
<td>Call an MCP server tool and update spec from result</td>
</tr>
</tbody>
</table>
### buildAppHtml
Generate a self-contained HTML page from bundled JavaScript and CSS.
```typescript
import { buildAppHtml } from "@json-render/mcp/app";
import fs from "node:fs";
const html = buildAppHtml({
title: "Dashboard",
js: fs.readFileSync("dist/app.js", "utf-8"),
css: fs.readFileSync("dist/app.css", "utf-8"),
});
```
## Client Configuration
### Cursor
Add to `.cursor/mcp.json`:
```json
{
"mcpServers": {
"json-render": {
"command": "npx",
"args": ["tsx", "path/to/server.ts", "--stdio"]
}
}
}
```
### Claude Desktop
Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"json-render": {
"command": "npx",
"args": ["tsx", "/absolute/path/to/server.ts", "--stdio"]
}
}
}
```
## Supported Clients
MCP Apps are supported by Claude (web and desktop), ChatGPT, VS Code (GitHub Copilot), Cursor, Goose, and Postman.
================================================
FILE: apps/web/app/(main)/docs/api/react/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/react")
# @json-render/react
React components, providers, and hooks.
## Providers
### StateProvider
```tsx
<StateProvider initialState={object} onStateChange={fn}>
{children}
</StateProvider>
```
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>store</code></td>
<td><code>StateStore</code></td>
<td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
</tr>
<tr>
<td><code>initialState</code></td>
<td><code>Record<string, unknown></code></td>
<td>Initial state model (uncontrolled mode).</td>
</tr>
<tr>
<td><code>onStateChange</code></td>
<td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
<td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
</tr>
</tbody>
</table>
#### External Store (Controlled Mode)
Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
```tsx
import { createStateStore, type StateStore } from "@json-render/react";
const store = createStateStore({ count: 0 });
<StateProvider store={store}>
{children}
</StateProvider>
// Mutate from anywhere — React re-renders automatically:
store.set("/count", 1);
```
The `store` prop is also available on `JSONUIProvider` and `createRenderer`.
### ActionProvider
```tsx
<ActionProvider handlers={Record<string, ActionHandler>}>
{children}
</ActionProvider>
type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;
```
### VisibilityProvider
```tsx
<VisibilityProvider>
{children}
</VisibilityProvider>
```
`VisibilityProvider` reads state from the parent `StateProvider` automatically. Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
### ValidationProvider
```tsx
<ValidationProvider customFunctions={Record<string, ValidationFunction>}>
{children}
</ValidationProvider>
type ValidationFunction = (value: unknown, args?: object) => boolean | Promise<boolean>;
```
## defineRegistry
Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, `on`, and `loading` with catalog-inferred types.
When the catalog declares actions, the `actions` field is required. When the catalog has no actions (e.g. `actions: {}`), the field is optional.
```tsx
import { defineRegistry } from '@json-render/react';
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) => <div>{props.title}{children}</div>,
Button: ({ props, emit }) => (
<button onClick={() => emit("press")}>
{props.label}
</button>
),
},
});
// Pass to <Renderer>
<Renderer spec={spec} registry={registry} />
```
## Components
### Renderer
```tsx
<Renderer
spec={Spec} // The UI spec to render
registry={Registry} // Component registry (from defineRegistry)
loading={boolean} // Optional loading state
fallback={Component} // Optional fallback for unknown types
/>
type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
```
### JSONUIProvider
Convenience wrapper that combines `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`. Accepts all their props plus:
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>functions</code></td>
<td><code>Record<string, ComputedFunction></code></td>
<td>Named functions for <code>$computed</code> expressions in props</td>
</tr>
</tbody>
</table>
```tsx
<JSONUIProvider
spec={spec}
catalog={catalog}
handlers={{ submit: async () => { /* ... */ } }}
functions={{ fullName: (args) => `${args.first} ${args.last}` }}
>
<Renderer spec={spec} registry={registry} />
</JSONUIProvider>
```
The `functions` prop is also available on `createRenderer`.
### Component Props (via defineRegistry)
```tsx
interface ComponentContext<P> {
props: P; // Typed props from catalog
children?: React.ReactNode; // Rendered children (for slot components)
emit: (event: string) => void; // Emit a named event (always defined)
on: (event: string) => EventHandle; // Get event handle with metadata
loading?: boolean;
bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
}
interface EventHandle {
emit: () => void; // Fire the event
shouldPreventDefault: boolean; // Whether any binding requested preventDefault
bound: boolean; // Whether any handler is bound
}
```
Use `emit("press")` for simple event firing. Use `on("click")` when you need to check metadata like `shouldPreventDefault`:
```tsx
Link: ({ props, on }) => {
const click = on("click");
return (
<a
href={props.href}
onClick={(e) => {
if (click.shouldPreventDefault) e.preventDefault();
click.emit();
}}
>
{props.label}
</a>
);
},
```
### BaseComponentProps
Catalog-agnostic base type for building reusable component libraries (e.g. `@json-render/shadcn`) that are not tied to a specific catalog:
```typescript
import type { BaseComponentProps } from "@json-render/react";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) => (
<div>{props.title}{children}</div>
);
```
## Hooks
### useUIStream
```typescript
const {
spec, // Spec | null - current UI state
isStreaming, // boolean - true while streaming
error, // Error | null
send, // (prompt: string, context?: Record<string, unknown>) => Promise<void>
clear, // () => void - reset spec and error
} = useUIStream({
api: string, // API endpoint URL
onComplete?: (spec: Spec) => void, // Called when streaming completes
onError?: (error: Error) => void, // Called when an error occurs
});
```
### useStateStore
```typescript
const {
state, // StateModel (Record<string, unknown>)
get, // (path: string) => unknown
set, // (path: string, value: unknown) => void
update, // (updates: Record<string, unknown>) => void
} = useStateStore();
```
### useStateValue
```typescript
const value = useStateValue(path: string);
```
### useStateBinding (deprecated)
> **Deprecated.** Use `useBoundProp` with `$bindState` expressions instead.
```typescript
const [value, setValue] = useStateBinding(path: string);
```
### useActions
```typescript
const { execute } = useActions();
// execute(binding: ActionBinding) => Promise<void>
```
### useAction
```typescript
const { execute, isLoading } = useAction(binding: ActionBinding);
// execute() => Promise<void>
```
### useIsVisible
```typescript
const isVisible = useIsVisible(condition?: VisibilityCondition);
```
### useFieldValidation
```typescript
const {
state, // FieldValidationState
validate, // () => ValidationResult
touch, // () => void
clear, // () => void
errors, // string[]
isValid, // boolean
} = useFieldValidation(path: string, config?: ValidationConfig);
```
`ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
### useOptionalValidation
Non-throwing variant of `useValidation()`. Returns `null` when no `ValidationProvider` is present, instead of throwing. Useful in components that may or may not be rendered inside a validation context.
```typescript
const validation = useOptionalValidation();
// ValidationContextValue | null
```
### useBoundProp
Two-way binding helper for `$bindState` / `$bindItem` expressions. Returns `[value, setValue]` where `setValue` writes back to the bound state path.
```typescript
const [value, setValue] = useBoundProp<T>(
propValue: T | undefined, // The already-resolved prop value
bindingPath: string | undefined // From bindings?.value
);
```
Use inside registry components:
```tsx
const Input: ComponentRenderer = ({ props, bindings }) => {
const [value, setValue] = useBoundProp<string>(props.value, bindings?.value);
return <input value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
};
```
### Chat Hooks
Two hooks are available for chat + GenUI, depending on your setup:
- **`useChatUI`** -- Self-contained chat hook with its own message state, fetch logic, and mixed stream parsing. Use when you want a standalone chat experience without the Vercel AI SDK.
- **`useJsonRenderMessage`** -- Extracts spec + text from an AI SDK `UIMessage.parts` array. Use with the Vercel AI SDK's `useChat` for full AI SDK integration.
### useChatUI
Hook for chat + GenUI experiences. Manages a multi-turn conversation where each assistant message can contain both text and a json-render UI spec.
```typescript
const {
messages, // ChatMessage[] - all messages in the conversation
isStreaming, // boolean - true while streaming
error, // Error | null
send, // (text: string) => Promise<void>
clear, // () => void - reset conversation
} = useChatUI({
api: string, // API endpoint
onComplete?: (message: ChatMessage) => void, // Called when streaming completes
onError?: (error: Error) => void, // Called on error
});
interface ChatMessage {
id: string;
role: "user" | "assistant";
text: string;
spec: Spec | null;
}
```
### useJsonRenderMessage
Extract a spec and text content from an AI SDK message's `parts` array. Designed for integration with Vercel AI SDK's `useChat`.
```typescript
const { spec, text, hasSpec } = useJsonRenderMessage(parts: DataPart[]);
// spec: Spec | null - compiled from JSONL patches in data parts
// text: string - concatenated text parts
// hasSpec: boolean - true when spec is non-null
```
### buildSpecFromParts / getTextFromParts
Standalone utilities for extracting spec and text from AI SDK message parts (non-hook versions):
```typescript
import { buildSpecFromParts, getTextFromParts } from '@json-render/react';
const spec = buildSpecFromParts(message.parts); // Spec | null
const text = getTextFromParts(message.parts); // string
```
================================================
FILE: apps/web/app/(main)/docs/api/react-email/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/react-email")
# @json-render/react-email
React Email renderer. Turn JSON specs into HTML or plain-text emails using `@react-email/components` and `@react-email/render`.
## Install
```bash
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
```
See the [React Email example](https://github.com/vercel-labs/json-render/tree/main/examples/react-email) for a full working example.
## schema
The email element schema for specs. Use with `defineCatalog` from core.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema, standardComponentDefinitions } from '@json-render/react-email';
const catalog = defineCatalog(schema, {
components: standardComponentDefinitions,
});
```
## Render Functions
Server-side functions for producing email output. All accept a spec and optional `RenderOptions`.
```typescript
import { renderToHtml, renderToPlainText } from '@json-render/react-email';
const html = await renderToHtml(spec);
const plainText = await renderToPlainText(spec);
```
### RenderOptions
```typescript
interface RenderOptions {
registry?: ComponentRegistry;
includeStandard?: boolean; // default: true
state?: Record<string, unknown>;
}
```
<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>registry</code></td>
<td>Custom component map (merged with standard components)</td>
</tr>
<tr>
<td><code>includeStandard</code></td>
<td>Include built-in standard components (default: <code>true</code>)</td>
</tr>
<tr>
<td><code>state</code></td>
<td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
</tr>
</tbody>
</table>
## defineRegistry
Create a type-safe component registry from a catalog. Components receive `{ props, children, emit, bindings, loading }`.
```tsx
import { defineRegistry } from '@json-render/react-email';
import { Container, Heading, Text } from '@react-email/components';
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) => (
<Container style={{ padding: 16, backgroundColor: '#fff' }}>
<Heading>{props.title}</Heading>
{children}
</Container>
),
},
});
const html = await renderToHtml(spec, { registry });
```
## createRenderer
Create a standalone renderer component wired to state, actions, and validation (for interactive previews in the browser).
```typescript
import { createRenderer } from '@json-render/react-email';
const EmailRenderer = createRenderer(catalog, components);
```
## Renderer
The main component that renders a spec to React Email elements. Use inside `JSONUIProvider` when you need state, actions, or visibility.
```typescript
interface RendererProps {
spec: Spec | null;
registry?: ComponentRegistry;
includeStandard?: boolean; // default: true
loading?: boolean;
fallback?: ComponentRenderer;
}
```
## Standard Components
### Document structure
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Html</code></td>
<td>Top-level email wrapper. Must be the root element.</td>
</tr>
<tr>
<td><code>Head</code></td>
<td>Email head section. Place inside Html.</td>
</tr>
<tr>
<td><code>Body</code></td>
<td>Email body wrapper. Place inside Html.</td>
</tr>
</tbody>
</table>
### Layout
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Container</code></td>
<td>Constrains content width (e.g. max-width 600px).</td>
</tr>
<tr>
<td><code>Section</code></td>
<td>Groups related content.</td>
</tr>
<tr>
<td><code>Row</code></td>
<td>Horizontal layout row.</td>
</tr>
<tr>
<td><code>Column</code></td>
<td>Column within a Row.</td>
</tr>
</tbody>
</table>
### Content
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Heading</code></td>
<td>Heading text (h1-h6).</td>
</tr>
<tr>
<td><code>Text</code></td>
<td>Body text paragraph.</td>
</tr>
<tr>
<td><code>Link</code></td>
<td>Hyperlink with text and href.</td>
</tr>
<tr>
<td><code>Button</code></td>
<td>Call-to-action button (link styled as button).</td>
</tr>
<tr>
<td><code>Image</code></td>
<td>Image from URL.</td>
</tr>
<tr>
<td><code>Hr</code></td>
<td>Horizontal rule separator.</td>
</tr>
</tbody>
</table>
### Utility
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Preview</code></td>
<td>Preview text for inbox (inside Html).</td>
</tr>
<tr>
<td><code>Markdown</code></td>
<td>Renders markdown content as email-safe HTML.</td>
</tr>
</tbody>
</table>
## Server-Safe Import
Import schema and catalog definitions without pulling in React or `@react-email/components`:
```typescript
import { schema, standardComponentDefinitions } from '@json-render/react-email/server';
```
## Sub-path Exports
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@json-render/react-email</code></td>
<td>Full package: schema, renderer, components, render functions</td>
</tr>
<tr>
<td><code>@json-render/react-email/server</code></td>
<td>Schema and catalog definitions only (no React)</td>
</tr>
<tr>
<td><code>@json-render/react-email/catalog</code></td>
<td>Standard component definitions and types</td>
</tr>
<tr>
<td><code>@json-render/react-email/render</code></td>
<td>Server-side render functions only</td>
</tr>
</tbody>
</table>
## Types
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ReactEmailSchema</code></td>
<td>Schema type for email specs</td>
</tr>
<tr>
<td><code>ReactEmailSpec</code></td>
<td>Spec type for email documents</td>
</tr>
<tr>
<td><code>RenderOptions</code></td>
<td>Options for render functions</td>
</tr>
<tr>
<td><code>ComponentContext</code></td>
<td>Typed component render function context</td>
</tr>
<tr>
<td><code>ComponentFn</code></td>
<td>Component render function type</td>
</tr>
<tr>
<td><code>StandardComponentDefinitions</code></td>
<td>Type of the standard component definitions object</td>
</tr>
<tr>
<td><code>StandardComponentProps<K></code></td>
<td>Inferred props type for a standard component by name</td>
</tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/react-native/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/react-native")
# @json-render/react-native
React Native renderer with standard components, providers, and hooks.
## Standard Components
### Layout
<table>
<thead>
<tr><th>Component</th><th>Props</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>Container</code></td><td><code>padding</code>, <code>background</code>, <code>borderRadius</code>, <code>borderColor</code>, <code>flex</code></td><td>Basic wrapper with styling</td></tr>
<tr><td><code>Row</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code>, <code>wrap</code></td><td>Horizontal flex layout</td></tr>
<tr><td><code>Column</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code></td><td>Vertical flex layout</td></tr>
<tr><td><code>ScrollContainer</code></td><td><code>direction</code></td><td>Scrollable area (vertical or horizontal)</td></tr>
<tr><td><code>SafeArea</code></td><td><code>edges</code></td><td>Safe area insets for notch/home indicator</td></tr>
<tr><td><code>Pressable</code></td><td><code>action</code>, <code>actionParams</code></td><td>Touchable wrapper that triggers actions</td></tr>
<tr><td><code>Spacer</code></td><td><code>size</code>, <code>flex</code></td><td>Fixed or flexible spacing</td></tr>
<tr><td><code>Divider</code></td><td><code>color</code>, <code>thickness</code></td><td>Thin line separator</td></tr>
</tbody>
</table>
### Content
<table>
<thead>
<tr><th>Component</th><th>Props</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>Heading</code></td><td><code>text</code>, <code>level</code>, <code>align</code>, <code>color</code></td><td>Heading text (levels 1-6)</td></tr>
<tr><td><code>Paragraph</code></td><td><code>text</code>, <code>align</code>, <code>color</code></td><td>Body text</td></tr>
<tr><td><code>Label</code></td><td><code>text</code>, <code>color</code>, <code>bold</code></td><td>Small label text</td></tr>
<tr><td><code>Image</code></td><td><code>uri</code>, <code>width</code>, <code>height</code>, <code>resizeMode</code>, <code>borderRadius</code></td><td>Image display</td></tr>
<tr><td><code>Avatar</code></td><td><code>uri</code>, <code>size</code>, <code>fallback</code></td><td>Circular avatar</td></tr>
<tr><td><code>Badge</code></td><td><code>label</code>, <code>color</code>, <code>textColor</code></td><td>Status badge</td></tr>
<tr><td><code>Chip</code></td><td><code>label</code>, <code>selected</code>, <code>color</code></td><td>Tag/chip</td></tr>
</tbody>
</table>
### Input
<table>
<thead>
<tr><th>Component</th><th>Props</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>Button</code></td><td><code>label</code>, <code>variant</code>, <code>size</code>, <code>disabled</code>, <code>action</code>, <code>actionParams</code></td><td>Pressable button</td></tr>
<tr><td><code>TextInput</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>), <code>secure</code>, <code>keyboardType</code>, <code>multiline</code></td><td>Text input field</td></tr>
<tr><td><code>Switch</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Toggle switch</td></tr>
<tr><td><code>Checkbox</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Checkbox with label</td></tr>
<tr><td><code>Slider</code></td><td><code>value</code> (use <code>$bindState</code>), <code>min</code>, <code>max</code>, <code>step</code></td><td>Range slider</td></tr>
<tr><td><code>SearchBar</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>)</td><td>Search input</td></tr>
</tbody>
</table>
### Feedback
<table>
<thead>
<tr><th>Component</th><th>Props</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>Spinner</code></td><td><code>size</code>, <code>color</code></td><td>Loading indicator</td></tr>
<tr><td><code>ProgressBar</code></td><td><code>progress</code>, <code>color</code>, <code>trackColor</code></td><td>Progress indicator</td></tr>
</tbody>
</table>
### Composite
<table>
<thead>
<tr><th>Component</th><th>Props</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>Card</code></td><td><code>title</code>, <code>subtitle</code>, <code>padding</code></td><td>Card container</td></tr>
<tr><td><code>ListItem</code></td><td><code>title</code>, <code>subtitle</code>, <code>leading</code>, <code>trailing</code>, <code>action</code>, <code>actionParams</code></td><td>List row</td></tr>
<tr><td><code>Modal</code></td><td><code>visible</code>, <code>title</code></td><td>Bottom sheet modal</td></tr>
</tbody>
</table>
## Providers
### StateProvider
```tsx
<StateProvider initialState={object} onStateChange={fn}>
{children}
</StateProvider>
```
<table>
<thead>
<tr><th>Prop</th><th>Type</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>store</code></td><td><code>StateStore</code></td><td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td></tr>
<tr><td><code>initialState</code></td><td><code>Record<string, unknown></code></td><td>Initial state model (uncontrolled mode).</td></tr>
<tr><td><code>onStateChange</code></td><td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td><td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td></tr>
</tbody>
</table>
#### External Store (Controlled Mode)
Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
```tsx
import { createStateStore, type StateStore } from "@json-render/react-native";
const store = createStateStore({ count: 0 });
<StateProvider store={store}>
{children}
</StateProvider>
// Mutate from anywhere — components re-render automatically:
store.set("/count", 1);
```
The `store` prop is also available on `JSONUIProvider` and `createRenderer`.
### ActionProvider
```tsx
<ActionProvider handlers={Record<string, ActionHandler>}>
{children}
</ActionProvider>
```
### VisibilityProvider
```tsx
<VisibilityProvider>
{children}
</VisibilityProvider>
```
Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
### ValidationProvider
```tsx
<ValidationProvider>
{children}
</ValidationProvider>
```
## defineRegistry
Create a type-safe component registry. Standard components are built-in; only register custom components.
```tsx
import { defineRegistry, type Components } from '@json-render/react-native';
const { registry } = defineRegistry(catalog, {
components: {
Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
} as Components<typeof catalog>,
});
```
## Hooks
### useUIStream
```typescript
const {
spec, // Spec | null - current UI state
isStreaming, // boolean - true while streaming
error, // Error | null
send, // (prompt: string) => Promise<void>
clear, // () => void - reset spec and error
} = useUIStream({
api: string,
onComplete?: (spec: Spec) => void,
onError?: (error: Error) => void,
});
```
### useStateStore
```typescript
const { state, get, set, update } = useStateStore();
```
### useStateValue
```typescript
const value = useStateValue(path: string);
```
### useStateBinding (deprecated)
> **Deprecated.** Use `useBoundProp` with `$bindState` expressions instead.
```typescript
const [value, setValue] = useStateBinding(path: string);
```
### useActions
```typescript
const { execute } = useActions();
```
### useIsVisible
```typescript
const isVisible = useIsVisible(condition?: VisibilityCondition);
```
## Catalog Exports
```typescript
import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
import { schema } from "@json-render/react-native/schema";
```
<table>
<thead>
<tr><th>Export</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td><code>standardComponentDefinitions</code></td><td>Catalog definitions for all 25+ standard components</td></tr>
<tr><td><code>standardActionDefinitions</code></td><td>Catalog definitions for standard actions (setState, navigate)</td></tr>
<tr><td><code>schema</code></td><td>React Native element tree schema</td></tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/react-pdf/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/react-pdf")
# @json-render/react-pdf
PDF document renderer. Turn JSON specs into PDFs using `@react-pdf/renderer`.
## Install
```bash
npm install @json-render/core @json-render/react-pdf
```
See the [React PDF example](https://github.com/vercel-labs/json-render/tree/main/examples/react-pdf) for a full working example.
## schema
The PDF element schema for document specs. Use with `defineCatalog` from core.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema, standardComponentDefinitions } from '@json-render/react-pdf';
const catalog = defineCatalog(schema, {
components: standardComponentDefinitions,
});
```
## Render Functions
Server-side functions for producing PDF output. All accept a spec and optional `RenderOptions`.
```typescript
import { renderToBuffer, renderToStream, renderToFile } from '@json-render/react-pdf';
const buffer = await renderToBuffer(spec);
const stream = await renderToStream(spec);
stream.pipe(res);
await renderToFile(spec, './output.pdf');
```
### RenderOptions
```typescript
interface RenderOptions {
registry?: ComponentRegistry;
includeStandard?: boolean; // default: true
state?: Record<string, unknown>;
}
```
<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>registry</code></td>
<td>Custom component map (merged with standard components)</td>
</tr>
<tr>
<td><code>includeStandard</code></td>
<td>Include built-in standard components (default: <code>true</code>)</td>
</tr>
<tr>
<td><code>state</code></td>
<td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
</tr>
</tbody>
</table>
## defineRegistry
Create a type-safe component registry from a catalog. Components receive `{ props, children, emit, bindings, loading }`.
```tsx
import { defineRegistry } from '@json-render/react-pdf';
import { View, Text } from '@react-pdf/renderer';
const { registry } = defineRegistry(catalog, {
components: {
Badge: ({ props }) => (
<View style={{ backgroundColor: props.color ?? '#e5e7eb', padding: 4, borderRadius: 4 }}>
<Text style={{ fontSize: 10 }}>{props.label}</Text>
</View>
),
},
});
const buffer = await renderToBuffer(spec, { registry });
```
## createRenderer
Create a standalone renderer component wired to state, actions, and validation.
```typescript
import { createRenderer } from '@json-render/react-pdf';
const PDFRenderer = createRenderer(catalog, components);
```
```typescript
interface CreateRendererProps {
spec: Spec | null;
store?: StateStore;
state?: Record<string, unknown>;
onAction?: (actionName: string, params?: Record<string, unknown>) => void;
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void;
loading?: boolean;
fallback?: ComponentRenderer;
}
```
When `store` is provided, `state` and `onStateChange` are ignored (controlled mode).
## Renderer
The main component that renders a spec to `@react-pdf/renderer` elements.
```typescript
interface RendererProps {
spec: Spec | null;
registry?: ComponentRegistry;
includeStandard?: boolean; // default: true
loading?: boolean;
fallback?: ComponentRenderer;
}
```
## Standard Components
### Document Structure
#### Document
Top-level PDF wrapper. Must be the root element. Children must be `Page` components.
```typescript
{
title: string | null;
author: string | null;
subject: string | null;
}
```
#### Page
A page in the document with configurable size, orientation, and margins.
```typescript
{
size: "A4" | "A3" | "A5" | "LETTER" | "LEGAL" | "TABLOID" | null;
orientation: "portrait" | "landscape" | null;
marginTop: number | null;
marginBottom: number | null;
marginLeft: number | null;
marginRight: number | null;
backgroundColor: string | null;
}
```
### Layout
#### View
Generic container with padding, margin, background, border, and flex alignment.
```typescript
{
padding: number | null;
paddingTop: number | null;
paddingBottom: number | null;
paddingLeft: number | null;
paddingRight: number | null;
margin: number | null;
backgroundColor: string | null;
borderWidth: number | null;
borderColor: string | null;
borderRadius: number | null;
flex: number | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
}
```
#### Row
Horizontal flex layout with optional wrapping.
```typescript
{
gap: number | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
padding: number | null;
flex: number | null;
wrap: boolean | null;
}
```
#### Column
Vertical flex layout.
```typescript
{
gap: number | null;
alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
padding: number | null;
flex: number | null;
}
```
### Content
#### Heading
h1-h4 heading text with configurable color and alignment.
```typescript
{
text: string;
level: "h1" | "h2" | "h3" | "h4" | null;
color: string | null;
align: "left" | "center" | "right" | null;
}
```
#### Text
Body text with full styling control.
```typescript
{
text: string;
fontSize: number | null;
color: string | null;
align: "left" | "center" | "right" | null;
fontWeight: "normal" | "bold" | null;
fontStyle: "normal" | "italic" | null;
lineHeight: number | null;
}
```
#### Image
Image from a URL with optional dimensions and fit.
```typescript
{
src: string;
width: number | null;
height: number | null;
objectFit: "contain" | "cover" | "fill" | "none" | null;
}
```
#### Link
Hyperlink with visible text.
```typescript
{
text: string;
href: string;
fontSize: number | null;
color: string | null;
}
```
### Data
#### Table
Data table with typed columns and string rows. Supports header styling and striped rows.
```typescript
{
columns: { header: string; width?: string; align?: "left" | "center" | "right" }[];
rows: string[][];
headerBackgroundColor: string | null;
headerTextColor: string | null;
borderColor: string | null;
fontSize: number | null;
striped: boolean | null;
}
```
#### List
Ordered or unordered list.
```typescript
{
items: string[];
ordered: boolean | null;
fontSize: number | null;
color: string | null;
spacing: number | null;
}
```
### Decorative
#### Divider
Horizontal line separator.
```typescript
{
color: string | null;
thickness: number | null;
marginTop: number | null;
marginBottom: number | null;
}
```
#### Spacer
Empty vertical space.
```typescript
{
height: number | null;
}
```
### Page-Level
#### PageNumber
Renders current page number and total pages. Format uses `{pageNumber}` and `{totalPages}` placeholders.
```typescript
{
format: string | null; // default: "{pageNumber} / {totalPages}"
fontSize: number | null;
color: string | null;
align: "left" | "center" | "right" | null;
}
```
## External Store (Controlled Mode)
Pass a `StateStore` to `StateProvider`, `JSONUIProvider`, or `createRenderer` for full control over state:
```tsx
import { createStateStore, type StateStore } from "@json-render/react-pdf";
const store = createStateStore({ invoice: { total: 100 } });
store.set("/invoice/total", 200);
```
When `store` is provided, `initialState` / `state` and `onStateChange` are ignored.
## Server-Safe Import
Import schema and catalog definitions without pulling in React or `@react-pdf/renderer`:
```typescript
import { schema, standardComponentDefinitions } from '@json-render/react-pdf/server';
```
## Sub-path Exports
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@json-render/react-pdf</code></td>
<td>Full package: schema, renderer, components, render functions</td>
</tr>
<tr>
<td><code>@json-render/react-pdf/server</code></td>
<td>Schema and catalog definitions only (no React)</td>
</tr>
<tr>
<td><code>@json-render/react-pdf/catalog</code></td>
<td>Standard component definitions and types</td>
</tr>
<tr>
<td><code>@json-render/react-pdf/render</code></td>
<td>Server-side render functions only</td>
</tr>
</tbody>
</table>
## Types
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ReactPdfSchema</code></td>
<td>Schema type for PDF specs</td>
</tr>
<tr>
<td><code>ReactPdfSpec</code></td>
<td>Spec type for PDF documents</td>
</tr>
<tr>
<td><code>RenderOptions</code></td>
<td>Options for render functions</td>
</tr>
<tr>
<td><code>ComponentContext</code></td>
<td>Typed component render function context</td>
</tr>
<tr>
<td><code>ComponentFn</code></td>
<td>Component render function type</td>
</tr>
<tr>
<td><code>StandardComponentDefinitions</code></td>
<td>Type of the standard component definitions object</td>
</tr>
<tr>
<td><code>StandardComponentProps<K></code></td>
<td>Inferred props type for a standard component by name</td>
</tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/react-three-fiber/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/react-three-fiber")
# @json-render/react-three-fiber
React Three Fiber renderer for json-render. 19 built-in 3D components for meshes, lights, models, environments, text, cameras, and controls.
## Installation
```bash
npm install @json-render/react-three-fiber @json-render/core @json-render/react @react-three/fiber @react-three/drei three zod
```
## Entry Points
<table>
<thead>
<tr>
<th>Entry Point</th>
<th>Exports</th>
<th>Use For</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@json-render/react-three-fiber</code></td>
<td><code>threeComponents</code>, <code>ThreeRenderer</code>, <code>ThreeCanvas</code>, schemas</td>
<td>React Three Fiber implementations and renderer</td>
</tr>
<tr>
<td><code>@json-render/react-three-fiber/catalog</code></td>
<td><code>threeComponentDefinitions</code></td>
<td>Catalog schemas (no R3F dependency, safe for server)</td>
</tr>
</tbody>
</table>
## Usage
```tsx
import {'{ defineCatalog }'} from "@json-render/core";
import {'{ schema, defineRegistry }'} from "@json-render/react";
import {'{'}
threeComponentDefinitions,
threeComponents,
ThreeCanvas,
{'}'} from "@json-render/react-three-fiber";
const catalog = defineCatalog(schema, {'{'}
components: {'{'}
Box: threeComponentDefinitions.Box,
Sphere: threeComponentDefinitions.Sphere,
AmbientLight: threeComponentDefinitions.AmbientLight,
DirectionalLight: threeComponentDefinitions.DirectionalLight,
OrbitControls: threeComponentDefinitions.OrbitControls,
{'}'},
actions: {'{}'},
{'}'});
const {'{ registry }'} = defineRegistry(catalog, {'{'}
components: {'{'}
Box: threeComponents.Box,
Sphere: threeComponents.Sphere,
AmbientLight: threeComponents.AmbientLight,
DirectionalLight: threeComponents.DirectionalLight,
OrbitControls: threeComponents.OrbitControls,
{'}'},
{'}'});
```
### ThreeCanvas (convenience)
```tsx
<ThreeCanvas
spec={'{spec}'}
registry={'{registry}'}
shadows
camera={'{'}{'{ position: [5, 5, 5], fov: 50 }'}{'}'}
style={'{'}{'{ width: "100%", height: "100vh" }'}{'}'}
/>
```
### Manual Canvas Setup
```tsx
import {'{ Canvas }'} from "@react-three/fiber";
import {'{ ThreeRenderer }'} from "@json-render/react-three-fiber";
<Canvas shadows>
<ThreeRenderer spec={'{spec}'} registry={'{registry}'} />
</Canvas>
```
## Components
### Primitives
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Key Props</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Box</code></td>
<td>Box mesh (default 1x1x1)</td>
<td><code>width</code>, <code>height</code>, <code>depth</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Sphere</code></td>
<td>Sphere mesh</td>
<td><code>radius</code>, <code>widthSegments</code>, <code>heightSegments</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Cylinder</code></td>
<td>Cylinder mesh</td>
<td><code>radiusTop</code>, <code>radiusBottom</code>, <code>height</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Cone</code></td>
<td>Cone mesh</td>
<td><code>radius</code>, <code>height</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Torus</code></td>
<td>Torus (donut) mesh</td>
<td><code>radius</code>, <code>tube</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Plane</code></td>
<td>Flat plane mesh</td>
<td><code>width</code>, <code>height</code>, <code>material</code></td>
</tr>
<tr>
<td><code>Capsule</code></td>
<td>Capsule mesh</td>
<td><code>radius</code>, <code>length</code>, <code>material</code></td>
</tr>
</tbody>
</table>
All primitives share: <code>position</code>, <code>rotation</code>, <code>scale</code>, <code>castShadow</code>, <code>receiveShadow</code>, <code>material</code>.
### Material Schema
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>color</code></td>
<td><code>string</code></td>
<td><code>"#ffffff"</code></td>
</tr>
<tr>
<td><code>metalness</code></td>
<td><code>number</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td><code>roughness</code></td>
<td><code>number</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td><code>emissive</code></td>
<td><code>string</code></td>
<td><code>"#000000"</code></td>
</tr>
<tr>
<td><code>emissiveIntensity</code></td>
<td><code>number</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td><code>opacity</code></td>
<td><code>number</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td><code>transparent</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>wireframe</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
### Lights
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Key Props</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>AmbientLight</code></td>
<td>Uniform illumination</td>
<td><code>color</code>, <code>intensity</code></td>
</tr>
<tr>
<td><code>DirectionalLight</code></td>
<td>Sunlight-style</td>
<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>castShadow</code></td>
</tr>
<tr>
<td><code>PointLight</code></td>
<td>Radiates from a point</td>
<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>distance</code>, <code>decay</code></td>
</tr>
<tr>
<td><code>SpotLight</code></td>
<td>Cone of light</td>
<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>angle</code>, <code>penumbra</code></td>
</tr>
</tbody>
</table>
### Other Components
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Key Props</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Group</code></td>
<td>Container for children</td>
<td><code>position</code>, <code>rotation</code>, <code>scale</code></td>
</tr>
<tr>
<td><code>Model</code></td>
<td>GLTF/GLB model loader</td>
<td><code>url</code>, <code>position</code>, <code>rotation</code>, <code>scale</code></td>
</tr>
<tr>
<td><code>Environment</code></td>
<td>HDRI environment map</td>
<td><code>preset</code>, <code>background</code>, <code>blur</code>, <code>intensity</code></td>
</tr>
<tr>
<td><code>Fog</code></td>
<td>Linear fog effect</td>
<td><code>color</code>, <code>near</code>, <code>far</code></td>
</tr>
<tr>
<td><code>GridHelper</code></td>
<td>Reference grid</td>
<td><code>size</code>, <code>divisions</code>, <code>color</code></td>
</tr>
<tr>
<td><code>Text3D</code></td>
<td>3D text (SDF)</td>
<td><code>text</code>, <code>fontSize</code>, <code>color</code>, <code>anchorX</code>, <code>anchorY</code></td>
</tr>
<tr>
<td><code>PerspectiveCamera</code></td>
<td>Camera</td>
<td><code>position</code>, <code>fov</code>, <code>near</code>, <code>far</code>, <code>makeDefault</code></td>
</tr>
<tr>
<td><code>OrbitControls</code></td>
<td>Camera controls</td>
<td><code>enableDamping</code>, <code>enableZoom</code>, <code>autoRotate</code></td>
</tr>
</tbody>
</table>
## Shared Schemas
Reusable Zod schemas for custom 3D components:
```tsx
import {'{ vector3Schema, materialSchema, transformProps, shadowProps }'} from "@json-render/react-three-fiber";
```
<table>
<thead>
<tr>
<th>Export</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>vector3Schema</code></td>
<td><code>z.tuple([z.number(), z.number(), z.number()])</code></td>
</tr>
<tr>
<td><code>materialSchema</code></td>
<td>Standard material props (color, metalness, roughness, etc.)</td>
</tr>
<tr>
<td><code>transformProps</code></td>
<td><code>{'{ position, rotation, scale }'}</code> schema fields</td>
</tr>
<tr>
<td><code>shadowProps</code></td>
<td><code>{'{ castShadow, receiveShadow }'}</code> schema fields</td>
</tr>
</tbody>
</table>
## ThreeRenderer
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>spec</code></td>
<td><code>Spec | null</code></td>
<td>The spec to render as a 3D scene</td>
</tr>
<tr>
<td><code>registry</code></td>
<td><code>ComponentRegistry</code></td>
<td>Component registry from <code>defineRegistry</code></td>
</tr>
<tr>
<td><code>store</code></td>
<td><code>StateStore</code></td>
<td>External state store (controlled mode)</td>
</tr>
<tr>
<td><code>initialState</code></td>
<td><code>Record<string, unknown></code></td>
<td>Initial state (uncontrolled mode)</td>
</tr>
<tr>
<td><code>handlers</code></td>
<td><code>Record<string, Function></code></td>
<td>Action handlers</td>
</tr>
<tr>
<td><code>loading</code></td>
<td><code>boolean</code></td>
<td>Whether the spec is streaming</td>
</tr>
<tr>
<td><code>children</code></td>
<td><code>ReactNode</code></td>
<td>Additional R3F elements alongside the spec</td>
</tr>
</tbody>
</table>
## ThreeCanvas
Extends <code>ThreeRendererProps</code> with Canvas options:
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>shadows</code></td>
<td><code>boolean</code></td>
<td>Enable shadow maps</td>
</tr>
<tr>
<td><code>camera</code></td>
<td><code>object</code></td>
<td>Default camera config (position, fov, etc.)</td>
</tr>
<tr>
<td><code>className</code></td>
<td><code>string</code></td>
<td>CSS class for the canvas container</td>
</tr>
<tr>
<td><code>style</code></td>
<td><code>CSSProperties</code></td>
<td>Inline styles for the canvas container</td>
</tr>
</tbody>
</table>
## Type Helpers
```tsx
import type {'{ ThreeProps }'} from "@json-render/react-three-fiber";
type BoxProps = ThreeProps<"Box">;
type SphereProps = ThreeProps<"Sphere">;
```
================================================
FILE: apps/web/app/(main)/docs/api/redux/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/redux")
# @json-render/redux
Redux / Redux Toolkit adapter for json-render's `StateStore` interface.
## Installation
```bash
npm install @json-render/redux @json-render/core @json-render/react redux
# or with Redux Toolkit (recommended):
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
```
## reduxStateStore
Create a `StateStore` backed by a Redux store.
```typescript
import { reduxStateStore } from "@json-render/redux";
```
### Options
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>store</code></td>
<td><code>Store</code></td>
<td>Yes</td>
<td>The Redux store instance.</td>
</tr>
<tr>
<td><code>selector</code></td>
<td><code>{'(state: S) => StateModel'}</code></td>
<td>No</td>
<td>Select the json-render slice from the Redux state tree. Defaults to <code>{'(state) => state'}</code>.</td>
</tr>
<tr>
<td><code>dispatch</code></td>
<td><code>{'(nextState: StateModel, store: Store) => void'}</code></td>
<td>Yes</td>
<td>Dispatch an action that replaces the selected slice with the next state.</td>
</tr>
</tbody>
</table>
### Example
```typescript
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { reduxStateStore } from "@json-render/redux";
import { StateProvider } from "@json-render/react";
const uiSlice = createSlice({
name: "ui",
initialState: { count: 0 } as Record<string, unknown>,
reducers: {
replaceUiState: (_state, action) => action.payload,
},
});
const reduxStore = configureStore({
reducer: { ui: uiSlice.reducer },
});
const store = reduxStateStore({
store: reduxStore,
selector: (state) => state.ui,
dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
});
```
```tsx
<StateProvider store={store}>
{/* json-render reads/writes go through Redux */}
</StateProvider>
```
## Re-exports
<table>
<thead>
<tr>
<th>Export</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>StateStore</code></td>
<td><code>@json-render/core</code></td>
</tr>
</tbody>
</table>
================================================
FILE: apps/web/app/(main)/docs/api/remotion/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/remotion")
# @json-render/remotion
Remotion video renderer. Turn JSON timeline specs into video compositions.
## schema
The timeline schema for video specs. Use with `defineCatalog` from core.
```typescript
import { defineCatalog } from '@json-render/core';
import { schema, standardComponentDefinitions } from '@json-render/remotion';
const catalog = defineCatalog(schema, {
components: standardComponentDefinitions,
transitions: standardTransitionDefinitions,
effects: standardEffectDefinitions,
});
```
## Renderer
The main composition component that renders timeline specs. Use with Remotion's Player or in a Remotion project.
```tsx
import { Player } from '@remotion/player';
import { Renderer } from '@json-render/remotion';
function VideoPlayer({ spec }) {
return (
<Player
component={Renderer}
inputProps={{ spec }}
durationInFrames={spec.composition.durationInFrames}
fps={spec.composition.fps}
compositionWidth={spec.composition.width}
compositionHeight={spec.composition.height}
controls
/>
);
}
```
### Custom Components
Pass custom components to the Renderer:
```tsx
import { Renderer, standardComponents } from '@json-render/remotion';
const customComponents = {
...standardComponents,
MyCustomClip: ({ clip }) => <div>{clip.props.text}</div>,
};
<Player
component={Renderer}
inputProps={{ spec, components: customComponents }}
// ...
/>
```
## Standard Components
Pre-built video components included in the package:
```typescript
import {
TitleCard, // Full-screen title with subtitle
ImageSlide, // Full-screen image display
SplitScreen, // Two-column layout
QuoteCard, // Quote with attribution
StatCard, // Large statistic display
LowerThird, // Name/title overlay
TextOverlay, // Centered text overlay
TypingText, // Terminal typing animation
LogoBug, // Corner logo watermark
VideoClip, // Video playback
} from '@json-render/remotion';
```
### TitleCard Props
```typescript
{
title: string;
subtitle?: string;
backgroundColor?: string; // default: "#1a1a1a"
textColor?: string; // default: "#ffffff"
}
```
### TypingText Props
```typescript
{
text: string;
charsPerSecond?: number; // default: 15
showCursor?: boolean; // default: true
cursorChar?: string; // default: "|"
fontFamily?: string; // default: "monospace"
fontSize?: number; // default: 48
textColor?: string; // default: "#00ff00"
backgroundColor?: string; // default: "#1e1e1e"
}
```
## Catalog Definitions
Pre-built definitions for creating catalogs:
```typescript
import {
standardComponentDefinitions, // All standard component definitions
standardTransitionDefinitions, // fade, slideLeft, slideRight, etc.
standardEffectDefinitions, // kenBurns, pulseGlow, colorShift
} from '@json-render/remotion';
// Use in your catalog
const catalog = defineCatalog(schema, {
components: {
...standardComponentDefinitions,
// Add custom components
},
transitions: standardTransitionDefinitions,
effects: standardEffectDefinitions,
});
```
## Hooks & Utilities
### useTransition
Calculate transition styles for a clip based on current frame:
```typescript
import { useTransition } from '@json-render/remotion';
import { useCurrentFrame } from 'remotion';
function MyComponent({ clip }) {
const frame = useCurrentFrame();
const transition = useTransition(clip, frame);
return (
<div style={{
opacity: transition.opacity,
transform: transition.transform,
}}>
Content
</div>
);
}
```
### ClipWrapper
Automatically apply transitions to clip content:
```tsx
import { ClipWrapper } from '@json-render/remotion';
function MyClip({ clip }) {
return (
<ClipWrapper clip={clip}>
<div>My content with automatic transitions</div>
</ClipWrapper>
);
}
```
## Types
### TimelineSpec
```typescript
interface TimelineSpec {
composition: {
id: string;
fps: number;
width: number;
height: number;
durationInFrames: number;
};
tracks: Track[];
clips: Clip[];
audio: {
tracks: AudioTrack[];
};
}
```
### Clip
```typescript
interface Clip {
id: string;
trackId: string;
component: string;
props: Record<string, unknown>;
from: number;
durationInFrames: number;
transitionIn?: {
type: string;
durationInFrames: number;
};
transitionOut?: {
type: string;
durationInFrames: number;
};
}
```
### TransitionStyles
```typescript
interface TransitionStyles {
opacity: number;
transform: string;
}
```
### ComponentRegistry
```typescript
type ClipComponent = React.ComponentType<{ clip: Clip }>;
type ComponentRegistry = Record<string, ClipComponent>;
```
## Transitions
Available transition types:
- `fade` - Opacity fade in/out
- `slideLeft` - Slide from right
- `slideRight` - Slide from left
- `slideUp` - Slide from bottom
- `slideDown` - Slide from top
- `zoom` - Scale zoom in/out
- `wipe` - Horizontal wipe
================================================
FILE: apps/web/app/(main)/docs/api/shadcn/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/shadcn")
# @json-render/shadcn
Pre-built [shadcn/ui](https://ui.shadcn.com/) components for json-render. 36 components built on Radix UI + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
## Installation
```bash
npm install @json-render/shadcn @json-render/core @json-render/react zod
```
Your app must have Tailwind CSS configured.
## Entry Points
<table>
<thead>
<tr>
<th>Entry Point</th>
<th>Exports</th>
<th>Use For</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@json-render/shadcn</code></td>
<td><code>shadcnComponents</code></td>
<td>React implementations</td>
</tr>
<tr>
<td><code>@json-render/shadcn/catalog</code></td>
<td><code>shadcnComponentDefinitions</code></td>
<td>Catalog schemas (no React dependency, safe for server)</td>
</tr>
</tbody>
</table>
## Usage
Pick the components you need from the standard definitions:
```typescript
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
// Catalog: pick definitions
const catalog = defineCatalog(schema, {
components: {
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Heading: shadcnComponentDefinitions.Heading,
Button: shadcnComponentDefinitions.Button,
Input: shadcnComponentDefinitions.Input,
},
actions: {},
});
// Registry: pick matching implementations
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Heading: shadcnComponents.Heading,
Button: shadcnComponents.Button,
Input: shadcnComponents.Input,
},
});
```
State actions (`setState`, `pushState`, `removeState`) are built into the React schema and handled by `ActionProvider` automatically. You don't need to declare them in your catalog.
## Extending with Custom Components
Add custom components alongside standard ones:
```typescript
import { z } from "zod";
const catalog = defineCatalog(schema, {
components: {
// Standard
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Button: shadcnComponentDefinitions.Button,
// Custom
Metric: {
props: z.object({
label: z.string(),
value: z.string(),
trend: z.enum(["up", "down", "neutral"]).nullable(),
}),
description: "KPI metric display",
},
},
actions: {},
});
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Button: shadcnComponents.Button,
Metric: ({ props }) => (
<div>
<span>{props.label}</span>
<span>{props.value}</span>
</div>
),
},
});
```
## Available Components
### Layout
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Card</code></td>
<td>Container card with optional title, description, maxWidth, centered</td>
</tr>
<tr>
<td><code>Stack</code></td>
<td>Flex container with direction, gap, align, justify</td>
</tr>
<tr>
<td><code>Grid</code></td>
<td>Grid layout with columns (1-6) and gap</td>
</tr>
<tr>
<td><code>Separator</code></td>
<td>Visual separator line with orientation</td>
</tr>
</tbody>
</table>
### Navigation
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Tabs</code></td>
<td>Tabbed navigation with tabs array, defaultValue, value</td>
</tr>
<tr>
<td><code>Accordion</code></td>
<td>Collapsible sections with items array and type (single/multiple)</td>
</tr>
<tr>
<td><code>Collapsible</code></td>
<td>Single collapsible section with title and defaultOpen</td>
</tr>
<tr>
<td><code>Pagination</code></td>
<td>Page navigation with totalPages and page</td>
</tr>
</tbody>
</table>
### Overlay
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Dialog</code></td>
<td>Modal dialog with title, description, openPath</td>
</tr>
<tr>
<td><code>Drawer</code></td>
<td>Bottom drawer with title, description, openPath</td>
</tr>
<tr>
<td><code>Tooltip</code></td>
<td>Hover tooltip with content and text</td>
</tr>
<tr>
<td><code>Popover</code></td>
<td>Click-triggered popover with trigger and content</td>
</tr>
<tr>
<td><code>DropdownMenu</code></td>
<td>Dropdown menu with label and items array</td>
</tr>
</tbody>
</table>
### Content
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Heading</code></td>
<td>Heading text with level (h1-h4)</td>
</tr>
<tr>
<td><code>Text</code></td>
<td>Paragraph with variant (body, caption, muted, lead, code)</td>
</tr>
<tr>
<td><code>Image</code></td>
<td>Image with alt, width, height</td>
</tr>
<tr>
<td><code>Avatar</code></td>
<td>User avatar with src, name, size</td>
</tr>
<tr>
<td><code>Badge</code></td>
<td>Status badge with text and variant</td>
</tr>
<tr>
<td><code>Alert</code></td>
<td>Alert banner with title, message, type</td>
</tr>
<tr>
<td><code>Carousel</code></td>
<td>Horizontally scrollable carousel with items</td>
</tr>
<tr>
<td><code>Table</code></td>
<td>Data table with columns and rows</td>
</tr>
</tbody>
</table>
### Feedback
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Progress</code></td>
<td>Progress bar with value, max, label</td>
</tr>
<tr>
<td><code>Skeleton</code></td>
<td>Loading placeholder with width, height, rounded</td>
</tr>
<tr>
<td><code>Spinner</code></td>
<td>Loading spinner with size and label</td>
</tr>
</tbody>
</table>
### Input
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Button</code></td>
<td>Clickable button with label, variant, disabled</td>
</tr>
<tr>
<td><code>Link</code></td>
<td>Anchor link with label and href</td>
</tr>
<tr>
<td><code>Input</code></td>
<td>Text input with label, name, type, placeholder, value, checks</td>
</tr>
<tr>
<td><code>Textarea</code></td>
<td>Multi-line text input with label, name, placeholder, rows, value, checks</td>
</tr>
<tr>
<td><code>Select</code></td>
<td>Dropdown select with label, name, options, value, checks</td>
</tr>
<tr>
<td><code>Checkbox</code></td>
<td>Checkbox with label, name, checked</td>
</tr>
<tr>
<td><code>Radio</code></td>
<td>Radio button group with label, name, options, value</td>
</tr>
<tr>
<td><code>Switch</code></td>
<td>Toggle switch with label, name, checked</td>
</tr>
<tr>
<td><code>Slider</code></td>
<td>Range slider with label, min, max, step, value</td>
</tr>
<tr>
<td><code>Toggle</code></td>
<td>Toggle button with label, pressed, variant</td>
</tr>
<tr>
<td><code>ToggleGroup</code></td>
<td>Group of toggle buttons with items, type, value</td>
</tr>
<tr>
<td><code>ButtonGroup</code></td>
<td>Group of buttons with buttons array and selected</td>
</tr>
</tbody>
</table>
## Notes
- The `/catalog` entry point has no React dependency -- use it for server-side prompt generation
- Components use Tailwind CSS classes -- your app must have Tailwind configured
- Component implementations use bundled shadcn/ui primitives (not your app's `components/ui/`)
- Form inputs support `checks` for validation (type + message pairs)
- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`
================================================
FILE: apps/web/app/(main)/docs/api/solid/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata";
export const metadata = pageMetadata("docs/api/solid");
# @json-render/solid
SolidJS components, providers, and hooks for rendering json-render specs.
## Installation
<PackageInstall packages="@json-render/core @json-render/solid" />
Peer dependencies: `solid-js ^1.9.0` and `zod ^4.0.0`.
<PackageInstall packages="solid-js zod" />
## Providers
### StateProvider
```tsx
<StateProvider
initialState={{}}
onStateChange={(changes) => console.log(changes)}
>
{/* children */}
</StateProvider>
```
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>store</code>
</td>
<td>
<code>StateStore</code>
</td>
<td>
External store (controlled mode). When provided,{" "}
<code>initialState</code> and <code>onStateChange</code> are ignored.
</td>
</tr>
<tr>
<td>
<code>initialState</code>
</td>
<td>
<code>Record<string, unknown></code>
</td>
<td>Initial state model for uncontrolled mode.</td>
</tr>
<tr>
<td>
<code>onStateChange</code>
</td>
<td>
<code>
{"(changes: Array<{ path: string; value: unknown }>) => void"}
</code>
</td>
<td>Called for uncontrolled state updates.</td>
</tr>
</tbody>
</table>
### ActionProvider
```tsx
<ActionProvider
handlers={{ submit: async (params) => {} }}
navigate={(path) => {}}
>
{/* children */}
</ActionProvider>
```
### VisibilityProvider
```tsx
<VisibilityProvider>{/* children */}</VisibilityProvider>
```
### ValidationProvider
```tsx
<ValidationProvider customFunctions={{ custom: (value) => Boolean(value) }}>
{/* children */}
</ValidationProvider>
```
### JSONUIProvider
Combined provider wrapper for state, visibility, validation, and actions.
```tsx
<JSONUIProvider
registry={registry}
initialState={{}}
handlers={handlers}
validationFunctions={validationFunctions}
>
<Renderer spec={spec} registry={registry} />
</JSONUIProvider>
```
## defineRegistry
Create a typed component registry and action helpers from a catalog.
```tsx
const { registry, handlers, executeAction } = defineRegistry(catalog, {
components: {
Card: (renderProps) => <div>{renderProps.children}</div>,
Button: (renderProps) => (
<button onClick={() => renderProps.emit("press")}>
{renderProps.element.props.label as string}
</button>
),
},
actions: {
submit: async (params, setState, state) => {
// custom action logic
},
},
});
```
## Components
### Renderer
```tsx
<Renderer spec={spec} registry={registry} loading={false} />
```
Renders a `Spec` tree using your registry.
### createRenderer
Build an app-level renderer from catalog + components:
```tsx
const AppRenderer = createRenderer(catalog, {
Card: (renderProps) => <div>{renderProps.children}</div>,
});
<AppRenderer spec={spec} state={{}} onAction={(name, params) => {}} />;
```
## Hooks
- `useStateStore()`
- `useStateValue(path)` - returns an accessor
- `useStateBinding(path)` - returns `[Accessor<T | undefined>, setValue]`
- `useVisibility()` / `useIsVisible(condition)`
- `useActions()` / `useAction(binding)`
- `useValidation()` / `useOptionalValidation()`
- `useFieldValidation(path, config)` - returns accessor-backed `state`, `errors`, and `isValid`
- `useBoundProp(value, bindingPath)`
- `useUIStream(options)`
- `useChatUI(options)`
## Built-in Actions
`ActionProvider` handles these built-in actions:
- `setState`
- `pushState`
- `removeState`
- `validateForm`
## Component Props
Registry components receive:
```ts
interface ComponentRenderProps<P = Record<string, unknown>> {
element: UIElement<string, P>;
children?: JSX.Element;
emit: (event: string) => void;
on: (event: string) => EventHandle;
bindings?: Record<string, string>;
loading?: boolean;
}
```
Use `emit("event")` to dispatch event bindings. Use `on("event")` to access `EventHandle` metadata (`bound`, `shouldPreventDefault`, `emit`).
## Reactivity Notes
- Keep changing reads in JSX expressions, `createMemo`, or `createEffect`.
- Avoid props destructuring in component signatures when you need live updates.
- `StateProvider` and other contexts expose getter-backed values so consumers read live signals.
- `useStateValue`, `useStateBinding`, and `useFieldValidation` expose reactive accessors; call them as functions.
================================================
FILE: apps/web/app/(main)/docs/api/svelte/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/svelte")
# @json-render/svelte
Svelte 5 components, providers, and helpers for rendering json-render specs.
## Installation
<PackageInstall packages="@json-render/core @json-render/svelte" />
Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
<PackageInstall packages="svelte zod" />
## Components
### Renderer
```svelte
<Renderer
spec={spec} // Spec | null
registry={registry}
loading={false}
/>
```
Renders a spec with your component registry. If `spec` is `null`, it renders nothing.
### JsonUIProvider
Convenience wrapper around `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`.
```svelte
<JsonUIProvider
initialState={{}}
handlers={handlers}
validationFunctions={validationFunctions}
>
<Renderer {spec} {registry} />
</JsonUIProvider>
```
## defineRegistry
Create a typed component registry and action handlers from a catalog.
```typescript
import { defineRegistry } from "@json-render/svelte";
const { registry, handlers, executeAction } = defineRegistry(catalog, {
components: {
Card,
Button,
},
actions: {
submit: async (params, setState, state) => {
// custom action logic
},
},
});
```
`handlers` is designed for `JsonUIProvider`/`ActionProvider`. `executeAction` is an imperative helper.
## Component Props
Registry components receive `BaseComponentProps<TProps>`:
```typescript
interface BaseComponentProps<TProps> {
props: TProps;
children?: Snippet;
emit: (event: string) => void;
bindings?: Record<string, string>;
loading?: boolean;
}
```
Use `emit("eventName")` to trigger handlers declared in the spec `on` bindings.
## Context Helpers
Use these helpers inside Svelte components:
- `getStateValue(path)` - read/write state via `.current`
- `getBoundProp(() => value, () => bindingPath)` - write back resolved `$bindState` / `$bindItem` values
- `isVisible(condition)` - evaluate visibility via `.current`
- `getAction(name)` - read a registered action handler via `.current`
- `getFieldValidation(ctx, path, config)` - get field validation state + actions
For advanced usage, access full contexts:
- `getStateContext()`
- `getActionContext()`
- `getVisibilityContext()`
- `getValidationContext()`
- `getOptionalValidationContext()`
## Streaming
### createUIStream
```typescript
const stream = createUIStream({
api: "/api/generate-ui",
onComplete: (spec) => console.log(spec),
});
await stream.send("Create a login form");
console.log(stream.spec);
console.log(stream.isStreaming);
```
### createChatUI
```typescript
const chat = createChatUI({ api: "/api/chat-ui" });
await chat.send("Build a settings panel");
console.log(chat.messages, chat.isStreaming);
```
## Schema Export
Use `schema` from `@json-render/svelte` when defining catalogs for Svelte specs.
================================================
FILE: apps/web/app/(main)/docs/api/vue/page.mdx
================================================
import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/vue")
# @json-render/vue
Vue 3 components, providers, and composables.
## Providers
### StateProvider
```vue
<StateProvider :initial-state="object" :on-state-change="fn">
<!-- children -->
</StateProvider>
```
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>store</code></td>
<td><code>StateStore</code></td>
<td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
</tr>
<tr>
<td><code>initialState</code></td>
<td><code>Record<string, unknown></code></td>
<td>Initial state model (uncontrolled mode).</td>
</tr>
<tr>
<td><code>onStateChange</code></td>
<td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
<td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
</tr>
</tbody>
</table>
#### External Store (Controlled Mode)
Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
```typescript
import { createStateStore, type StateStore } from "@json-render/vue";
const store = createStateStore({ count: 0 });
```
```vue
<StateProvider :store="store">
<!-- children -->
</StateProvider>
```
```typescript
// Mutate from anywhere — Vue re-renders automatically:
store.set("/count", 1);
```
### ActionProvider
```vue
<ActionProvider :handlers="Record<string, ActionHandler>" :navigate="fn">
<!-- children -->
</ActionProvider>
// type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;
```
### VisibilityProvider
```vue
<VisibilityProvider>
<!-- children -->
</VisibilityProvider>
```
`VisibilityProvider` reads state from the parent `StateProvider` automatically. Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
### ValidationProvider
```vue
<ValidationProvider :custom-functions="Record<string, ValidationFunction>">
<!-- children -->
</ValidationProvider>
// type ValidationFunction = (value: unknown, args?: object) => boolean | Promise<boolean>;
```
## defineRegistry
Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, `on`, and `loading` with catalog-inferred types.
When the catalog declares actions, the `actions` field is required. When the catalog has no actions (e.g. `actions: {}`), the field is optional. When passing stubs, any `async () => {}` is sufficient.
```typescript
import { h } from "vue";
import { defineRegistry } from "@json-render/vue";
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) =>
h("div", { class: "card" }, [h("h3", null, props.title), children]),
Button: ({ props, emit }) =>
h("button", { onClick: () => emit("press") }, props.label),
},
// Required when catalog declares actions:
actions: {
submit: async (params) => { /* ... */ },
},
});
// Pass to <Renderer>
// <Renderer :spec="spec" :registry="registry" />
```
## Components
### Renderer
```vue
<Renderer
:spec="Spec" // The UI spec to render
:registry="Registry" // Component registry (from defineRegistry)
:loading="boolean" // Optional loading state
:fallback="Component" // Optional fallback for unknown types
/>
```
### Component Props (via defineRegistry)
```typescript
import type { VNode } from "vue";
interface ComponentContext<P> {
props: P; // Typed props from catalog
children?: VNode | VNode[]; // Rendered children (for container components)
emit: (event: string) => void; // Emit a named event (always defined)
on: (event: string) => EventHandle; // Get event handle with metadata
loading?: boolean;
bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
}
interface EventHandle {
emit: () => void; // Fire the event
shouldPreventDefault: boolean; // Whether any binding requested preventDefault
bound: boolean; // Whether any handler is bound
}
```
Use `emit("press")` for simple event firing. Use `on("click")` when you need metadata like `shouldPreventDefault`:
```typescript
Link: ({ props, on }) => {
const click = on("click");
return h("a", {
href: props.href,
onClick: (e: MouseEvent) => {
if (click.shouldPreventDefault) e.preventDefault();
click.emit();
},
}, props.label);
},
```
### BaseComponentProps
Catalog-agnostic base type for building reusable component libraries that are not tied to a specific catalog:
```typescript
import type { BaseComponentProps } from "@json-render/vue";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
h("div", null, [props.title, children]);
```
## Composables
### useStateStore
```typescript
const {
state, // ShallowRef<StateModel> — access with state.value
get, // (path: string) => unknown
set, // (path: string, value: unknown) => void
update, // (updates: Record<string, unknown>) => void
} = useStateStore();
```
> **Note:** `state` is a `ShallowRef<StateModel>`, not a plain object. Use `state.value` to read the current state. This differs from the React renderer.
### useStateValue
```typescript
const value = useStateValue(path: string); // ComputedRef<T | undefined>
```
Returns a `ComputedRef` that automatically updates when the state at `path` changes. Use `.value` to access the current value.
### useStateBinding (deprecated)
> **Deprecated.** Use `$bindState` expressions with `bindings` prop instead.
```typescript
const [value, setValue] = useStateBinding(path: string);
// value: ComputedRef<T | undefined>
// setValue: (value: T) => void
```
### useActions
```typescript
const { execute } = useActions();
// execute(binding: ActionBinding) => Promise<void>
```
### useAction
```typescript
const { execute, isLoading } = useAction(binding: ActionBinding);
// execute: () => Promise<void>
// isLoading: ComputedRef<boolean>
```
### useIsVisible
```typescript
const isVisible = useIsVisible(condition?: VisibilityCondition);
```
### useFieldValidation
```typescript
const {
state, // ComputedRef<FieldValidationState>
validate, // () => ValidationResult
touch, // () => void
clear, // () => void
errors, // ComputedRef<string[]>
isValid, // ComputedRef<boolean>
} = useFieldValidation(path: string, config?: ValidationConfig);
```
`ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
## Differences from `@json-render/react`
<table>
<thead>
<tr>
<th>API</th>
<th>React</th>
<th>Vue</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>useStateStore().state</code></td>
<td><code>StateModel</code> (plain object)</td>
<td><code>ShallowRef<StateModel></code></td>
<td>Vue reactivity; use <code>state.value</code></td>
</tr>
<tr>
<td><code>useStateValue()</code></td>
<td><code>T | undefined</code></td>
<td><code>ComputedRef<T | undefined></code></td>
<td>Vue reactivity; use <code>.value</code></td>
</tr>
<tr>
<td><code>useStateBinding()</code></td>
<td><code>[T | undefined, setter]</code></td>
<td><code>[ComputedRef<T | undefined>, setter]</code></td>
<td>Vue reactivity; use <code>value.value</code></td>
</tr>
<tr>
<td><code>useAction().isLoading</code></td>
<td><code>boolean</code></td>
<td><code>ComputedRef<boolean></code></td>
<td>Vue reactivity; use <code>.value</code></td>
</tr>
<tr>
<td><code>useFieldValidation().state</code></td>
<td><code>FieldValidationState</code></td>
<td><code>ComputedRef<FieldValidationState></code></td>
<td>Vue reactivity; use <code>.value</code></td>
</tr>
<tr>
<td><code>useFieldValidation().errors</code></td>
<td><code>string[]</code></td>
<td><code>ComputedRef<string[]></code></td>
<td>Vue reactivity; use <code>.value</code></td>
</tr>
<tr>
<td><code>useFieldValidation().isValid</code></td>
<td><code>boolean</code></td>
<td><code>ComputedRef<boolean></code></td>
<td>Vue reactivity; use <code>.value</code></td>
</tr>
<tr>
<td><code>VisibilityContextValue.ctx</code></td>
<td><code>CoreVisibilityContext</code></td>
<td><code>ComputedRef<CoreVisibilityContext></code></td>
<td>Vue reactivity; use <code>ctx.value</code></td>
</tr>
<tr>
<td><code>children</code> type</td>
<td><code>React.ReactNode</code></td>
<td><code>VNode | VNode[]</code></td>
<td>Platform-specific</td>
</tr>
<tr>
<td><code>useBoundProp</code></td>
<td>exported</td>
<td>exported</td>
<td>Same API; returns <code>[value, setValue]</code></td>
</tr>
<tr>
<td><code>VisibilityProviderProps</code></td>
<td>exported</td>
<td>not exported (no props)</td>
<td>Vue uses slot, no prop needed</td>
</tr>
<tr>
<td>Streaming hooks</td>
<td><code>useUIStream</code>, <code>useChatUI</code></td>
<td><code>useUIStream</code>, <code>useChatUI</code></td>
<td>Same API; returns
gitextract_2q_khw51/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .cursor/ │ └── mcp.json ├── .github/ │ └── workflows/ │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .npmrc ├── .vscode/ │ └── mcp.json ├── AGENTS.md ├── LICENSE ├── README.md ├── apps/ │ └── web/ │ ├── .env.example │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── app/ │ │ ├── (main)/ │ │ │ ├── docs/ │ │ │ │ ├── a2ui/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── adaptive-cards/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── ag-ui/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── ai-sdk/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── api/ │ │ │ │ │ ├── codegen/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── core/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── image/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── jotai/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── mcp/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── react/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── react-email/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── react-native/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── react-pdf/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── react-three-fiber/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── redux/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── remotion/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── shadcn/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── solid/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── svelte/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── vue/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── xstate/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── yaml/ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ └── zustand/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── catalog/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── changelog/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── code-export/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── computed-values/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── custom-schema/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── data-binding/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── generation-modes/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── installation/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── layout.tsx │ │ │ │ ├── migration/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── openapi/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── page.mdx │ │ │ │ ├── quick-start/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── registry/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── renderers/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── schemas/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── skills/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── specs/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── streaming/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── validation/ │ │ │ │ │ └── page.mdx │ │ │ │ ├── visibility/ │ │ │ │ │ └── page.mdx │ │ │ │ └── watchers/ │ │ │ │ └── page.mdx │ │ │ ├── examples/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── api/ │ │ │ ├── docs-chat/ │ │ │ │ └── route.ts │ │ │ ├── docs-markdown/ │ │ │ │ └── route.ts │ │ │ ├── generate/ │ │ │ │ └── route.ts │ │ │ └── search/ │ │ │ └── route.ts │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── not-found.tsx │ │ ├── og/ │ │ │ ├── [...slug]/ │ │ │ │ └── route.tsx │ │ │ ├── og-image.tsx │ │ │ └── route.tsx │ │ └── playground/ │ │ ├── layout.tsx │ │ └── page.tsx │ ├── components/ │ │ ├── code-block.tsx │ │ ├── code-tabs.tsx │ │ ├── code.tsx │ │ ├── copy-button.tsx │ │ ├── copy-page-button.tsx │ │ ├── demo.tsx │ │ ├── docs-chat.tsx │ │ ├── docs-mobile-nav.tsx │ │ ├── docs-sidebar.tsx │ │ ├── expandable-code.tsx │ │ ├── generation-modes-diagram.tsx │ │ ├── header.tsx │ │ ├── package-install.tsx │ │ ├── playground.tsx │ │ ├── search.tsx │ │ ├── table-of-contents.tsx │ │ ├── theme-provider.tsx │ │ ├── theme-toggle.tsx │ │ └── ui/ │ │ ├── accordion.tsx │ │ ├── alert.tsx │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── dialog.tsx │ │ ├── drawer.tsx │ │ ├── dropdown-menu.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── pagination.tsx │ │ ├── popover.tsx │ │ ├── progress.tsx │ │ ├── radio-group.tsx │ │ ├── resizable.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── sonner.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ └── tooltip.tsx │ ├── components.json │ ├── eslint.config.js │ ├── lib/ │ │ ├── docs-navigation.ts │ │ ├── examples.ts │ │ ├── mdx-to-markdown.ts │ │ ├── page-metadata.ts │ │ ├── page-titles.ts │ │ ├── rate-limit.ts │ │ ├── render/ │ │ │ ├── catalog-display.ts │ │ │ ├── catalog.ts │ │ │ ├── registry.tsx │ │ │ └── renderer.tsx │ │ ├── search-index.ts │ │ ├── spec-patch.ts │ │ ├── use-playground-stream.ts │ │ └── utils.ts │ ├── mdx-components.tsx │ ├── next.config.js │ ├── package.json │ ├── postcss.config.mjs │ └── tsconfig.json ├── examples/ │ ├── chat/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ └── generate/ │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ ├── theme-provider.tsx │ │ │ ├── theme-toggle.tsx │ │ │ └── ui/ │ │ │ ├── accordion.tsx │ │ │ ├── alert.tsx │ │ │ ├── badge.tsx │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ ├── chart.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── table.tsx │ │ │ └── tabs.tsx │ │ ├── eslint.config.js │ │ ├── lib/ │ │ │ ├── agent.ts │ │ │ ├── rate-limit.ts │ │ │ ├── render/ │ │ │ │ ├── catalog.ts │ │ │ │ ├── registry.tsx │ │ │ │ └── renderer.tsx │ │ │ ├── tools/ │ │ │ │ ├── crypto.ts │ │ │ │ ├── github.ts │ │ │ │ ├── hackernews.ts │ │ │ │ ├── search.ts │ │ │ │ └── weather.ts │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── dashboard/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ ├── generate/ │ │ │ │ │ └── route.ts │ │ │ │ └── v1/ │ │ │ │ ├── accounts/ │ │ │ │ │ ├── [id]/ │ │ │ │ │ │ └── route.ts │ │ │ │ │ └── route.ts │ │ │ │ ├── customers/ │ │ │ │ │ ├── [id]/ │ │ │ │ │ │ └── route.ts │ │ │ │ │ └── route.ts │ │ │ │ ├── expenses/ │ │ │ │ │ ├── [id]/ │ │ │ │ │ │ ├── approve/ │ │ │ │ │ │ │ └── route.ts │ │ │ │ │ │ ├── reject/ │ │ │ │ │ │ │ └── route.ts │ │ │ │ │ │ └── route.ts │ │ │ │ │ └── route.ts │ │ │ │ ├── invoices/ │ │ │ │ │ ├── [id]/ │ │ │ │ │ │ ├── mark-paid/ │ │ │ │ │ │ │ └── route.ts │ │ │ │ │ │ ├── route.ts │ │ │ │ │ │ └── send/ │ │ │ │ │ │ └── route.ts │ │ │ │ │ └── route.ts │ │ │ │ ├── reports/ │ │ │ │ │ ├── export/ │ │ │ │ │ │ └── route.ts │ │ │ │ │ └── profit-loss/ │ │ │ │ │ └── route.ts │ │ │ │ ├── reset/ │ │ │ │ │ └── route.ts │ │ │ │ └── widgets/ │ │ │ │ ├── [id]/ │ │ │ │ │ └── route.ts │ │ │ │ ├── reorder/ │ │ │ │ │ └── route.ts │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ ├── add-widget-card.tsx │ │ │ ├── code-highlight.tsx │ │ │ ├── header.tsx │ │ │ ├── sortable-widget.tsx │ │ │ ├── theme-provider.tsx │ │ │ ├── theme-toggle.tsx │ │ │ ├── ui/ │ │ │ │ ├── accordion.tsx │ │ │ │ ├── alert.tsx │ │ │ │ ├── animated-border.tsx │ │ │ │ ├── avatar.tsx │ │ │ │ ├── badge.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── chart.tsx │ │ │ │ ├── checkbox.tsx │ │ │ │ ├── dialog.tsx │ │ │ │ ├── drawer.tsx │ │ │ │ ├── dropdown-menu.tsx │ │ │ │ ├── input.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── pagination.tsx │ │ │ │ ├── popover.tsx │ │ │ │ ├── progress.tsx │ │ │ │ ├── radio-group.tsx │ │ │ │ ├── select.tsx │ │ │ │ ├── separator.tsx │ │ │ │ ├── skeleton.tsx │ │ │ │ ├── switch.tsx │ │ │ │ ├── table.tsx │ │ │ │ ├── tabs.tsx │ │ │ │ ├── textarea.tsx │ │ │ │ └── tooltip.tsx │ │ │ └── widget.tsx │ │ ├── components.json │ │ ├── drizzle.config.ts │ │ ├── eslint.config.js │ │ ├── lib/ │ │ │ ├── db/ │ │ │ │ ├── connection.ts │ │ │ │ ├── schema.ts │ │ │ │ └── store.ts │ │ │ ├── rate-limit.ts │ │ │ ├── render/ │ │ │ │ ├── catalog.ts │ │ │ │ ├── registry.tsx │ │ │ │ └── renderer.tsx │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ ├── scripts/ │ │ │ ├── clear.ts │ │ │ └── seed.ts │ │ └── tsconfig.json │ ├── image/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ ├── generate/ │ │ │ │ │ └── route.ts │ │ │ │ └── image/ │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ └── ui/ │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ └── sheet.tsx │ │ ├── components.json │ │ ├── eslint.config.js │ │ ├── lib/ │ │ │ ├── catalog.ts │ │ │ ├── examples.ts │ │ │ ├── rate-limit.ts │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── mcp/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── server.ts │ │ ├── src/ │ │ │ ├── catalog.ts │ │ │ ├── globals.css │ │ │ ├── main.tsx │ │ │ └── mcp-app-view.tsx │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── no-ai/ │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── eslint.config.js │ │ ├── lib/ │ │ │ ├── examples.ts │ │ │ └── render/ │ │ │ ├── catalog.ts │ │ │ └── registry.tsx │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── react-email/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ ├── email/ │ │ │ │ │ └── route.ts │ │ │ │ └── generate/ │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ └── ui/ │ │ │ ├── button.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── tabs.tsx │ │ │ └── textarea.tsx │ │ ├── components.json │ │ ├── lib/ │ │ │ ├── catalog.ts │ │ │ ├── examples.ts │ │ │ ├── rate-limit.ts │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── react-native/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── _layout.tsx │ │ │ ├── api/ │ │ │ │ └── generate+api.ts │ │ │ └── index.tsx │ │ ├── app.json │ │ ├── lib/ │ │ │ └── render/ │ │ │ ├── catalog.ts │ │ │ ├── registry.tsx │ │ │ └── renderer.tsx │ │ ├── metro.config.js │ │ ├── package.json │ │ └── tsconfig.json │ ├── react-pdf/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ ├── generate/ │ │ │ │ │ └── route.ts │ │ │ │ └── pdf/ │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ └── ui/ │ │ │ ├── button.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── tabs.tsx │ │ │ └── textarea.tsx │ │ ├── components.json │ │ ├── lib/ │ │ │ ├── catalog.ts │ │ │ ├── examples.ts │ │ │ ├── rate-limit.ts │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── react-three-fiber/ │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── scenes/ │ │ │ ├── _helpers.ts │ │ │ ├── clockwork-orrery.ts │ │ │ ├── deep-sea-abyss.ts │ │ │ ├── floating-islands.ts │ │ │ ├── hyperspace-tunnel.ts │ │ │ ├── index.ts │ │ │ ├── mystify.ts │ │ │ ├── orbital-chaos.ts │ │ │ ├── perpetual-motion.ts │ │ │ ├── pipes.ts │ │ │ ├── portal-gallery.ts │ │ │ ├── product-showroom.ts │ │ │ ├── starfield.ts │ │ │ └── storm-cell.ts │ │ ├── eslint.config.js │ │ ├── next-env.d.ts │ │ ├── next.config.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── remotion/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── app/ │ │ │ ├── api/ │ │ │ │ └── generate/ │ │ │ │ └── route.ts │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── lib/ │ │ │ ├── catalog.ts │ │ │ ├── rate-limit.ts │ │ │ └── utils.ts │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ └── tsconfig.json │ ├── solid/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.tsx │ │ │ ├── DemoRenderer.tsx │ │ │ ├── app.css │ │ │ ├── index.tsx │ │ │ └── lib/ │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ ├── Badge.tsx │ │ │ │ ├── Button.tsx │ │ │ │ ├── Card.tsx │ │ │ │ ├── Input.tsx │ │ │ │ ├── ListItem.tsx │ │ │ │ ├── Stack.tsx │ │ │ │ └── Text.tsx │ │ │ ├── registry.tsx │ │ │ └── spec.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── stripe-app/ │ │ ├── README.md │ │ ├── api/ │ │ │ ├── .env.example │ │ │ ├── README.md │ │ │ ├── app/ │ │ │ │ ├── api/ │ │ │ │ │ └── generate/ │ │ │ │ │ └── route.ts │ │ │ │ ├── layout.tsx │ │ │ │ └── page.tsx │ │ │ ├── next-env.d.ts │ │ │ ├── next.config.ts │ │ │ ├── package.json │ │ │ └── tsconfig.json │ │ ├── drawer-app/ │ │ │ ├── .env.example │ │ │ ├── CHANGELOG.md │ │ │ ├── README.md │ │ │ ├── eslint.config.js │ │ │ ├── jest.config.js │ │ │ ├── package.json │ │ │ ├── scripts/ │ │ │ │ └── setup.mjs │ │ │ ├── src/ │ │ │ │ ├── lib/ │ │ │ │ │ ├── config.ts │ │ │ │ │ ├── render/ │ │ │ │ │ │ ├── catalog/ │ │ │ │ │ │ │ ├── actions.ts │ │ │ │ │ │ │ └── components.tsx │ │ │ │ │ │ ├── catalog.ts │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── renderer.tsx │ │ │ │ │ ├── stream-spec.ts │ │ │ │ │ └── stripe.ts │ │ │ │ └── views/ │ │ │ │ ├── CustomerDetails.test.tsx │ │ │ │ ├── CustomerDetails.tsx │ │ │ │ ├── Customers.test.tsx │ │ │ │ ├── Customers.tsx │ │ │ │ ├── Home.test.tsx │ │ │ │ ├── Home.tsx │ │ │ │ ├── Invoices.tsx │ │ │ │ ├── PaymentDetails.tsx │ │ │ │ ├── Payments.tsx │ │ │ │ ├── Products.tsx │ │ │ │ └── Subscriptions.tsx │ │ │ ├── stripe-app.template.json │ │ │ ├── tsconfig.json │ │ │ └── ui-extensions.d.ts │ │ └── fullpage-app/ │ │ ├── .env.example │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── scripts/ │ │ │ └── setup.mjs │ │ ├── src/ │ │ │ ├── lib/ │ │ │ │ ├── config.ts │ │ │ │ ├── render/ │ │ │ │ │ ├── catalog/ │ │ │ │ │ │ ├── actions.ts │ │ │ │ │ │ └── components.tsx │ │ │ │ │ ├── catalog.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── renderer.tsx │ │ │ │ ├── stream-spec.ts │ │ │ │ └── stripe.ts │ │ │ └── views/ │ │ │ └── FullPage.tsx │ │ ├── stripe-app.template.json │ │ ├── tsconfig.json │ │ └── ui-extensions.d.ts │ ├── svelte/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.svelte │ │ │ ├── DemoRenderer.svelte │ │ │ ├── app.css │ │ │ ├── lib/ │ │ │ │ ├── catalog.ts │ │ │ │ ├── components/ │ │ │ │ │ ├── Badge.svelte │ │ │ │ │ ├── Button.svelte │ │ │ │ │ ├── Card.svelte │ │ │ │ │ ├── Input.svelte │ │ │ │ │ ├── ListItem.svelte │ │ │ │ │ ├── Stack.svelte │ │ │ │ │ └── Text.svelte │ │ │ │ ├── registry.ts │ │ │ │ └── spec.ts │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── svelte-chat/ │ │ ├── .env.example │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── components.json │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app.css │ │ │ ├── app.d.ts │ │ │ ├── app.html │ │ │ ├── lib/ │ │ │ │ ├── agent.ts │ │ │ │ ├── components/ │ │ │ │ │ └── ui/ │ │ │ │ │ ├── accordion/ │ │ │ │ │ │ ├── accordion-content.svelte │ │ │ │ │ │ ├── accordion-item.svelte │ │ │ │ │ │ ├── accordion-trigger.svelte │ │ │ │ │ │ ├── accordion.svelte │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── alert/ │ │ │ │ │ │ ├── alert-description.svelte │ │ │ │ │ │ ├── alert-title.svelte │ │ │ │ │ │ ├── alert.svelte │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── badge/ │ │ │ │ │ │ ├── badge.svelte │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── button/ │ │ │ │ │ │ ├── button.svelte │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── card/ │ │ │ │ │ │ ├── card-action.svelte │ │ │ │ │ │ ├── card-content.svelte │ │ │ │ │ │ ├── card-description.svelte │ │ │ │ │ │ ├── card-footer.svelte │ │ │ │ │ │ ├── card-header.svelte │ │ │ │ │ │ ├── card-title.svelte │ │ │ │ │ │ ├── card.svelte │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── input/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── input.svelte │ │ │ │ │ ├── label/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── label.svelte │ │ │ │ │ ├── progress/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── progress.svelte │ │ │ │ │ ├── radio-group/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── radio-group-item.svelte │ │ │ │ │ │ └── radio-group.svelte │ │ │ │ │ ├── select/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── select-content.svelte │ │ │ │ │ │ ├── select-group-heading.svelte │ │ │ │ │ │ ├── select-group.svelte │ │ │ │ │ │ ├── select-item.svelte │ │ │ │ │ │ ├── select-label.svelte │ │ │ │ │ │ ├── select-portal.svelte │ │ │ │ │ │ ├── select-scroll-down-button.svelte │ │ │ │ │ │ ├── select-scroll-up-button.svelte │ │ │ │ │ │ ├── select-separator.svelte │ │ │ │ │ │ ├── select-trigger.svelte │ │ │ │ │ │ └── select.svelte │ │ │ │ │ ├── separator/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ └── separator.svelte │ │ │ │ │ ├── table/ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── table-body.svelte │ │ │ │ │ │ ├── table-caption.svelte │ │ │ │ │ │ ├── table-cell.svelte │ │ │ │ │ │ ├── table-footer.svelte │ │ │ │ │ │ ├── table-head.svelte │ │ │ │ │ │ ├── table-header.svelte │ │ │ │ │ │ ├── table-row.svelte │ │ │ │ │ │ └── table.svelte │ │ │ │ │ └── tabs/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── tabs-content.svelte │ │ │ │ │ ├── tabs-list.svelte │ │ │ │ │ ├── tabs-trigger.svelte │ │ │ │ │ └── tabs.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── rate-limit.ts │ │ │ │ ├── render/ │ │ │ │ │ ├── Renderer.svelte │ │ │ │ │ ├── catalog.ts │ │ │ │ │ ├── components/ │ │ │ │ │ │ ├── Accordion.svelte │ │ │ │ │ │ ├── Alert.svelte │ │ │ │ │ │ ├── Badge.svelte │ │ │ │ │ │ ├── BarChart.svelte │ │ │ │ │ │ ├── Button.svelte │ │ │ │ │ │ ├── Callout.svelte │ │ │ │ │ │ ├── Card.svelte │ │ │ │ │ │ ├── Grid.svelte │ │ │ │ │ │ ├── Heading.svelte │ │ │ │ │ │ ├── LineChart.svelte │ │ │ │ │ │ ├── Link.svelte │ │ │ │ │ │ ├── Metric.svelte │ │ │ │ │ │ ├── PieChart.svelte │ │ │ │ │ │ ├── Progress.svelte │ │ │ │ │ │ ├── RadioGroup.svelte │ │ │ │ │ │ ├── SelectInput.svelte │ │ │ │ │ │ ├── Separator.svelte │ │ │ │ │ │ ├── Skeleton.svelte │ │ │ │ │ │ ├── Stack.svelte │ │ │ │ │ │ ├── TabContent.svelte │ │ │ │ │ │ ├── Table.svelte │ │ │ │ │ │ ├── Tabs.svelte │ │ │ │ │ │ ├── Text.svelte │ │ │ │ │ │ ├── TextInput.svelte │ │ │ │ │ │ └── Timeline.svelte │ │ │ │ │ └── registry.ts │ │ │ │ ├── tools/ │ │ │ │ │ ├── crypto.ts │ │ │ │ │ ├── github.ts │ │ │ │ │ ├── hackernews.ts │ │ │ │ │ ├── search.ts │ │ │ │ │ └── weather.ts │ │ │ │ └── utils.ts │ │ │ └── routes/ │ │ │ ├── +layout.svelte │ │ │ ├── +page.svelte │ │ │ └── api/ │ │ │ └── generate/ │ │ │ └── +server.ts │ │ ├── static/ │ │ │ └── robots.txt │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── vite-renderers/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── main.ts │ │ │ ├── react/ │ │ │ │ ├── App.tsx │ │ │ │ ├── catalog.ts │ │ │ │ ├── mount.tsx │ │ │ │ └── registry.tsx │ │ │ ├── shared/ │ │ │ │ ├── catalog-def.ts │ │ │ │ ├── handlers.ts │ │ │ │ └── styles.css │ │ │ ├── solid/ │ │ │ │ ├── App.tsx │ │ │ │ ├── DemoRenderer.tsx │ │ │ │ ├── catalog.ts │ │ │ │ ├── mount.tsx │ │ │ │ └── registry.tsx │ │ │ ├── spec.ts │ │ │ ├── svelte/ │ │ │ │ ├── App.svelte │ │ │ │ ├── DemoRenderer.svelte │ │ │ │ ├── catalog.ts │ │ │ │ ├── components/ │ │ │ │ │ ├── Badge.svelte │ │ │ │ │ ├── Button.svelte │ │ │ │ │ ├── Card.svelte │ │ │ │ │ ├── Input.svelte │ │ │ │ │ ├── ListItem.svelte │ │ │ │ │ ├── RendererBadge.svelte │ │ │ │ │ ├── RendererTabs.svelte │ │ │ │ │ ├── Stack.svelte │ │ │ │ │ └── Text.svelte │ │ │ │ ├── mount.ts │ │ │ │ └── registry.ts │ │ │ └── vue/ │ │ │ ├── App.vue │ │ │ ├── DemoRenderer.vue │ │ │ ├── catalog.ts │ │ │ ├── mount.ts │ │ │ └── registry.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts │ └── vue/ │ ├── CHANGELOG.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── DemoRenderer.vue │ │ ├── lib/ │ │ │ ├── catalog.ts │ │ │ ├── registry.ts │ │ │ └── spec.ts │ │ └── main.ts │ ├── tsconfig.json │ └── vite.config.ts ├── package.json ├── packages/ │ ├── codegen/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── serialize.ts │ │ │ ├── traverse.test.ts │ │ │ ├── traverse.ts │ │ │ └── types.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── core/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── actions.test.ts │ │ │ ├── actions.ts │ │ │ ├── diff.ts │ │ │ ├── edit-modes.ts │ │ │ ├── env.d.ts │ │ │ ├── index.ts │ │ │ ├── merge.ts │ │ │ ├── prompt.ts │ │ │ ├── props.test.ts │ │ │ ├── props.ts │ │ │ ├── schema.test.ts │ │ │ ├── schema.ts │ │ │ ├── spec-validator.test.ts │ │ │ ├── spec-validator.ts │ │ │ ├── state-store.test.ts │ │ │ ├── state-store.ts │ │ │ ├── store-utils.ts │ │ │ ├── types.test.ts │ │ │ ├── types.ts │ │ │ ├── validation.test.ts │ │ │ ├── validation.ts │ │ │ ├── visibility.test.ts │ │ │ └── visibility.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── eslint-config/ │ │ ├── README.md │ │ ├── base.js │ │ ├── next.js │ │ ├── package.json │ │ └── react-internal.js │ ├── image/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ ├── index.ts │ │ │ │ └── standard.tsx │ │ │ ├── index.ts │ │ │ ├── render.test.tsx │ │ │ ├── render.tsx │ │ │ ├── schema.ts │ │ │ ├── server.ts │ │ │ └── types.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── jotai/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── mcp/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app.ts │ │ │ ├── build-app-html-entry.ts │ │ │ ├── build-app-html.ts │ │ │ ├── index.ts │ │ │ ├── server.ts │ │ │ ├── types.ts │ │ │ └── use-json-render-app.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── chained-actions.test.tsx │ │ │ ├── contexts/ │ │ │ │ ├── actions.tsx │ │ │ │ ├── repeat-scope.tsx │ │ │ │ ├── state.test.tsx │ │ │ │ ├── state.tsx │ │ │ │ ├── validation.tsx │ │ │ │ ├── visibility.test.tsx │ │ │ │ └── visibility.tsx │ │ │ ├── dynamic-forms.test.tsx │ │ │ ├── hooks.test.ts │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ ├── renderer.test.tsx │ │ │ ├── renderer.tsx │ │ │ └── schema.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react-email/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── __fixtures__/ │ │ │ │ └── examples.ts │ │ │ ├── catalog-types.ts │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ ├── index.ts │ │ │ │ └── standard.tsx │ │ │ ├── contexts/ │ │ │ │ ├── actions.tsx │ │ │ │ ├── repeat-scope.tsx │ │ │ │ ├── state.tsx │ │ │ │ ├── validation.tsx │ │ │ │ └── visibility.tsx │ │ │ ├── index.ts │ │ │ ├── render.test.tsx │ │ │ ├── render.tsx │ │ │ ├── renderer.tsx │ │ │ ├── schema.ts │ │ │ └── server.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react-native/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ └── standard.tsx │ │ │ ├── contexts/ │ │ │ │ ├── actions.tsx │ │ │ │ ├── repeat-scope.tsx │ │ │ │ ├── state.tsx │ │ │ │ ├── validation.tsx │ │ │ │ └── visibility.tsx │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ ├── renderer.tsx │ │ │ └── schema.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react-pdf/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ ├── index.ts │ │ │ │ └── standard.tsx │ │ │ ├── contexts/ │ │ │ │ ├── actions.tsx │ │ │ │ ├── repeat-scope.tsx │ │ │ │ ├── state.test.tsx │ │ │ │ ├── state.tsx │ │ │ │ ├── validation.tsx │ │ │ │ └── visibility.tsx │ │ │ ├── index.ts │ │ │ ├── render.tsx │ │ │ ├── renderer.tsx │ │ │ ├── schema.ts │ │ │ └── server.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react-state/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── env.d.ts │ │ │ ├── index.test.tsx │ │ │ └── index.tsx │ │ ├── tsconfig.json │ │ ├── tsup.config.ts │ │ └── vitest.config.ts │ ├── react-three-fiber/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog.ts │ │ │ ├── components.tsx │ │ │ ├── index.ts │ │ │ ├── r3f-jsx.d.ts │ │ │ ├── renderer.tsx │ │ │ └── schemas.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── redux/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── remotion/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── catalog.ts │ │ │ ├── components/ │ │ │ │ ├── ClipWrapper.tsx │ │ │ │ ├── Renderer.tsx │ │ │ │ ├── hooks.ts │ │ │ │ ├── index.ts │ │ │ │ ├── standard.tsx │ │ │ │ └── types.ts │ │ │ ├── index.ts │ │ │ ├── schema.ts │ │ │ └── server.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── shadcn/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── components.json │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog.ts │ │ │ ├── components.tsx │ │ │ ├── index.ts │ │ │ ├── lib/ │ │ │ │ └── utils.ts │ │ │ └── ui/ │ │ │ ├── accordion.tsx │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ ├── carousel.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ └── tooltip.tsx │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── solid/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── chained-actions.test.tsx │ │ │ ├── contexts/ │ │ │ │ ├── actions.test.tsx │ │ │ │ ├── actions.tsx │ │ │ │ ├── repeat-scope.tsx │ │ │ │ ├── state.test.tsx │ │ │ │ ├── state.tsx │ │ │ │ ├── validation.test.tsx │ │ │ │ ├── validation.tsx │ │ │ │ ├── visibility.test.tsx │ │ │ │ └── visibility.tsx │ │ │ ├── dynamic-forms.test.tsx │ │ │ ├── hooks.test.ts │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ ├── renderer.test.tsx │ │ │ ├── renderer.tsx │ │ │ └── schema.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── svelte/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── CatalogRenderer.svelte │ │ │ ├── ConfirmDialog.svelte │ │ │ ├── ConfirmDialogManager.svelte │ │ │ ├── ElementRenderer.svelte │ │ │ ├── JsonUIProvider.svelte │ │ │ ├── Renderer.svelte │ │ │ ├── RendererWithProvider.test.svelte │ │ │ ├── RepeatChildren.svelte │ │ │ ├── TestButton.svelte │ │ │ ├── TestContainer.svelte │ │ │ ├── TestText.svelte │ │ │ ├── catalog-types.ts │ │ │ ├── contexts/ │ │ │ │ ├── ActionProvider.svelte │ │ │ │ ├── FunctionsContextProvider.svelte │ │ │ │ ├── RepeatScopeProvider.svelte │ │ │ │ ├── StateProvider.svelte │ │ │ │ ├── ValidationProvider.svelte │ │ │ │ ├── VisibilityProvider.svelte │ │ │ │ ├── actions.test.ts │ │ │ │ ├── state.test.ts │ │ │ │ └── visibility.test.ts │ │ │ ├── index.ts │ │ │ ├── renderer.test.ts │ │ │ ├── renderer.ts │ │ │ ├── schema.ts │ │ │ ├── streaming.svelte.ts │ │ │ ├── utils.svelte.ts │ │ │ └── utils.test.ts │ │ ├── svelte.config.js │ │ └── tsconfig.json │ ├── typescript-config/ │ │ ├── base.json │ │ ├── nextjs.json │ │ ├── package.json │ │ └── react-library.json │ ├── ui/ │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ └── code.tsx │ │ └── tsconfig.json │ ├── vue/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── catalog-types.ts │ │ │ ├── composables/ │ │ │ │ ├── actions.test.ts │ │ │ │ ├── actions.ts │ │ │ │ ├── repeat-scope.ts │ │ │ │ ├── state.test.ts │ │ │ │ ├── state.ts │ │ │ │ ├── validation.test.ts │ │ │ │ ├── validation.ts │ │ │ │ ├── visibility.test.ts │ │ │ │ └── visibility.ts │ │ │ ├── dynamic-forms.test.ts │ │ │ ├── hooks.test.ts │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ ├── renderer.test.ts │ │ │ ├── renderer.ts │ │ │ └── schema.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── xstate/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── yaml/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── diff.test.ts │ │ │ ├── diff.ts │ │ │ ├── index.ts │ │ │ ├── merge.test.ts │ │ │ ├── merge.ts │ │ │ ├── parser.test.ts │ │ │ ├── parser.ts │ │ │ ├── prompt.test.ts │ │ │ ├── prompt.ts │ │ │ ├── transform.test.ts │ │ │ └── transform.ts │ │ ├── tsconfig.json │ │ ├── tsup.config.ts │ │ └── vitest.config.ts │ └── zustand/ │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── index.test.ts │ │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── pnpm-workspace.yaml ├── scripts/ │ └── generate-og-images.mts ├── skills/ │ ├── codegen/ │ │ └── SKILL.md │ ├── core/ │ │ └── SKILL.md │ ├── image/ │ │ └── SKILL.md │ ├── jotai/ │ │ └── SKILL.md │ ├── mcp/ │ │ └── SKILL.md │ ├── react/ │ │ └── SKILL.md │ ├── react-email/ │ │ └── SKILL.md │ ├── react-native/ │ │ └── SKILL.md │ ├── react-pdf/ │ │ └── SKILL.md │ ├── react-three-fiber/ │ │ └── SKILL.md │ ├── redux/ │ │ └── SKILL.md │ ├── remotion/ │ │ └── SKILL.md │ ├── remotion-best-practices/ │ │ ├── SKILL.md │ │ └── rules/ │ │ ├── 3d.md │ │ ├── animations.md │ │ ├── assets/ │ │ │ ├── charts-bar-chart.tsx │ │ │ ├── text-animations-typewriter.tsx │ │ │ └── text-animations-word-highlight.tsx │ │ ├── assets.md │ │ ├── audio.md │ │ ├── calculate-metadata.md │ │ ├── can-decode.md │ │ ├── charts.md │ │ ├── compositions.md │ │ ├── display-captions.md │ │ ├── extract-frames.md │ │ ├── fonts.md │ │ ├── get-audio-duration.md │ │ ├── get-video-dimensions.md │ │ ├── get-video-duration.md │ │ ├── gifs.md │ │ ├── images.md │ │ ├── import-srt-captions.md │ │ ├── light-leaks.md │ │ ├── lottie.md │ │ ├── maps.md │ │ ├── measuring-dom-nodes.md │ │ ├── measuring-text.md │ │ ├── parameters.md │ │ ├── sequencing.md │ │ ├── subtitles.md │ │ ├── tailwind.md │ │ ├── text-animations.md │ │ ├── timing.md │ │ ├── transcribe-captions.md │ │ ├── transitions.md │ │ ├── transparent-videos.md │ │ ├── trimming.md │ │ └── videos.md │ ├── shadcn/ │ │ └── SKILL.md │ ├── skill-creator/ │ │ ├── LICENSE.txt │ │ ├── SKILL.md │ │ ├── references/ │ │ │ ├── output-patterns.md │ │ │ └── workflows.md │ │ └── scripts/ │ │ ├── init_skill.py │ │ ├── package_skill.py │ │ └── quick_validate.py │ ├── solid/ │ │ └── SKILL.md │ ├── svelte/ │ │ └── SKILL.md │ ├── vue/ │ │ └── SKILL.md │ ├── xstate/ │ │ └── SKILL.md │ ├── yaml/ │ │ └── SKILL.md │ └── zustand/ │ └── SKILL.md ├── tests/ │ └── e2e/ │ ├── package.json │ ├── state-store-e2e.test.ts │ └── vitest.config.ts ├── turbo.json └── vitest.config.mts
SYMBOL INDEX (2038 symbols across 455 files)
FILE: apps/web/app/(main)/docs/layout.tsx
function DocsLayout (line 6) | function DocsLayout({
FILE: apps/web/app/(main)/examples/page.tsx
function ExampleCard (line 8) | function ExampleCard({ example }: { example: Example }) {
function ExamplesPage (line 74) | function ExamplesPage() {
FILE: apps/web/app/(main)/layout.tsx
function MainLayout (line 3) | function MainLayout({
FILE: apps/web/app/(main)/page.tsx
function Home (line 7) | function Home() {
FILE: apps/web/app/api/docs-chat/route.ts
constant DEFAULT_MODEL (line 13) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
constant SYSTEM_PROMPT (line 15) | const SYSTEM_PROMPT = `You are a helpful documentation assistant for jso...
function loadDocsFiles (line 34) | async function loadDocsFiles(): Promise<Record<string, string>> {
function addCacheControl (line 68) | function addCacheControl(messages: ModelMessage[]): ModelMessage[] {
function POST (line 84) | async function POST(req: Request) {
FILE: apps/web/app/api/docs-markdown/route.ts
function GET (line 6) | async function GET(req: NextRequest) {
FILE: apps/web/app/api/generate/route.ts
constant PLAYGROUND_RULES (line 16) | const PLAYGROUND_RULES = [
constant MAX_PROMPT_LENGTH (line 26) | const MAX_PROMPT_LENGTH = 500;
constant DEFAULT_MODEL (line 27) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function getSystemPrompt (line 29) | function getSystemPrompt(isYaml: boolean, editModes?: EditMode[]): string {
function buildYamlUserPrompt (line 43) | function buildYamlUserPrompt(
function POST (line 67) | async function POST(req: Request) {
FILE: apps/web/app/api/search/route.ts
function GET (line 4) | async function GET(req: NextRequest) {
FILE: apps/web/app/layout.tsx
function RootLayout (line 75) | async function RootLayout({
FILE: apps/web/app/not-found.tsx
function NotFound (line 4) | function NotFound() {
FILE: apps/web/app/og/[...slug]/route.tsx
function GET (line 4) | async function GET(
FILE: apps/web/app/og/og-image.tsx
function loadFonts (line 10) | async function loadFonts() {
function renderOgImage (line 20) | async function renderOgImage(title: string) {
FILE: apps/web/app/og/route.tsx
function GET (line 3) | async function GET() {
FILE: apps/web/app/playground/layout.tsx
function PlaygroundLayout (line 1) | function PlaygroundLayout({
FILE: apps/web/app/playground/page.tsx
function PlaygroundPage (line 6) | function PlaygroundPage() {
FILE: apps/web/components/code-block.tsx
function getHighlighter (line 144) | function getHighlighter() {
type CodeBlockProps (line 159) | interface CodeBlockProps {
function CodeBlock (line 166) | function CodeBlock({
FILE: apps/web/components/code-tabs.tsx
type CodeTabsProps (line 6) | interface CodeTabsProps {
function CodeTabs (line 16) | function CodeTabs({ tabs, defaultValue }: CodeTabsProps) {
FILE: apps/web/components/code.tsx
type CodeProps (line 139) | interface CodeProps {
function Code (line 144) | async function Code({ children, lang = "typescript" }: CodeProps) {
FILE: apps/web/components/copy-button.tsx
type CopyButtonProps (line 5) | interface CopyButtonProps {
function CopyButton (line 10) | function CopyButton({ text, className = "" }: CopyButtonProps) {
FILE: apps/web/components/copy-page-button.tsx
function CopyPageButton (line 6) | function CopyPageButton() {
FILE: apps/web/components/demo.tsx
constant SIMULATION_PROMPT (line 21) | const SIMULATION_PROMPT = "Create a contact form with name, email, and m...
type SimulationStage (line 23) | interface SimulationStage {
constant FORM_STATE (line 29) | const FORM_STATE = { form: { name: "", email: "", message: "" } };
constant NAME_INPUT (line 31) | const NAME_INPUT = {
constant EMAIL_INPUT (line 41) | const EMAIL_INPUT = {
constant MESSAGE_INPUT (line 55) | const MESSAGE_INPUT = {
constant SUBMIT_BUTTON (line 65) | const SUBMIT_BUTTON = {
constant SIMULATION_STAGES (line 71) | const SIMULATION_STAGES: SimulationStage[] = [
type Mode (line 158) | type Mode = "simulation" | "interactive";
type Phase (line 159) | type Phase = "typing" | "streaming" | "complete";
type Tab (line 160) | type Tab = "stream" | "json" | "nested" | "catalog";
type RenderView (line 161) | type RenderView = "dynamic" | "static";
type DemoProps (line 163) | interface DemoProps {
function specToNested (line 172) | function specToNested(spec: Spec): Record<string, unknown> {
constant EXAMPLE_PROMPTS (line 213) | const EXAMPLE_PROMPTS = [
function Demo (line 220) | function Demo({
FILE: apps/web/components/docs-chat.tsx
constant STORAGE_KEY (line 16) | const STORAGE_KEY = "docs-chat-messages";
constant DESKTOP_DEFAULT_WIDTH (line 19) | const DESKTOP_DEFAULT_WIDTH = 400;
constant DESKTOP_MIN_WIDTH (line 20) | const DESKTOP_MIN_WIDTH = 300;
constant DESKTOP_MAX_WIDTH (line 21) | const DESKTOP_MAX_WIDTH = 700;
function setCookie (line 23) | function setCookie(name: string, value: string) {
constant TOOL_LABELS (line 27) | const TOOL_LABELS: Record<
function isToolPart (line 35) | function isToolPart(part: { type: string }): part is {
function getToolName (line 47) | function getToolName(part: { type: string; toolName?: string }): string {
function ToolCallDisplay (line 52) | function ToolCallDisplay({
constant SUGGESTIONS (line 120) | const SUGGESTIONS = [
function DocsChat (line 128) | function DocsChat({
FILE: apps/web/components/docs-mobile-nav.tsx
function DocsMobileNav (line 15) | function DocsMobileNav() {
FILE: apps/web/components/docs-sidebar.tsx
function DocsSidebar (line 8) | function DocsSidebar() {
FILE: apps/web/components/expandable-code.tsx
type ExpandableCodeProps (line 5) | interface ExpandableCodeProps {
function ExpandableCode (line 10) | function ExpandableCode({
FILE: apps/web/components/generation-modes-diagram.tsx
function ScheduleItem (line 3) | function ScheduleItem({
function InlineModeDiagram (line 26) | function InlineModeDiagram() {
function LandingPage (line 113) | function LandingPage() {
function StandaloneModeDiagram (line 192) | function StandaloneModeDiagram() {
function GenerationModesDiagram (line 259) | function GenerationModesDiagram() {
FILE: apps/web/components/header.tsx
function GitHubLink (line 22) | function GitHubLink({ className }: { className?: string }) {
function Header (line 46) | function Header() {
FILE: apps/web/components/package-install.tsx
type PackageInstallProps (line 138) | interface PackageInstallProps {
function PackageInstall (line 149) | async function PackageInstall({ packages }: PackageInstallProps) {
FILE: apps/web/components/playground.tsx
type Tab (line 31) | type Tab = "spec" | "nested" | "stream" | "catalog" | "visual";
type RenderView (line 32) | type RenderView = "preview" | "code";
type MobileView (line 33) | type MobileView =
type Version (line 42) | interface Version {
function formatTokens (line 52) | function formatTokens(n: number): string {
function PlaygroundControls (line 57) | function PlaygroundControls({
function specToNested (line 128) | function specToNested(spec: Spec): Record<string, unknown> {
constant EXAMPLE_PROMPTS (line 169) | const EXAMPLE_PROMPTS = [
function Playground (line 176) | function Playground() {
FILE: apps/web/components/search.tsx
type SearchResult (line 8) | type SearchResult = {
function Search (line 15) | function Search() {
FILE: apps/web/components/table-of-contents.tsx
type Heading (line 7) | type Heading = {
function getHeadings (line 13) | function getHeadings(): Heading[] {
function TableOfContents (line 24) | function TableOfContents() {
FILE: apps/web/components/theme-provider.tsx
function ThemeProvider (line 5) | function ThemeProvider({ children }: { children: React.ReactNode }) {
FILE: apps/web/components/theme-toggle.tsx
function ThemeToggle (line 6) | function ThemeToggle() {
FILE: apps/web/components/ui/accordion.tsx
function Accordion (line 9) | function Accordion({
function AccordionItem (line 15) | function AccordionItem({
function AccordionTrigger (line 28) | function AccordionTrigger({
function AccordionContent (line 50) | function AccordionContent({
FILE: apps/web/components/ui/alert.tsx
function Alert (line 22) | function Alert({
function AlertTitle (line 37) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 50) | function AlertDescription({
FILE: apps/web/components/ui/badge.tsx
function Badge (line 28) | function Badge({
FILE: apps/web/components/ui/button.tsx
function Button (line 41) | function Button({
FILE: apps/web/components/ui/card.tsx
function Card (line 5) | function Card({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader (line 18) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 31) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 41) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardAction (line 51) | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent (line 64) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 74) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/web/components/ui/carousel.tsx
type CarouselApi (line 12) | type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters (line 13) | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions (line 14) | type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin (line 15) | type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps (line 17) | type CarouselProps = {
type CarouselContextProps (line 24) | type CarouselContextProps = {
function useCarousel (line 35) | function useCarousel() {
function Carousel (line 45) | function Carousel({
function CarouselContent (line 135) | function CarouselContent({ className, ...props }: React.ComponentProps<"...
function CarouselItem (line 156) | function CarouselItem({ className, ...props }: React.ComponentProps<"div...
function CarouselPrevious (line 174) | function CarouselPrevious({
function CarouselNext (line 204) | function CarouselNext({
FILE: apps/web/components/ui/checkbox.tsx
function Checkbox (line 9) | function Checkbox({
FILE: apps/web/components/ui/collapsible.tsx
function Collapsible (line 5) | function Collapsible({
function CollapsibleTrigger (line 11) | function CollapsibleTrigger({
function CollapsibleContent (line 22) | function CollapsibleContent({
FILE: apps/web/components/ui/dialog.tsx
function Dialog (line 10) | function Dialog({
function DialogTrigger (line 16) | function DialogTrigger({
function DialogPortal (line 22) | function DialogPortal({
function DialogClose (line 28) | function DialogClose({
function DialogOverlay (line 34) | function DialogOverlay({
function DialogContent (line 50) | function DialogContent({
function DialogHeader (line 84) | function DialogHeader({ className, ...props }: React.ComponentProps<"div...
function DialogFooter (line 94) | function DialogFooter({
function DialogTitle (line 121) | function DialogTitle({
function DialogDescription (line 134) | function DialogDescription({
FILE: apps/web/components/ui/drawer.tsx
function Drawer (line 8) | function Drawer({
function DrawerTrigger (line 14) | function DrawerTrigger({
function DrawerPortal (line 20) | function DrawerPortal({
function DrawerClose (line 26) | function DrawerClose({
function DrawerOverlay (line 32) | function DrawerOverlay({
function DrawerContent (line 48) | function DrawerContent({
function DrawerHeader (line 75) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 88) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 98) | function DrawerTitle({
function DrawerDescription (line 111) | function DrawerDescription({
FILE: apps/web/components/ui/dropdown-menu.tsx
function DropdownMenu (line 9) | function DropdownMenu({
function DropdownMenuPortal (line 15) | function DropdownMenuPortal({
function DropdownMenuTrigger (line 23) | function DropdownMenuTrigger({
function DropdownMenuContent (line 34) | function DropdownMenuContent({
function DropdownMenuGroup (line 54) | function DropdownMenuGroup({
function DropdownMenuItem (line 62) | function DropdownMenuItem({
function DropdownMenuCheckboxItem (line 85) | function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup (line 111) | function DropdownMenuRadioGroup({
function DropdownMenuRadioItem (line 122) | function DropdownMenuRadioItem({
function DropdownMenuLabel (line 146) | function DropdownMenuLabel({
function DropdownMenuSeparator (line 166) | function DropdownMenuSeparator({
function DropdownMenuShortcut (line 179) | function DropdownMenuShortcut({
function DropdownMenuSub (line 195) | function DropdownMenuSub({
function DropdownMenuSubTrigger (line 201) | function DropdownMenuSubTrigger({
function DropdownMenuSubContent (line 225) | function DropdownMenuSubContent({
FILE: apps/web/components/ui/input.tsx
function Input (line 5) | function Input({ className, type, ...props }: React.ComponentProps<"inpu...
FILE: apps/web/components/ui/label.tsx
function Label (line 8) | function Label({
FILE: apps/web/components/ui/pagination.tsx
function Pagination (line 11) | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent (line 23) | function PaginationContent({
function PaginationItem (line 36) | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
type PaginationLinkProps (line 40) | type PaginationLinkProps = {
function PaginationLink (line 45) | function PaginationLink({
function PaginationPrevious (line 68) | function PaginationPrevious({
function PaginationNext (line 85) | function PaginationNext({
function PaginationEllipsis (line 102) | function PaginationEllipsis({
FILE: apps/web/components/ui/popover.tsx
function Popover (line 8) | function Popover({
function PopoverTrigger (line 14) | function PopoverTrigger({
function PopoverContent (line 20) | function PopoverContent({
function PopoverAnchor (line 42) | function PopoverAnchor({
function PopoverHeader (line 48) | function PopoverHeader({ className, ...props }: React.ComponentProps<"di...
function PopoverTitle (line 58) | function PopoverTitle({ className, ...props }: React.ComponentProps<"h2"...
function PopoverDescription (line 68) | function PopoverDescription({
FILE: apps/web/components/ui/progress.tsx
function Progress (line 8) | function Progress({
FILE: apps/web/components/ui/radio-group.tsx
function RadioGroup (line 9) | function RadioGroup({
function RadioGroupItem (line 22) | function RadioGroupItem({
FILE: apps/web/components/ui/resizable.tsx
function ResizablePanelGroup (line 9) | function ResizablePanelGroup({
function ResizablePanel (line 25) | function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {
function ResizableHandle (line 29) | function ResizableHandle({
FILE: apps/web/components/ui/select.tsx
function Select (line 9) | function Select({
function SelectGroup (line 15) | function SelectGroup({
function SelectValue (line 21) | function SelectValue({
function SelectTrigger (line 27) | function SelectTrigger({
function SelectContent (line 53) | function SelectContent({
function SelectLabel (line 90) | function SelectLabel({
function SelectItem (line 103) | function SelectItem({
function SelectSeparator (line 130) | function SelectSeparator({
function SelectScrollUpButton (line 143) | function SelectScrollUpButton({
function SelectScrollDownButton (line 161) | function SelectScrollDownButton({
FILE: apps/web/components/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: apps/web/components/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/web/components/ui/slider.tsx
function Slider (line 8) | function Slider({
FILE: apps/web/components/ui/switch.tsx
function Switch (line 8) | function Switch({
FILE: apps/web/components/ui/table.tsx
function Table (line 7) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 22) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 32) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 42) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 55) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 68) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 81) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 94) | function TableCaption({
FILE: apps/web/components/ui/tabs.tsx
function Tabs (line 8) | function Tabs({
function TabsList (line 21) | function TabsList({
function TabsTrigger (line 37) | function TabsTrigger({
function TabsContent (line 53) | function TabsContent({
FILE: apps/web/components/ui/textarea.tsx
function Textarea (line 5) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: apps/web/components/ui/toggle-group.tsx
function ToggleGroup (line 20) | function ToggleGroup({
function ToggleGroupItem (line 51) | function ToggleGroupItem({
FILE: apps/web/components/ui/toggle.tsx
function Toggle (line 31) | function Toggle({
FILE: apps/web/components/ui/tooltip.tsx
function TooltipProvider (line 8) | function TooltipProvider({
function Tooltip (line 21) | function Tooltip({
function TooltipTrigger (line 27) | function TooltipTrigger({
function TooltipContent (line 33) | function TooltipContent({
FILE: apps/web/lib/docs-navigation.ts
type NavItem (line 1) | type NavItem = {
type NavSection (line 7) | type NavSection = {
FILE: apps/web/lib/examples.ts
type Example (line 1) | type Example = {
constant GITHUB_BASE (line 10) | const GITHUB_BASE =
function getGitHubUrl (line 150) | function getGitHubUrl(example: Example): string {
FILE: apps/web/lib/mdx-to-markdown.ts
function mdxToCleanMarkdown (line 11) | function mdxToCleanMarkdown(raw: string): string {
FILE: apps/web/lib/page-metadata.ts
constant DESCRIPTION (line 4) | const DESCRIPTION =
function pageMetadata (line 7) | function pageMetadata(slug: string): Metadata {
FILE: apps/web/lib/page-titles.ts
constant PAGE_TITLES (line 8) | const PAGE_TITLES: Record<string, string> = {
function getPageTitle (line 69) | function getPageTitle(slug: string): string | null {
FILE: apps/web/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: apps/web/lib/render/catalog-display.ts
type CatalogField (line 6) | interface CatalogField {
type CatalogComponentInfo (line 11) | interface CatalogComponentInfo {
type CatalogActionInfo (line 19) | interface CatalogActionInfo {
type CatalogDisplayData (line 25) | interface CatalogDisplayData {
function extractFields (line 34) | function extractFields(zodObj: unknown): CatalogField[] {
function buildCatalogDisplayData (line 92) | function buildCatalogDisplayData(
FILE: apps/web/lib/render/registry.tsx
function Fallback (line 1271) | function Fallback({ type }: { type: string }) {
FILE: apps/web/lib/render/renderer.tsx
type PlaygroundRendererProps (line 21) | interface PlaygroundRendererProps {
function ValidatedActions (line 39) | function ValidatedActions({ children }: { children: ReactNode }) {
function PlaygroundRenderer (line 71) | function PlaygroundRenderer({
FILE: apps/web/lib/search-index.ts
type IndexEntry (line 6) | type IndexEntry = {
function stripMarkdown (line 15) | function stripMarkdown(md: string): string {
function mdxFileForSlug (line 36) | function mdxFileForSlug(slug: string): string {
function getSearchIndex (line 45) | async function getSearchIndex(): Promise<IndexEntry[]> {
FILE: apps/web/lib/spec-patch.ts
function setSpecValue (line 4) | function setSpecValue(
function removeSpecValue (line 54) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 86) | function getSpecValue(spec: Spec, path: string): unknown {
function normalizeSpec (line 98) | function normalizeSpec(spec: Spec): void {
function applySpecPatch (line 124) | function applySpecPatch(spec: Spec, patch: JsonPatch): Spec {
FILE: apps/web/lib/use-playground-stream.ts
type StreamFormat (line 18) | type StreamFormat = "jsonl" | "yaml";
type TokenUsage (line 20) | interface TokenUsage {
type UsePlaygroundStreamOptions (line 28) | interface UsePlaygroundStreamOptions {
type UsePlaygroundStreamReturn (line 36) | interface UsePlaygroundStreamReturn {
type ParsedLine (line 48) | type ParsedLine =
function parseLine (line 54) | function parseLine(line: string): ParsedLine {
type FenceState (line 82) | type FenceState = "outside" | "yaml-spec" | "yaml-edit" | "yaml-patch" |...
function usePlaygroundStream (line 86) | function usePlaygroundStream({
FILE: apps/web/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: apps/web/mdx-components.tsx
function slugify (line 7) | function slugify(text: string): string {
function extractText (line 15) | function extractText(children: React.ReactNode): string {
function useMDXComponents (line 29) | function useMDXComponents(components: MDXComponents): MDXComponents {
FILE: apps/web/next.config.js
method redirects (line 7) | async redirects() {
FILE: examples/chat/app/api/generate/route.ts
function POST (line 14) | async function POST(req: Request) {
FILE: examples/chat/app/layout.tsx
function RootLayout (line 23) | function RootLayout({
FILE: examples/chat/app/page.tsx
type AppDataParts (line 28) | type AppDataParts = { [SPEC_DATA_PART]: SpecDataPart };
type AppMessage (line 29) | type AppMessage = UIMessage<unknown, AppDataParts>;
constant SUGGESTIONS (line 41) | const SUGGESTIONS = [
constant TOOL_LABELS (line 65) | const TOOL_LABELS: Record<string, [string, string]> = {
function ToolCallDisplay (line 75) | function ToolCallDisplay({
function MessageBubble (line 127) | function MessageBubble({
function ChatPage (line 285) | function ChatPage() {
FILE: examples/chat/components/theme-provider.tsx
function ThemeProvider (line 5) | function ThemeProvider({ children }: { children: React.ReactNode }) {
FILE: examples/chat/components/theme-toggle.tsx
function ThemeToggle (line 7) | function ThemeToggle() {
FILE: examples/chat/components/ui/accordion.tsx
function Accordion (line 9) | function Accordion({
function AccordionItem (line 22) | function AccordionItem({
function AccordionTrigger (line 35) | function AccordionTrigger({
function AccordionContent (line 57) | function AccordionContent({
FILE: examples/chat/components/ui/alert.tsx
function Alert (line 22) | function Alert({
function AlertTitle (line 37) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 50) | function AlertDescription({
FILE: examples/chat/components/ui/badge.tsx
function Badge (line 29) | function Badge({
FILE: examples/chat/components/ui/button.tsx
type ButtonProps (line 35) | interface ButtonProps
FILE: examples/chat/components/ui/card.tsx
function Card (line 5) | function Card({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader (line 18) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 31) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 41) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardAction (line 51) | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent (line 64) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 74) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: examples/chat/components/ui/chart.tsx
constant THEMES (line 9) | const THEMES = { light: "", dark: ".dark" } as const;
type ChartConfig (line 11) | type ChartConfig = {
type ChartContextProps (line 21) | type ChartContextProps = {
function useChart (line 27) | function useChart() {
function ChartContainer (line 37) | function ChartContainer({
function ChartTooltipContent (line 107) | function ChartTooltipContent({
function ChartLegendContent (line 255) | function ChartLegendContent({
function getPayloadConfigFromPayload (line 312) | function getPayloadConfigFromPayload(
FILE: examples/chat/components/ui/progress.tsx
function Progress (line 8) | function Progress({
FILE: examples/chat/components/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: examples/chat/components/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: examples/chat/components/ui/table.tsx
function Table (line 7) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 22) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 32) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 42) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 55) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 68) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 81) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 94) | function TableCaption({
FILE: examples/chat/components/ui/tabs.tsx
function Tabs (line 9) | function Tabs({
function TabsList (line 43) | function TabsList({
function TabsTrigger (line 59) | function TabsTrigger({
function TabsContent (line 78) | function TabsContent({
FILE: examples/chat/lib/agent.ts
constant DEFAULT_MODEL (line 10) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
constant AGENT_INSTRUCTIONS (line 12) | const AGENT_INSTRUCTIONS = `You are a knowledgeable assistant that helps...
FILE: examples/chat/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/chat/lib/render/registry.tsx
type Vec3Tuple (line 72) | type Vec3Tuple = [number, number, number];
type Animation3D (line 74) | interface Animation3D {
type Mesh3DProps (line 78) | interface Mesh3DProps {
function toVec3 (line 93) | function toVec3(v: number[] | null | undefined): Vec3Tuple | undefined {
function toGeoArgs (line 98) | function toGeoArgs<T extends unknown[]>(
function useRotationAnimation (line 107) | function useRotationAnimation(
function StandardMaterial (line 121) | function StandardMaterial({
function MeshPrimitive (line 145) | function MeshPrimitive({
function AnimatedGroup (line 171) | function AnimatedGroup({
constant PIE_COLORS (line 900) | const PIE_COLORS = [
function processChartData (line 908) | function processChartData(
function Fallback (line 968) | function Fallback({ type }: { type: string }) {
FILE: examples/chat/lib/render/renderer.tsx
type ExplorerRendererProps (line 19) | interface ExplorerRendererProps {
function ExplorerRenderer (line 28) | function ExplorerRenderer({
FILE: examples/chat/lib/tools/crypto.ts
function handleFetchError (line 8) | function handleFetchError(res: Response, coinId: string) {
function sampleTimeSeries (line 18) | function sampleTimeSeries(
FILE: examples/chat/lib/tools/github.ts
function handleGitHubError (line 10) | function handleGitHubError(res: Response, context: string) {
type GitHubPR (line 104) | type GitHubPR = {
type GitHubPRReview (line 118) | type GitHubPRReview = {
type GitHubPRReaction (line 122) | type GitHubPRReaction = {
FILE: examples/chat/lib/tools/weather.ts
function describeWeatherCode (line 98) | function describeWeatherCode(code: number): string {
FILE: examples/chat/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/dashboard/app/api/generate/route.ts
constant SYSTEM_PROMPT (line 9) | const SYSTEM_PROMPT = dashboardCatalog.prompt();
constant DEFAULT_MODEL (line 11) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 13) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/accounts/[id]/route.ts
function GET (line 3) | async function GET(
FILE: examples/dashboard/app/api/v1/accounts/route.ts
function GET (line 3) | async function GET() {
FILE: examples/dashboard/app/api/v1/customers/[id]/route.ts
function GET (line 3) | async function GET(
function PATCH (line 17) | async function PATCH(
function DELETE (line 32) | async function DELETE(
FILE: examples/dashboard/app/api/v1/customers/route.ts
function GET (line 3) | async function GET(req: Request) {
function POST (line 20) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/expenses/[id]/approve/route.ts
function POST (line 3) | async function POST(
FILE: examples/dashboard/app/api/v1/expenses/[id]/reject/route.ts
function POST (line 3) | async function POST(
FILE: examples/dashboard/app/api/v1/expenses/[id]/route.ts
function GET (line 3) | async function GET(
function PATCH (line 17) | async function PATCH(
function DELETE (line 32) | async function DELETE(
FILE: examples/dashboard/app/api/v1/expenses/route.ts
function GET (line 3) | async function GET(req: Request) {
function POST (line 27) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/invoices/[id]/mark-paid/route.ts
function POST (line 3) | async function POST(
FILE: examples/dashboard/app/api/v1/invoices/[id]/route.ts
function GET (line 3) | async function GET(
function PATCH (line 17) | async function PATCH(
function DELETE (line 32) | async function DELETE(
FILE: examples/dashboard/app/api/v1/invoices/[id]/send/route.ts
function POST (line 3) | async function POST(
FILE: examples/dashboard/app/api/v1/invoices/route.ts
function GET (line 3) | async function GET(req: Request) {
function POST (line 28) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/reports/export/route.ts
function POST (line 8) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/reports/profit-loss/route.ts
function GET (line 3) | async function GET(req: Request) {
FILE: examples/dashboard/app/api/v1/reset/route.ts
function POST (line 3) | async function POST() {
FILE: examples/dashboard/app/api/v1/widgets/[id]/route.ts
function GET (line 3) | async function GET(
function PATCH (line 17) | async function PATCH(
function DELETE (line 32) | async function DELETE(
FILE: examples/dashboard/app/api/v1/widgets/reorder/route.ts
function POST (line 3) | async function POST(req: Request) {
FILE: examples/dashboard/app/api/v1/widgets/route.ts
function GET (line 3) | async function GET() {
function POST (line 12) | async function POST(req: Request) {
FILE: examples/dashboard/app/layout.tsx
function RootLayout (line 22) | function RootLayout({
FILE: examples/dashboard/app/page.tsx
function DashboardContent (line 24) | function DashboardContent() {
function DashboardPage (line 151) | function DashboardPage() {
FILE: examples/dashboard/components/add-widget-card.tsx
type AddWidgetCardProps (line 5) | interface AddWidgetCardProps {
function AddWidgetCard (line 9) | function AddWidgetCard({ onClick }: AddWidgetCardProps) {
FILE: examples/dashboard/components/code-highlight.tsx
type CodeHighlightProps (line 140) | interface CodeHighlightProps {
function CodeHighlight (line 145) | function CodeHighlight({ code, language = "json" }: CodeHighlightProps) {
FILE: examples/dashboard/components/header.tsx
function Header (line 5) | function Header() {
FILE: examples/dashboard/components/sortable-widget.tsx
type SavedWidget (line 8) | interface SavedWidget {
type SortableWidgetProps (line 14) | interface SortableWidgetProps {
function SortableWidget (line 19) | function SortableWidget({ widget, onDeleted }: SortableWidgetProps) {
FILE: examples/dashboard/components/theme-provider.tsx
function ThemeProvider (line 5) | function ThemeProvider({ children }: { children: React.ReactNode }) {
FILE: examples/dashboard/components/theme-toggle.tsx
function ThemeToggle (line 7) | function ThemeToggle() {
FILE: examples/dashboard/components/ui/accordion.tsx
function Accordion (line 9) | function Accordion({
function AccordionItem (line 15) | function AccordionItem({
function AccordionTrigger (line 28) | function AccordionTrigger({
function AccordionContent (line 50) | function AccordionContent({
FILE: examples/dashboard/components/ui/alert.tsx
function Alert (line 22) | function Alert({
function AlertTitle (line 37) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 50) | function AlertDescription({
FILE: examples/dashboard/components/ui/animated-border.tsx
type AnimatedBorderProps (line 5) | interface AnimatedBorderProps {
FILE: examples/dashboard/components/ui/avatar.tsx
function Avatar (line 8) | function Avatar({
function AvatarImage (line 28) | function AvatarImage({
function AvatarFallback (line 41) | function AvatarFallback({
function AvatarBadge (line 57) | function AvatarBadge({ className, ...props }: React.ComponentProps<"span...
function AvatarGroup (line 73) | function AvatarGroup({ className, ...props }: React.ComponentProps<"div"...
function AvatarGroupCount (line 86) | function AvatarGroupCount({
FILE: examples/dashboard/components/ui/badge.tsx
function Badge (line 29) | function Badge({
FILE: examples/dashboard/components/ui/button.tsx
function Button (line 41) | function Button({
FILE: examples/dashboard/components/ui/card.tsx
function Card (line 5) | function Card({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader (line 18) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 31) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 41) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardAction (line 51) | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent (line 64) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 74) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: examples/dashboard/components/ui/chart.tsx
constant THEMES (line 9) | const THEMES = { light: "", dark: ".dark" } as const;
type ChartConfig (line 11) | type ChartConfig = {
type ChartContextProps (line 21) | type ChartContextProps = {
function useChart (line 27) | function useChart() {
function ChartContainer (line 37) | function ChartContainer({
function ChartTooltipContent (line 107) | function ChartTooltipContent({
function ChartLegendContent (line 255) | function ChartLegendContent({
function getPayloadConfigFromPayload (line 312) | function getPayloadConfigFromPayload(
FILE: examples/dashboard/components/ui/checkbox.tsx
function Checkbox (line 9) | function Checkbox({
FILE: examples/dashboard/components/ui/dialog.tsx
function Dialog (line 10) | function Dialog({
function DialogTrigger (line 16) | function DialogTrigger({
function DialogPortal (line 22) | function DialogPortal({
function DialogClose (line 28) | function DialogClose({
function DialogOverlay (line 34) | function DialogOverlay({
function DialogContent (line 50) | function DialogContent({
function DialogHeader (line 84) | function DialogHeader({ className, ...props }: React.ComponentProps<"div...
function DialogFooter (line 94) | function DialogFooter({
function DialogTitle (line 121) | function DialogTitle({
function DialogDescription (line 134) | function DialogDescription({
FILE: examples/dashboard/components/ui/drawer.tsx
function Drawer (line 8) | function Drawer({
function DrawerTrigger (line 14) | function DrawerTrigger({
function DrawerPortal (line 20) | function DrawerPortal({
function DrawerClose (line 26) | function DrawerClose({
function DrawerOverlay (line 32) | function DrawerOverlay({
function DrawerContent (line 48) | function DrawerContent({
function DrawerHeader (line 75) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 88) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 98) | function DrawerTitle({
function DrawerDescription (line 111) | function DrawerDescription({
FILE: examples/dashboard/components/ui/dropdown-menu.tsx
function DropdownMenu (line 9) | function DropdownMenu({
function DropdownMenuPortal (line 15) | function DropdownMenuPortal({
function DropdownMenuTrigger (line 23) | function DropdownMenuTrigger({
function DropdownMenuContent (line 34) | function DropdownMenuContent({
function DropdownMenuGroup (line 54) | function DropdownMenuGroup({
function DropdownMenuItem (line 62) | function DropdownMenuItem({
function DropdownMenuCheckboxItem (line 85) | function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup (line 111) | function DropdownMenuRadioGroup({
function DropdownMenuRadioItem (line 122) | function DropdownMenuRadioItem({
function DropdownMenuLabel (line 146) | function DropdownMenuLabel({
function DropdownMenuSeparator (line 166) | function DropdownMenuSeparator({
function DropdownMenuShortcut (line 179) | function DropdownMenuShortcut({
function DropdownMenuSub (line 195) | function DropdownMenuSub({
function DropdownMenuSubTrigger (line 201) | function DropdownMenuSubTrigger({
function DropdownMenuSubContent (line 225) | function DropdownMenuSubContent({
FILE: examples/dashboard/components/ui/input.tsx
function Input (line 5) | function Input({ className, type, ...props }: React.ComponentProps<"inpu...
FILE: examples/dashboard/components/ui/label.tsx
function Label (line 8) | function Label({
FILE: examples/dashboard/components/ui/pagination.tsx
function Pagination (line 11) | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent (line 23) | function PaginationContent({
function PaginationItem (line 36) | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
type PaginationLinkProps (line 40) | type PaginationLinkProps = {
function PaginationLink (line 45) | function PaginationLink({
function PaginationPrevious (line 68) | function PaginationPrevious({
function PaginationNext (line 85) | function PaginationNext({
function PaginationEllipsis (line 102) | function PaginationEllipsis({
FILE: examples/dashboard/components/ui/popover.tsx
function Popover (line 8) | function Popover({
function PopoverTrigger (line 14) | function PopoverTrigger({
function PopoverContent (line 20) | function PopoverContent({
function PopoverAnchor (line 42) | function PopoverAnchor({
function PopoverHeader (line 48) | function PopoverHeader({ className, ...props }: React.ComponentProps<"di...
function PopoverTitle (line 58) | function PopoverTitle({ className, ...props }: React.ComponentProps<"h2"...
function PopoverDescription (line 68) | function PopoverDescription({
FILE: examples/dashboard/components/ui/progress.tsx
function Progress (line 8) | function Progress({
FILE: examples/dashboard/components/ui/radio-group.tsx
function RadioGroup (line 9) | function RadioGroup({
function RadioGroupItem (line 22) | function RadioGroupItem({
FILE: examples/dashboard/components/ui/select.tsx
function Select (line 9) | function Select({
function SelectGroup (line 15) | function SelectGroup({
function SelectValue (line 21) | function SelectValue({
function SelectTrigger (line 27) | function SelectTrigger({
function SelectContent (line 53) | function SelectContent({
function SelectLabel (line 90) | function SelectLabel({
function SelectItem (line 103) | function SelectItem({
function SelectSeparator (line 130) | function SelectSeparator({
function SelectScrollUpButton (line 143) | function SelectScrollUpButton({
function SelectScrollDownButton (line 161) | function SelectScrollDownButton({
FILE: examples/dashboard/components/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: examples/dashboard/components/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: examples/dashboard/components/ui/switch.tsx
function Switch (line 8) | function Switch({
FILE: examples/dashboard/components/ui/table.tsx
function Table (line 7) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 22) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 32) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 42) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 55) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 68) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 81) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 94) | function TableCaption({
FILE: examples/dashboard/components/ui/tabs.tsx
function Tabs (line 9) | function Tabs({
function TabsList (line 43) | function TabsList({
function TabsTrigger (line 59) | function TabsTrigger({
function TabsContent (line 78) | function TabsContent({
FILE: examples/dashboard/components/ui/textarea.tsx
function Textarea (line 5) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: examples/dashboard/components/ui/tooltip.tsx
function TooltipProvider (line 8) | function TooltipProvider({
function Tooltip (line 21) | function Tooltip({
function TooltipTrigger (line 27) | function TooltipTrigger({
function TooltipContent (line 33) | function TooltipContent({
FILE: examples/dashboard/components/widget.tsx
type WidgetProps (line 38) | interface WidgetProps {
function Widget (line 49) | function Widget({
FILE: examples/dashboard/lib/db/connection.ts
function getConnectionString (line 9) | function getConnectionString(): string {
method get (line 19) | get(_target, prop) {
function getMigrationClient (line 30) | function getMigrationClient() {
FILE: examples/dashboard/lib/db/schema.ts
type WidgetSpec (line 109) | interface WidgetSpec {
type InvoiceItem (line 113) | interface InvoiceItem {
type Customer (line 120) | type Customer = typeof customers.$inferSelect;
type NewCustomer (line 121) | type NewCustomer = typeof customers.$inferInsert;
type Invoice (line 123) | type Invoice = typeof invoices.$inferSelect;
type NewInvoice (line 124) | type NewInvoice = typeof invoices.$inferInsert;
type Expense (line 126) | type Expense = typeof expenses.$inferSelect;
type NewExpense (line 127) | type NewExpense = typeof expenses.$inferInsert;
type Account (line 129) | type Account = typeof accounts.$inferSelect;
type Transaction (line 130) | type Transaction = typeof transactions.$inferSelect;
type Widget (line 132) | type Widget = typeof widgets.$inferSelect;
type NewWidget (line 133) | type NewWidget = typeof widgets.$inferInsert;
FILE: examples/dashboard/lib/db/store.ts
function getCustomers (line 25) | async function getCustomers(filters?: {
function getCustomer (line 60) | async function getCustomer(id: string) {
function createCustomer (line 69) | async function createCustomer(data: {
function updateCustomer (line 89) | async function updateCustomer(id: string, data: Partial<Customer>) {
function deleteCustomer (line 98) | async function deleteCustomer(id: string) {
function getInvoices (line 107) | async function getInvoices(filters?: {
function getInvoice (line 128) | async function getInvoice(id: string) {
function createInvoice (line 137) | async function createInvoice(data: {
function updateInvoice (line 164) | async function updateInvoice(id: string, data: Partial<Invoice>) {
function deleteInvoice (line 173) | async function deleteInvoice(id: string) {
function sendInvoice (line 181) | async function sendInvoice(id: string) {
function markInvoicePaid (line 189) | async function markInvoicePaid(id: string) {
function getExpenses (line 220) | async function getExpenses(filters?: {
function getExpense (line 241) | async function getExpense(id: string) {
function createExpense (line 250) | async function createExpense(data: {
function updateExpense (line 273) | async function updateExpense(id: string, data: Partial<Expense>) {
function deleteExpense (line 282) | async function deleteExpense(id: string) {
function approveExpense (line 290) | async function approveExpense(id: string) {
function rejectExpense (line 310) | async function rejectExpense(id: string) {
function getAccounts (line 319) | async function getAccounts() {
function getAccount (line 338) | async function getAccount(id: string) {
function getDashboardSummary (line 357) | async function getDashboardSummary() {
function getProfitLossReport (line 453) | async function getProfitLossReport(
function clearDatabase (line 513) | async function clearDatabase() {
function resetDatabase (line 523) | async function resetDatabase() {
function getWidgets (line 1048) | async function getWidgets() {
function getWidget (line 1052) | async function getWidget(id: string) {
function createWidget (line 1061) | async function createWidget(data: { prompt: string; spec: WidgetSpec }) {
function updateWidget (line 1082) | async function updateWidget(
function deleteWidget (line 1094) | async function deleteWidget(id: string) {
function reorderWidgets (line 1102) | async function reorderWidgets(orderedIds: string[]) {
FILE: examples/dashboard/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/dashboard/lib/render/registry.tsx
function isISODate (line 866) | function isISODate(value: unknown): boolean {
function formatDateLabel (line 871) | function formatDateLabel(value: string): string {
function processChartData (line 877) | function processChartData(
function Fallback (line 969) | function Fallback({ type }: { type: string }) {
FILE: examples/dashboard/lib/render/renderer.tsx
type SetState (line 19) | type SetState = (
type DashboardRendererProps (line 23) | interface DashboardRendererProps {
function DashboardRenderer (line 36) | function DashboardRenderer({
FILE: examples/dashboard/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/dashboard/scripts/clear.ts
function main (line 4) | async function main() {
FILE: examples/dashboard/scripts/seed.ts
function main (line 4) | async function main() {
FILE: examples/image/app/api/generate/route.ts
constant SYSTEM_PROMPT (line 9) | const SYSTEM_PROMPT = imageCatalog.prompt();
constant DEFAULT_MODEL (line 11) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 13) | async function POST(req: Request) {
FILE: examples/image/app/api/image/route.ts
function loadFont (line 9) | async function loadFont(): Promise<ArrayBuffer> {
function GET (line 28) | async function GET(req: Request) {
function POST (line 41) | async function POST(req: Request) {
function imageResponse (line 55) | async function imageResponse(spec: Spec, name: string, download: boolean) {
FILE: examples/image/app/layout.tsx
function RootLayout (line 12) | function RootLayout({
FILE: examples/image/app/page.tsx
type Mode (line 18) | type Mode = "scratch" | "example";
type MobileView (line 19) | type MobileView = "json" | "preview";
type Selection (line 21) | interface Selection {
constant IMAGE_REFRESH_INTERVAL_MS (line 26) | const IMAGE_REFRESH_INTERVAL_MS = 3000;
function CopyButton (line 28) | function CopyButton({ text }: { text: string }) {
function isRenderableSpec (line 45) | function isRenderableSpec(spec: Spec | null): spec is Spec {
function Page (line 51) | function Page() {
FILE: examples/image/components/ui/resizable.tsx
function ResizablePanelGroup (line 8) | function ResizablePanelGroup({
function ResizablePanel (line 24) | function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
function ResizableHandle (line 28) | function ResizableHandle({
FILE: examples/image/components/ui/scroll-area.tsx
function ScrollArea (line 8) | function ScrollArea({
function ScrollBar (line 31) | function ScrollBar({
FILE: examples/image/components/ui/sheet.tsx
function Sheet (line 9) | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive....
function SheetTrigger (line 13) | function SheetTrigger({
function SheetClose (line 19) | function SheetClose({
function SheetPortal (line 25) | function SheetPortal({
function SheetOverlay (line 31) | function SheetOverlay({
function SheetContent (line 47) | function SheetContent({
function SheetHeader (line 88) | function SheetHeader({ className, ...props }: React.ComponentProps<"div"...
function SheetFooter (line 98) | function SheetFooter({ className, ...props }: React.ComponentProps<"div"...
function SheetTitle (line 108) | function SheetTitle({
function SheetDescription (line 121) | function SheetDescription({
FILE: examples/image/lib/examples.ts
type Example (line 3) | interface Example {
FILE: examples/image/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/image/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/mcp/server.ts
function loadHtml (line 12) | function loadHtml(): string {
function startStdio (line 22) | async function startStdio() {
function startHttp (line 33) | async function startHttp() {
FILE: examples/mcp/src/main.tsx
class ErrorBoundary (line 74) | class ErrorBoundary extends Component<
method getDerivedStateFromError (line 79) | static getDerivedStateFromError(error: Error) {
method render (line 82) | render() {
function forceFullWidth (line 101) | function forceFullWidth(spec: Spec): Spec {
function parseSpec (line 115) | function parseSpec(
function applyHostContext (line 127) | function applyHostContext(ctx: {
function McpAppView (line 143) | function McpAppView() {
FILE: examples/mcp/src/mcp-app-view.tsx
function McpAppView (line 27) | function McpAppView() {
FILE: examples/no-ai/app/layout.tsx
function RootLayout (line 20) | function RootLayout({
FILE: examples/no-ai/app/page.tsx
function SpecRenderer (line 15) | function SpecRenderer({ spec }: { spec: Spec }): ReactNode {
function Page (line 28) | function Page() {
FILE: examples/no-ai/lib/examples.ts
type Example (line 3) | interface Example {
FILE: examples/no-ai/lib/render/registry.tsx
function onConfetti (line 10) | function onConfetti(cb: () => void) {
FILE: examples/react-email/app/api/email/route.ts
function GET (line 8) | async function GET(req: Request) {
function POST (line 21) | async function POST(req: Request) {
function emailResponse (line 34) | async function emailResponse(spec: Spec, plain: boolean) {
FILE: examples/react-email/app/api/generate/route.ts
constant SYSTEM_PROMPT (line 9) | const SYSTEM_PROMPT = emailCatalog.prompt();
constant DEFAULT_MODEL (line 11) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 13) | async function POST(req: Request) {
FILE: examples/react-email/app/layout.tsx
function RootLayout (line 13) | function RootLayout({
FILE: examples/react-email/app/page.tsx
type Mode (line 18) | type Mode = "scratch" | "example";
type MobileView (line 19) | type MobileView = "json" | "preview";
type Selection (line 21) | interface Selection {
constant HTML_REFRESH_INTERVAL_MS (line 26) | const HTML_REFRESH_INTERVAL_MS = 2000;
function CopyButton (line 28) | function CopyButton({ text }: { text: string }) {
function isRenderableSpec (line 45) | function isRenderableSpec(spec: Spec | null): spec is Spec {
function Page (line 54) | function Page() {
FILE: examples/react-email/components/ui/button.tsx
function Button (line 41) | function Button({
FILE: examples/react-email/components/ui/resizable.tsx
function ResizablePanelGroup (line 8) | function ResizablePanelGroup({
function ResizablePanel (line 24) | function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
function ResizableHandle (line 28) | function ResizableHandle({
FILE: examples/react-email/components/ui/scroll-area.tsx
function ScrollArea (line 8) | function ScrollArea({
function ScrollBar (line 31) | function ScrollBar({
FILE: examples/react-email/components/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: examples/react-email/components/ui/sheet.tsx
function Sheet (line 9) | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive....
function SheetTrigger (line 13) | function SheetTrigger({
function SheetClose (line 19) | function SheetClose({
function SheetPortal (line 25) | function SheetPortal({
function SheetOverlay (line 31) | function SheetOverlay({
function SheetContent (line 47) | function SheetContent({
function SheetHeader (line 88) | function SheetHeader({ className, ...props }: React.ComponentProps<"div"...
function SheetFooter (line 98) | function SheetFooter({ className, ...props }: React.ComponentProps<"div"...
function SheetTitle (line 108) | function SheetTitle({
function SheetDescription (line 121) | function SheetDescription({
FILE: examples/react-email/components/ui/tabs.tsx
function Tabs (line 9) | function Tabs({
function TabsList (line 43) | function TabsList({
function TabsTrigger (line 59) | function TabsTrigger({
function TabsContent (line 78) | function TabsContent({
FILE: examples/react-email/components/ui/textarea.tsx
function Textarea (line 5) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: examples/react-email/lib/examples.ts
type Example (line 3) | interface Example {
FILE: examples/react-email/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/react-email/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/react-native/app/_layout.tsx
function RootLayout (line 4) | function RootLayout() {
FILE: examples/react-native/app/api/generate+api.ts
constant SYSTEM_PROMPT (line 6) | const SYSTEM_PROMPT = catalog.prompt({ customRules });
constant MAX_PROMPT_LENGTH (line 8) | const MAX_PROMPT_LENGTH = 500;
constant DEFAULT_MODEL (line 9) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 19) | async function POST(req: Request) {
FILE: examples/react-native/app/index.tsx
function getApiBaseUrl (line 23) | function getApiBaseUrl(): string {
constant API_BASE (line 35) | const API_BASE = getApiBaseUrl();
function HomeScreen (line 37) | function HomeScreen() {
FILE: examples/react-native/lib/render/renderer.tsx
type AppRendererProps (line 17) | interface AppRendererProps {
function AppRenderer (line 22) | function AppRenderer({ spec, loading }: AppRendererProps): ReactNode {
FILE: examples/react-pdf/app/api/generate/route.ts
constant SYSTEM_PROMPT (line 10) | const SYSTEM_PROMPT = pdfCatalog.prompt();
constant DEFAULT_MODEL (line 12) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 14) | async function POST(req: Request) {
FILE: examples/react-pdf/app/api/pdf/route.ts
function GET (line 5) | async function GET(req: Request) {
function POST (line 18) | async function POST(req: Request) {
function pdfResponse (line 32) | async function pdfResponse(spec: Spec, name: string, download: boolean) {
FILE: examples/react-pdf/app/layout.tsx
function RootLayout (line 13) | function RootLayout({
FILE: examples/react-pdf/app/page.tsx
type Mode (line 18) | type Mode = "scratch" | "example";
type MobileView (line 19) | type MobileView = "json" | "preview";
type Selection (line 21) | interface Selection {
constant PDF_REFRESH_INTERVAL_MS (line 26) | const PDF_REFRESH_INTERVAL_MS = 2000;
function CopyButton (line 28) | function CopyButton({ text }: { text: string }) {
function isRenderableSpec (line 45) | function isRenderableSpec(spec: Spec | null): spec is Spec {
function Page (line 54) | function Page() {
FILE: examples/react-pdf/components/ui/button.tsx
function Button (line 41) | function Button({
FILE: examples/react-pdf/components/ui/resizable.tsx
function ResizablePanelGroup (line 8) | function ResizablePanelGroup({
function ResizablePanel (line 24) | function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
function ResizableHandle (line 28) | function ResizableHandle({
FILE: examples/react-pdf/components/ui/scroll-area.tsx
function ScrollArea (line 8) | function ScrollArea({
function ScrollBar (line 31) | function ScrollBar({
FILE: examples/react-pdf/components/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: examples/react-pdf/components/ui/sheet.tsx
function Sheet (line 9) | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive....
function SheetTrigger (line 13) | function SheetTrigger({
function SheetClose (line 19) | function SheetClose({
function SheetPortal (line 25) | function SheetPortal({
function SheetOverlay (line 31) | function SheetOverlay({
function SheetContent (line 47) | function SheetContent({
function SheetHeader (line 88) | function SheetHeader({ className, ...props }: React.ComponentProps<"div"...
function SheetFooter (line 98) | function SheetFooter({ className, ...props }: React.ComponentProps<"div"...
function SheetTitle (line 108) | function SheetTitle({
function SheetDescription (line 121) | function SheetDescription({
FILE: examples/react-pdf/components/ui/tabs.tsx
function Tabs (line 9) | function Tabs({
function TabsList (line 43) | function TabsList({
function TabsTrigger (line 59) | function TabsTrigger({
function TabsContent (line 78) | function TabsContent({
FILE: examples/react-pdf/components/ui/textarea.tsx
function Textarea (line 5) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: examples/react-pdf/lib/examples.ts
type Example (line 3) | interface Example {
FILE: examples/react-pdf/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/react-pdf/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/react-three-fiber/app/layout.tsx
function RootLayout (line 8) | function RootLayout({
FILE: examples/react-three-fiber/app/page.tsx
function num (line 27) | function num(v: unknown, fallback: number): number {
function highlightJson (line 98) | function highlightJson(json: string): string {
constant MOBILE_BREAKPOINT (line 112) | const MOBILE_BREAKPOINT = 768;
function subscribeToResize (line 114) | function subscribeToResize(cb: () => void) {
function getIsMobile (line 119) | function getIsMobile() {
function useIsMobile (line 125) | function useIsMobile() {
constant LIST_WIDTH (line 129) | const LIST_WIDTH = 220;
constant JSON_WIDTH (line 130) | const JSON_WIDTH = 380;
constant HEADER_HEIGHT (line 131) | const HEADER_HEIGHT = 40;
constant MOBILE_HEADER_HEIGHT (line 132) | const MOBILE_HEADER_HEIGHT = 48;
function MobileLayout (line 153) | function MobileLayout() {
function DesktopLayout (line 382) | function DesktopLayout() {
function Page (line 487) | function Page() {
FILE: examples/react-three-fiber/app/scenes/_helpers.ts
type Scene (line 3) | type Scene = { name: string; description: string; spec: Spec };
function range (line 7) | function range(n: number) {
FILE: examples/remotion/app/api/generate/route.ts
constant SYSTEM_PROMPT (line 9) | const SYSTEM_PROMPT = getVideoPrompt();
constant MAX_PROMPT_LENGTH (line 11) | const MAX_PROMPT_LENGTH = 500;
constant DEFAULT_MODEL (line 12) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
function POST (line 14) | async function POST(req: Request) {
FILE: examples/remotion/app/layout.tsx
function RootLayout (line 22) | function RootLayout({
FILE: examples/remotion/app/page.tsx
function isSpecComplete (line 12) | function isSpecComplete(spec: TimelineSpec): spec is Required<TimelineSp...
function getHighlighter (line 58) | function getHighlighter() {
function CodeBlock (line 76) | function CodeBlock({ code }: { code: string }) {
function CopyButton (line 109) | function CopyButton({ text }: { text: string }) {
constant EXAMPLE_PROMPTS (line 156) | const EXAMPLE_PROMPTS = [
function Home (line 163) | function Home() {
FILE: examples/remotion/lib/catalog.ts
function getVideoPrompt (line 52) | function getVideoPrompt(): string {
FILE: examples/remotion/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/remotion/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: examples/solid/src/App.tsx
function App (line 5) | function App() {
FILE: examples/solid/src/DemoRenderer.tsx
function DemoRenderer (line 11) | function DemoRenderer() {
FILE: examples/solid/src/lib/components/Badge.tsx
type BadgeProps (line 3) | interface BadgeProps {
function Badge (line 8) | function Badge(renderProps: BaseComponentProps<BadgeProps>) {
FILE: examples/solid/src/lib/components/Button.tsx
type ButtonProps (line 3) | interface ButtonProps {
function Button (line 27) | function Button(renderProps: BaseComponentProps<ButtonProps>) {
FILE: examples/solid/src/lib/components/Card.tsx
type CardProps (line 3) | interface CardProps {
function Card (line 8) | function Card(renderProps: BaseComponentProps<CardProps>) {
FILE: examples/solid/src/lib/components/Input.tsx
type InputProps (line 4) | interface InputProps {
function Input (line 9) | function Input(renderProps: BaseComponentProps<InputProps>) {
FILE: examples/solid/src/lib/components/ListItem.tsx
type ListItemProps (line 3) | interface ListItemProps {
function ListItem (line 9) | function ListItem(renderProps: BaseComponentProps<ListItemProps>) {
FILE: examples/solid/src/lib/components/Stack.tsx
type StackProps (line 3) | interface StackProps {
function Stack (line 10) | function Stack(renderProps: BaseComponentProps<StackProps>) {
FILE: examples/solid/src/lib/components/Text.tsx
type TextProps (line 3) | interface TextProps {
function Text (line 23) | function Text(renderProps: BaseComponentProps<TextProps>) {
FILE: examples/stripe-app/api/app/api/generate/route.ts
constant DEFAULT_MODEL (line 6) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
constant CORS_HEADERS (line 8) | const CORS_HEADERS: Record<string, string> = {
function POST (line 14) | async function POST(req: Request) {
function OPTIONS (line 48) | async function OPTIONS() {
FILE: examples/stripe-app/api/app/layout.tsx
function RootLayout (line 5) | function RootLayout({
FILE: examples/stripe-app/api/app/page.tsx
function Home (line 1) | function Home() {
FILE: examples/stripe-app/drawer-app/scripts/setup.mjs
function loadEnv (line 8) | function loadEnv() {
FILE: examples/stripe-app/drawer-app/src/lib/config.ts
constant API_GENERATE_URL (line 1) | const API_GENERATE_URL =
FILE: examples/stripe-app/drawer-app/src/lib/render/catalog/actions.ts
type SetState (line 6) | type SetState = (
type SetStateFn (line 1567) | type SetStateFn = (
function executeAction (line 1574) | async function executeAction(
FILE: examples/stripe-app/drawer-app/src/lib/render/catalog/components.tsx
type ExtendedRenderProps (line 61) | type ExtendedRenderProps<P = Record<string, unknown>> =
constant BADGE_TYPES (line 258) | const BADGE_TYPES = new Set([
constant BADGE_ALIAS (line 266) | const BADGE_ALIAS: Record<string, string> = {
function coerceBadgeType (line 275) | function coerceBadgeType(
constant BANNER_TYPES (line 337) | const BANNER_TYPES = new Set(["default", "caution", "critical"]);
constant BANNER_ALIAS (line 338) | const BANNER_ALIAS: Record<string, string> = {
function coerceBannerType (line 346) | function coerceBannerType(raw: unknown): "default" | "caution" | "critic...
function coerceAxisGrid (line 779) | function coerceAxisGrid(
FILE: examples/stripe-app/drawer-app/src/lib/render/renderer.tsx
type SetState (line 18) | type SetState = (
type StripeRendererProps (line 22) | interface StripeRendererProps {
function buildRegistry (line 43) | function buildRegistry(
function StripeRenderer (line 105) | function StripeRenderer({
FILE: examples/stripe-app/drawer-app/src/lib/stream-spec.ts
type JsonPatch (line 3) | interface JsonPatch {
function setDeep (line 10) | function setDeep(
function setSpecValue (line 35) | function setSpecValue(spec: Spec, path: string, value: unknown): void {
function applyPatch (line 56) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
function streamSpec (line 81) | async function streamSpec(
FILE: examples/stripe-app/drawer-app/src/lib/stripe.ts
function formatAmount (line 21) | function formatAmount(amount: number, currency = "usd"): string {
function formatDate (line 31) | function formatDate(timestamp: number): string {
FILE: examples/stripe-app/drawer-app/src/views/CustomerDetails.tsx
function createCustomerDetailSpec (line 21) | function createCustomerDetailSpec(
FILE: examples/stripe-app/drawer-app/src/views/Customers.tsx
function createCustomersListSpec (line 21) | function createCustomersListSpec(data: Record<string, unknown>): Spec {
FILE: examples/stripe-app/drawer-app/src/views/Home.tsx
function createRevenueSpec (line 32) | function createRevenueSpec(data: Record<string, unknown>): Spec {
function createPaymentsSpec (line 105) | function createPaymentsSpec(data: Record<string, unknown>): Spec {
function createSubscriptionsSpec (line 187) | function createSubscriptionsSpec(data: Record<string, unknown>): Spec {
function createCustomersSpec (line 287) | function createCustomersSpec(data: Record<string, unknown>): Spec {
function createInvoicesSpec (line 358) | function createInvoicesSpec(data: Record<string, unknown>): Spec {
function loadData (line 489) | async function loadData() {
FILE: examples/stripe-app/drawer-app/src/views/Invoices.tsx
function createInvoicesSpec (line 21) | function createInvoicesSpec(data: Record<string, unknown>): Spec {
FILE: examples/stripe-app/drawer-app/src/views/PaymentDetails.tsx
function createPaymentDetailSpec (line 21) | function createPaymentDetailSpec(
FILE: examples/stripe-app/drawer-app/src/views/Payments.tsx
function createPaymentsSpec (line 21) | function createPaymentsSpec(data: Record<string, unknown>): Spec {
FILE: examples/stripe-app/drawer-app/src/views/Products.tsx
function createProductsSpec (line 21) | function createProductsSpec(data: Record<string, unknown>): Spec {
FILE: examples/stripe-app/drawer-app/src/views/Subscriptions.tsx
function createSubscriptionsSpec (line 21) | function createSubscriptionsSpec(data: Record<string, unknown>): Spec {
FILE: examples/stripe-app/fullpage-app/scripts/setup.mjs
function loadEnv (line 8) | function loadEnv() {
FILE: examples/stripe-app/fullpage-app/src/lib/config.ts
constant API_GENERATE_URL (line 1) | const API_GENERATE_URL =
FILE: examples/stripe-app/fullpage-app/src/lib/render/catalog/actions.ts
type SetState (line 6) | type SetState = (
type SetStateFn (line 1547) | type SetStateFn = (
function executeAction (line 1554) | async function executeAction(
FILE: examples/stripe-app/fullpage-app/src/lib/render/catalog/components.tsx
type ExtendedRenderProps (line 61) | type ExtendedRenderProps<P = Record<string, unknown>> =
constant BADGE_TYPES (line 258) | const BADGE_TYPES = new Set([
constant BADGE_ALIAS (line 266) | const BADGE_ALIAS: Record<string, string> = {
function coerceBadgeType (line 275) | function coerceBadgeType(
constant BANNER_TYPES (line 337) | const BANNER_TYPES = new Set(["default", "caution", "critical"]);
constant BANNER_ALIAS (line 338) | const BANNER_ALIAS: Record<string, string> = {
function coerceBannerType (line 346) | function coerceBannerType(raw: unknown): "default" | "caution" | "critic...
function coerceAxisGrid (line 779) | function coerceAxisGrid(
FILE: examples/stripe-app/fullpage-app/src/lib/render/renderer.tsx
type SetState (line 18) | type SetState = (
type StripeRendererProps (line 22) | interface StripeRendererProps {
function buildRegistry (line 43) | function buildRegistry(
function StripeRenderer (line 105) | function StripeRenderer({
FILE: examples/stripe-app/fullpage-app/src/lib/stream-spec.ts
type JsonPatch (line 3) | interface JsonPatch {
function setDeep (line 10) | function setDeep(
function setSpecValue (line 35) | function setSpecValue(spec: Spec, path: string, value: unknown): void {
function applyPatch (line 56) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
function streamSpec (line 81) | async function streamSpec(
FILE: examples/stripe-app/fullpage-app/src/lib/stripe.ts
function formatAmount (line 21) | function formatAmount(amount: number, currency = "usd"): string {
function formatDate (line 31) | function formatDate(timestamp: number): string {
FILE: examples/stripe-app/fullpage-app/src/views/FullPage.tsx
function createOverviewSpec (line 22) | function createOverviewSpec(data: Record<string, unknown>): Spec {
function loadData (line 121) | async function loadData() {
FILE: examples/svelte-chat/src/lib/agent.ts
constant DEFAULT_MODEL (line 11) | const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
constant AGENT_INSTRUCTIONS (line 13) | const AGENT_INSTRUCTIONS = `You are a knowledgeable assistant that helps...
FILE: examples/svelte-chat/src/lib/rate-limit.ts
function getRedis (line 8) | function getRedis(): Redis | null {
constant MINUTE_LIMIT (line 24) | const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
constant DAILY_LIMIT (line 25) | const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
FILE: examples/svelte-chat/src/lib/tools/crypto.ts
function handleFetchError (line 8) | function handleFetchError(res: Response, coinId: string) {
function sampleTimeSeries (line 18) | function sampleTimeSeries(
FILE: examples/svelte-chat/src/lib/tools/github.ts
function handleGitHubError (line 10) | function handleGitHubError(res: Response, context: string) {
type GitHubPR (line 104) | type GitHubPR = {
type GitHubPRReview (line 118) | type GitHubPRReview = {
type GitHubPRReaction (line 122) | type GitHubPRReaction = {
FILE: examples/svelte-chat/src/lib/tools/weather.ts
function describeWeatherCode (line 98) | function describeWeatherCode(code: number): string {
FILE: examples/svelte-chat/src/lib/utils.ts
function cn (line 5) | function cn(...inputs: ClassValue[]) {
type WithElementRef (line 10) | type WithElementRef<T, E extends HTMLElement = HTMLElement> = T & {
type WithoutChild (line 16) | type WithoutChild<T> = Omit<T, "child"> & { children?: Snippet };
type WithoutChildrenOrChild (line 18) | type WithoutChildrenOrChild<T> = Omit<T, "children" | "child">;
FILE: examples/vite-renderers/src/main.ts
type Renderer (line 4) | type Renderer = "vue" | "react" | "svelte" | "solid";
function switchTo (line 10) | async function switchTo(renderer: Renderer) {
FILE: examples/vite-renderers/src/react/App.tsx
function DemoRenderer (line 21) | function DemoRenderer({ spec }: { spec: Spec }) {
function App (line 35) | function App({
FILE: examples/vite-renderers/src/react/catalog.ts
type AppCatalog (line 5) | type AppCatalog = typeof catalog;
FILE: examples/vite-renderers/src/react/mount.tsx
function mount (line 7) | function mount(container: HTMLElement, renderer: string, spec: Spec) {
function unmount (line 12) | function unmount() {
FILE: examples/vite-renderers/src/shared/handlers.ts
type Get (line 1) | type Get = (path: string) => unknown;
type Set (line 2) | type Set = (path: string, value: unknown) => void;
function makeHandlers (line 17) | function makeHandlers(get: Get, set: Set) {
FILE: examples/vite-renderers/src/solid/App.tsx
function App (line 5) | function App(props: { initialRenderer?: string; spec: Spec }) {
FILE: examples/vite-renderers/src/solid/DemoRenderer.tsx
function DemoRenderer (line 19) | function DemoRenderer(props: { spec: Spec }) {
FILE: examples/vite-renderers/src/solid/catalog.ts
type AppCatalog (line 5) | type AppCatalog = typeof catalog;
FILE: examples/vite-renderers/src/solid/mount.tsx
function mount (line 7) | function mount(container: HTMLElement, renderer: string, spec: Spec) {
function unmount (line 14) | function unmount() {
FILE: examples/vite-renderers/src/svelte/mount.ts
function mount (line 7) | function mount(container: HTMLElement, renderer: string, spec: Spec) {
function unmount (line 14) | function unmount() {
FILE: examples/vite-renderers/src/vue/catalog.ts
type AppCatalog (line 5) | type AppCatalog = typeof catalog;
FILE: examples/vite-renderers/src/vue/mount.ts
function mount (line 7) | function mount(container: HTMLElement, renderer: string, spec: Spec) {
function unmount (line 12) | function unmount() {
FILE: examples/vue/src/lib/catalog.ts
type AppCatalog (line 92) | type AppCatalog = typeof catalog;
FILE: packages/codegen/src/serialize.ts
type SerializeOptions (line 4) | interface SerializeOptions {
constant DEFAULT_OPTIONS (line 11) | const DEFAULT_OPTIONS: Required<SerializeOptions> = {
function escapeString (line 19) | function escapeString(
function serializePropValue (line 41) | function serializePropValue(
function serializeProps (line 108) | function serializeProps(
FILE: packages/codegen/src/traverse.ts
type TreeVisitor (line 6) | interface TreeVisitor {
function traverseSpec (line 18) | function traverseSpec(
function collectUsedComponents (line 48) | function collectUsedComponents(spec: Spec): Set<string> {
function collectStatePaths (line 61) | function collectStatePaths(spec: Spec): Set<string> {
function collectPathFromItem (line 98) | function collectPathFromItem(
function collectPathsFromCondition (line 119) | function collectPathsFromCondition(
function collectActions (line 152) | function collectActions(spec: Spec): Set<string> {
FILE: packages/codegen/src/types.ts
type GeneratedFile (line 6) | interface GeneratedFile {
type CodeGenerator (line 16) | interface CodeGenerator {
FILE: packages/core/src/actions.ts
type ActionConfirm (line 8) | interface ActionConfirm {
type ActionOnSuccess (line 19) | type ActionOnSuccess =
type ActionOnError (line 27) | type ActionOnError =
type ActionBinding (line 39) | interface ActionBinding {
type Action (line 57) | type Action = ActionBinding;
type ActionHandler (line 107) | type ActionHandler<
type ActionDefinition (line 115) | interface ActionDefinition<TParams = Record<string, unknown>> {
type ResolvedAction (line 125) | interface ResolvedAction {
function resolveAction (line 136) | function resolveAction(
function interpolateString (line 170) | function interpolateString(
type ActionExecutionContext (line 183) | interface ActionExecutionContext {
function executeAction (line 199) | async function executeAction(
FILE: packages/core/src/diff.ts
function escapeToken (line 7) | function escapeToken(token: string): string {
function buildPath (line 11) | function buildPath(basePath: string, key: string): string {
function isPlainObject (line 15) | function isPlainObject(value: unknown): value is Record<string, unknown> {
function arraysEqual (line 23) | function arraysEqual(a: unknown[], b: unknown[]): boolean {
function diffToPatches (line 40) | function diffToPatches(
FILE: packages/core/src/edit-modes.ts
type EditMode (line 10) | type EditMode = "patch" | "merge" | "diff";
type EditConfig (line 12) | interface EditConfig {
constant DEFAULT_MODES (line 17) | const DEFAULT_MODES: EditMode[] = ["patch"];
function normalizeModes (line 19) | function normalizeModes(config?: EditConfig): EditMode[] {
function jsonPatchInstructions (line 26) | function jsonPatchInstructions(): string {
function jsonMergeInstructions (line 37) | function jsonMergeInstructions(): string {
function jsonDiffInstructions (line 52) | function jsonDiffInstructions(): string {
function yamlPatchInstructions (line 71) | function yamlPatchInstructions(): string {
function yamlMergeInstructions (line 85) | function yamlMergeInstructions(): string {
function yamlDiffInstructions (line 112) | function yamlDiffInstructions(): string {
function modeSelectionGuidance (line 131) | function modeSelectionGuidance(modes: EditMode[]): string {
function buildEditInstructions (line 154) | function buildEditInstructions(
function addLineNumbers (line 202) | function addLineNumbers(text: string): string {
function isNonEmptySpec (line 210) | function isNonEmptySpec(spec: unknown): spec is Spec {
type BuildEditUserPromptOptions (line 221) | interface BuildEditUserPromptOptions {
function buildEditUserPrompt (line 235) | function buildEditUserPrompt(
FILE: packages/core/src/env.d.ts
type ProcessEnv (line 4) | interface ProcessEnv {
FILE: packages/core/src/merge.ts
function isPlainObject (line 1) | function isPlainObject(value: unknown): value is Record<string, unknown> {
function deepMergeSpec (line 16) | function deepMergeSpec(
FILE: packages/core/src/prompt.ts
type UserPromptOptions (line 8) | interface UserPromptOptions {
function buildUserPrompt (line 45) | function buildUserPrompt(options: UserPromptOptions): string {
FILE: packages/core/src/props.ts
type PropExpression (line 31) | type PropExpression<T = unknown> =
type ComputedFunction (line 50) | type ComputedFunction = (args: Record<string, unknown>) => unknown;
type PropResolutionContext (line 57) | interface PropResolutionContext extends VisibilityContext {
function isStateExpression (line 68) | function isStateExpression(value: unknown): value is { $state: string } {
function isItemExpression (line 77) | function isItemExpression(value: unknown): value is { $item: string } {
function isIndexExpression (line 86) | function isIndexExpression(value: unknown): value is { $index: true } {
function isBindStateExpression (line 95) | function isBindStateExpression(
function isBindItemExpression (line 106) | function isBindItemExpression(value: unknown): value is { $bindItem: str...
function isCondExpression (line 115) | function isCondExpression(
function isComputedExpression (line 127) | function isComputedExpression(
function isTemplateExpression (line 138) | function isTemplateExpression(value: unknown): value is { $template: str...
constant WARNED_COMPUTED_MAX (line 151) | const WARNED_COMPUTED_MAX = 100;
function _resetWarnedComputedFns (line 155) | function _resetWarnedComputedFns(): void {
constant WARNED_TEMPLATE_MAX (line 160) | const WARNED_TEMPLATE_MAX = 100;
function _resetWarnedTemplatePaths (line 164) | function _resetWarnedTemplatePaths(): void {
function resolveBindItemPath (line 186) | function resolveBindItemPath(
function resolvePropValue (line 206) | function resolvePropValue(
function resolveElementProps (line 317) | function resolveElementProps(
function resolveBindings (line 343) | function resolveBindings(
function resolveActionParam (line 375) | function resolveActionParam(
FILE: packages/core/src/schema.test.ts
function hasNoPropertyNames (line 597) | function hasNoPropertyNames(obj: unknown): boolean {
function allObjectsHaveAdditionalPropertiesFalse (line 603) | function allObjectsHaveAdditionalPropertiesFalse(obj: unknown): boolean {
function allObjectPropertiesRequired (line 614) | function allObjectPropertiesRequired(obj: unknown): boolean {
function noAdditionalPropertiesSchema (line 696) | function noAdditionalPropertiesSchema(obj: unknown): boolean {
FILE: packages/core/src/schema.ts
type SchemaBuilder (line 8) | interface SchemaBuilder {
type SchemaType (line 42) | interface SchemaType<TKind extends string = string, TInner = unknown> {
type SchemaDefinition (line 51) | interface SchemaDefinition<
type Schema (line 64) | interface Schema<TDef extends SchemaDefinition = SchemaDefinition> {
type Catalog (line 82) | interface Catalog<
type JsonSchemaOptions (line 109) | interface JsonSchemaOptions {
type PromptOptions (line 131) | interface PromptOptions {
type PromptContext (line 154) | interface PromptContext<TCatalog = unknown> {
type PromptTemplate (line 170) | type PromptTemplate<TCatalog = unknown> = (
type BuiltInAction (line 179) | interface BuiltInAction {
type SchemaOptions (line 189) | interface SchemaOptions<TCatalog = unknown> {
type SpecValidationResult (line 206) | interface SpecValidationResult<T> {
type InferCatalogComponents (line 220) | type InferCatalogComponents<C extends Catalog> =
type InferCatalogActions (line 231) | type InferCatalogActions<C extends Catalog> =
type InferComponentProps (line 242) | type InferComponentProps<
type InferActionParams (line 253) | type InferActionParams<
type InferCatalogInput (line 264) | type InferCatalogInput<T> =
type InferCatalogField (line 269) | type InferCatalogField<T> =
type InferMapEntryRequired (line 292) | type InferMapEntryRequired<T> = {
type InferMapEntryOptional (line 297) | type InferMapEntryOptional<T> = {
type InferMapEntryField (line 301) | type InferMapEntryField<T> =
type InferSpec (line 317) | type InferSpec<TDef extends SchemaDefinition, TCatalog> = TDef extends {
type InferSpecObject (line 323) | type InferSpecObject<Shape, TCatalog> = {
type InferSpecField (line 327) | type InferSpecField<T, TCatalog> =
type InferRefType (line 348) | type InferRefType<Path, TCatalog> = Path extends "catalog.components"
type InferPropsOfType (line 358) | type InferPropsOfType<Path, TCatalog> = Path extends "catalog.components"
function createBuilder (line 369) | function createBuilder(): SchemaBuilder {
function defineSchema (line 389) | function defineSchema<TDef extends SchemaDefinition>(
function createCatalogFromSchema (line 412) | function createCatalogFromSchema<TDef extends SchemaDefinition, TCatalog>(
function buildZodSchemaFromDefinition (line 471) | function buildZodSchemaFromDefinition(
function buildZodType (line 478) | function buildZodType(schemaType: SchemaType, catalogData: unknown): z.Z...
function getKeysFromPath (line 538) | function getKeysFromPath(path: string, catalogData: unknown): string[] {
function getPropsFromPath (line 554) | function getPropsFromPath(path: string, catalogData: unknown): z.ZodType...
function generatePrompt (line 575) | function generatePrompt<TDef extends SchemaDefinition, TCatalog>(
type CatalogComponentDef (line 1101) | interface CatalogComponentDef {
function getExampleProps (line 1113) | function getExampleProps(def: CatalogComponentDef): Record<string, unkno...
function generateExamplePropsFromZod (line 1127) | function generateExamplePropsFromZod(
function generateExampleValue (line 1162) | function generateExampleValue(schema: z.ZodType): unknown {
function findFirstStringProp (line 1221) | function findFirstStringProp(schema?: z.ZodType): string | null {
function getZodTypeName (line 1260) | function getZodTypeName(schema: z.ZodType): string {
function formatZodType (line 1270) | function formatZodType(schema: z.ZodType): string {
function zodTypeName (line 1357) | function zodTypeName(def: Record<string, unknown>): string {
function normalizeTypeName (line 1369) | function normalizeTypeName(raw: string): string {
function zodToJsonSchema (line 1384) | function zodToJsonSchema(schema: z.ZodType, strict = false): object {
function defineCatalog (line 1518) | function defineCatalog<
FILE: packages/core/src/spec-validator.ts
type SpecIssueSeverity (line 10) | type SpecIssueSeverity = "error" | "warning";
type SpecIssue (line 15) | interface SpecIssue {
type SpecValidationIssues (line 38) | interface SpecValidationIssues {
type ValidateSpecOptions (line 48) | interface ValidateSpecOptions {
function validateSpec (line 74) | function validateSpec(
function autoFixSpec (line 212) | function autoFixSpec(spec: Spec): {
function formatSpecIssues (line 290) | function formatSpecIssues(issues: SpecIssue[]): string {
FILE: packages/core/src/state-store.ts
function immutableSetByPath (line 13) | function immutableSetByPath(
function createStateStore (line 59) | function createStateStore(initialState: StateModel = {}): StateStore {
type StoreAdapterConfig (line 116) | interface StoreAdapterConfig {
function createStoreAdapter (line 133) | function createStoreAdapter(config: StoreAdapterConfig): StateStore {
constant MAX_FLATTEN_DEPTH (line 166) | const MAX_FLATTEN_DEPTH = 20;
function flattenToPointers (line 180) | function flattenToPointers(
FILE: packages/core/src/types.test.ts
function transformText (line 884) | async function transformText(text: string): Promise<StreamChunk[]> {
FILE: packages/core/src/types.ts
type DynamicValue (line 10) | type DynamicValue<T = unknown> = T | { $state: string };
type DynamicString (line 15) | type DynamicString = DynamicValue<string>;
type DynamicNumber (line 20) | type DynamicNumber = DynamicValue<number>;
type DynamicBoolean (line 25) | type DynamicBoolean = DynamicValue<boolean>;
type UIElement (line 56) | interface UIElement<
type FlatElement (line 85) | interface FlatElement<
type ComparisonOperators (line 105) | type ComparisonOperators = {
type StateCondition (line 123) | type StateCondition = { $state: string } & ComparisonOperators;
type ItemCondition (line 131) | type ItemCondition = { $item: string } & ComparisonOperators;
type IndexCondition (line 137) | type IndexCondition = { $index: true } & ComparisonOperators;
type SingleCondition (line 140) | type SingleCondition = StateCondition | ItemCondition | IndexCondition;
type AndCondition (line 147) | type AndCondition = { $and: VisibilityCondition[] };
type OrCondition (line 152) | type OrCondition = { $or: VisibilityCondition[] };
type VisibilityCondition (line 162) | type VisibilityCondition =
type Spec (line 172) | interface Spec {
type StateModel (line 185) | type StateModel = Record<string, unknown>;
type StateStore (line 194) | interface StateStore {
type ComponentSchema (line 220) | type ComponentSchema = z.ZodType<Record<string, unknown>>;
type ValidationMode (line 225) | type ValidationMode = "strict" | "warn" | "ignore";
type PatchOp (line 230) | type PatchOp = "add" | "remove" | "replace" | "move" | "copy" | "test";
type JsonPatch (line 235) | interface JsonPatch {
function resolveDynamicValue (line 247) | function resolveDynamicValue<T>(
function unescapeJsonPointer (line 268) | function unescapeJsonPointer(token: string): string {
function parseJsonPointer (line 275) | function parseJsonPointer(path: string): string[] {
function getByPath (line 283) | function getByPath(obj: unknown, path: string): unknown {
function isNumericIndex (line 313) | function isNumericIndex(str: string): boolean {
function setByPath (line 321) | function setByPath(
function addByPath (line 371) | function addByPath(
function removeByPath (line 421) | function removeByPath(obj: Record<string, unknown>, path: string): void {
function deepEqual (line 459) | function deepEqual(a: unknown, b: unknown): boolean {
function findFormValue (line 496) | function findFormValue(
type SpecStreamLine (line 547) | type SpecStreamLine = JsonPatch;
function parseSpecStreamLine (line 556) | function parseSpecStreamLine(line: string): SpecStreamLine | null {
function applySpecStreamPatch (line 579) | function applySpecStreamPatch<T extends Record<string, unknown>>(
function applySpecPatch (line 634) | function applySpecPatch(spec: Spec, patch: SpecStreamLine): Spec {
type NestedNode (line 648) | interface NestedNode {
function nestedToFlat (line 688) | function nestedToFlat(nested: Record<string, unknown>): Spec {
function compileSpecStream (line 751) | function compileSpecStream<
type SpecStreamCompiler (line 783) | interface SpecStreamCompiler<T> {
function createSpecStreamCompiler (line 815) | function createSpecStreamCompiler<T = Record<string, unknown>>(
type MixedStreamCallbacks (line 888) | interface MixedStreamCallbacks {
type MixedStreamParser (line 900) | interface MixedStreamParser {
function createMixedStreamParser (line 927) | function createMixedStreamParser(
type StreamChunk (line 998) | type StreamChunk =
constant SPEC_FENCE_OPEN (line 1005) | const SPEC_FENCE_OPEN = "```spec";
constant SPEC_FENCE_CLOSE (line 1007) | const SPEC_FENCE_CLOSE = "```";
function createJsonRenderTransform (line 1039) | function createJsonRenderTransform(): TransformStream<
constant SPEC_DATA_PART (line 1258) | const SPEC_DATA_PART = "spec" as const;
constant SPEC_DATA_PART_TYPE (line 1266) | const SPEC_DATA_PART_TYPE = `data-${SPEC_DATA_PART}` as const;
type SpecDataPart (line 1275) | type SpecDataPart =
function pipeJsonRender (line 1299) | function pipeJsonRender<T = StreamChunk>(
FILE: packages/core/src/validation.ts
type ValidationCheck (line 10) | interface ValidationCheck {
type ValidationConfig (line 22) | interface ValidationConfig {
type ValidationFunction (line 52) | type ValidationFunction = (
type ValidationFunctionDefinition (line 60) | interface ValidationFunctionDefinition {
type ValidationCheckResult (line 240) | interface ValidationCheckResult {
type ValidationResult (line 249) | interface ValidationResult {
type ValidationContext (line 258) | interface ValidationContext {
function runValidationCheck (line 270) | function runValidationCheck(
function runValidation (line 310) | function runValidation(
FILE: packages/core/src/visibility.ts
type VisibilityContext (line 83) | interface VisibilityContext {
function resolveComparisonValue (line 99) | function resolveComparisonValue(
function isItemCondition (line 117) | function isItemCondition(cond: SingleCondition): cond is ItemCondition {
function isIndexCondition (line 121) | function isIndexCondition(cond: SingleCondition): cond is IndexCondition {
function resolveConditionValue (line 128) | function resolveConditionValue(
function evaluateCondition (line 154) | function evaluateCondition(
function isAndCondition (line 215) | function isAndCondition(
function isOrCondition (line 229) | function isOrCondition(
function evaluateVisibility (line 250) | function evaluateVisibility(
FILE: packages/image/src/catalog-types.ts
type SetState (line 10) | type SetState = (
type ComponentContext (line 14) | interface ComponentContext<
type ComponentFn (line 23) | type ComponentFn<
type Components (line 28) | type Components<C extends Catalog> = {
FILE: packages/image/src/catalog.ts
type StandardComponentDefinitions (line 222) | type StandardComponentDefinitions = typeof standardComponentDefinitions;
type StandardComponentProps (line 224) | type StandardComponentProps<
FILE: packages/image/src/components/standard.tsx
function cleanStyle (line 23) | function cleanStyle(raw: Record<string, unknown>): React.CSSProperties {
function FrameComponent (line 37) | function FrameComponent({
function BoxComponent (line 65) | function BoxComponent({
function RowComponent (line 105) | function RowComponent({
function ColumnComponent (line 129) | function ColumnComponent({
function HeadingComponent (line 156) | function HeadingComponent({
function TextComponent (line 179) | function TextComponent({
function ImageComponent (line 203) | function ImageComponent({
function DividerComponent (line 225) | function DividerComponent({
function SpacerComponent (line 243) | function SpacerComponent({
FILE: packages/image/src/render.tsx
type RenderOptions (line 15) | interface RenderOptions {
function renderElement (line 28) | function renderElement(
type ImageDimensions (line 119) | interface ImageDimensions {
function getDimensions (line 124) | function getDimensions(
function buildTree (line 141) | function buildTree(
function renderToSvg (line 171) | async function renderToSvg(
function renderToPng (line 191) | async function renderToPng(
FILE: packages/image/src/schema.ts
type ImageSchema (line 48) | type ImageSchema = typeof schema;
type ImageSpec (line 50) | type ImageSpec<TCatalog> = typeof schema extends {
FILE: packages/image/src/types.ts
type ComponentRenderProps (line 4) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 10) | type ComponentRenderer<P = Record<string, unknown>> = ComponentType<
type ComponentRegistry (line 14) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
FILE: packages/jotai/src/index.test.ts
function createTestStore (line 6) | function createTestStore(initial: Record<string, unknown> = {}) {
FILE: packages/jotai/src/index.ts
type JotaiStore (line 8) | type JotaiStore = ReturnType<typeof createJotaiStore>;
type JotaiStateStoreOptions (line 13) | interface JotaiStateStoreOptions {
function jotaiStateStore (line 53) | function jotaiStateStore(options: JotaiStateStoreOptions): StateStore {
FILE: packages/mcp/src/build-app-html.ts
type BuildAppHtmlOptions (line 4) | interface BuildAppHtmlOptions {
function buildAppHtml (line 46) | function buildAppHtml(options: BuildAppHtmlOptions): string {
function escapeHtml (line 65) | function escapeHtml(str: string): string {
FILE: packages/mcp/src/server.ts
constant RESOURCE_MIME_TYPE (line 8) | const RESOURCE_MIME_TYPE = "text/html;profile=mcp-app";
function getExtApps (line 15) | async function getExtApps() {
function registerJsonRenderTool (line 31) | async function registerJsonRenderTool(
function registerJsonRenderResource (line 73) | async function registerJsonRenderResource(
function createMcpApp (line 131) | async function createMcpApp(
FILE: packages/mcp/src/types.ts
type CreateMcpAppOptions (line 6) | interface CreateMcpAppOptions {
type McpToolOptions (line 28) | interface McpToolOptions {
type RegisterToolOptions (line 41) | interface RegisterToolOptions {
type RegisterResourceOptions (line 57) | interface RegisterResourceOptions {
FILE: packages/mcp/src/use-json-render-app.ts
type UseJsonRenderAppOptions (line 8) | interface UseJsonRenderAppOptions {
type UseJsonRenderAppReturn (line 18) | interface UseJsonRenderAppReturn {
type ToolResultContent (line 41) | interface ToolResultContent {
function parseSpecFromToolResult (line 46) | function parseSpecFromToolResult(result: {
function useJsonRenderApp (line 72) | function useJsonRenderApp(
FILE: packages/react-email/src/__fixtures__/examples.ts
type Example (line 3) | interface Example {
FILE: packages/react-email/src/catalog-types.ts
type SetState (line 15) | type SetState = (
type ComponentContext (line 23) | interface ComponentContext<
type ComponentFn (line 34) | type ComponentFn<
type Components (line 39) | type Components<C extends Catalog> = {
FILE: packages/react-email/src/catalog.ts
type StandardComponentDefinitions (line 213) | type StandardComponentDefinitions = typeof standardComponentDefinitions;
type StandardComponentProps (line 215) | type StandardComponentProps<
FILE: packages/react-email/src/components/standard.tsx
function HtmlComponent (line 27) | function HtmlComponent({
function HeadComponent (line 40) | function HeadComponent({
function BodyComponent (line 46) | function BodyComponent({
function ContainerComponent (line 55) | function ContainerComponent({
function SectionComponent (line 66) | function SectionComponent({
function RowComponent (line 75) | function RowComponent({
function ColumnComponent (line 84) | function ColumnComponent({
function HeadingComponent (line 97) | function HeadingComponent({
function TextComponent (line 109) | function TextComponent({
function LinkComponent (line 117) | function LinkComponent({
function ButtonComponent (line 129) | function ButtonComponent({
function ImageComponent (line 141) | function ImageComponent({
function HrComponent (line 157) | function HrComponent({
function PreviewComponent (line 169) | function PreviewComponent({
function MarkdownComponent (line 177) | function MarkdownComponent({
FILE: packages/react-email/src/contexts/actions.tsx
function generateUniqueId (line 19) | function generateUniqueId(): string {
function deepResolveValue (line 23) | function deepResolveValue(
type PendingConfirmation (line 61) | interface PendingConfirmation {
type ActionContextValue (line 68) | interface ActionContextValue {
type ActionProviderProps (line 80) | interface ActionProviderProps {
function ActionProvider (line 86) | function ActionProvider({
function useActions (line 249) | function useActions(): ActionContextValue {
function useAction (line 257) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 269) | interface ConfirmDialogProps {
function ConfirmDialog (line 279) | function ConfirmDialog(_props: ConfirmDialogProps) {
FILE: packages/react-email/src/contexts/repeat-scope.tsx
type RepeatScopeValue (line 3) | interface RepeatScopeValue {
function RepeatScopeProvider (line 11) | function RepeatScopeProvider({
function useRepeatScope (line 24) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/react-email/src/contexts/state.tsx
type StateContextValue (line 13) | interface StateContextValue {
type StateProviderProps (line 22) | interface StateProviderProps {
function StateProvider (line 28) | function StateProvider({
function useStateStore (line 94) | function useStateStore(): StateContextValue {
function useStateValue (line 102) | function useStateValue<T>(path: string): T | undefined {
function useStateBinding (line 107) | function useStateBinding<T>(
FILE: packages/react-email/src/contexts/validation.tsx
type FieldValidationState (line 17) | interface FieldValidationState {
type ValidationContextValue (line 23) | interface ValidationContextValue {
type ValidationProviderProps (line 35) | interface ValidationProviderProps {
function dynamicArgsEqual (line 40) | function dynamicArgsEqual(
function validationConfigEqual (line 70) | function validationConfigEqual(
function ValidationProvider (line 92) | function ValidationProvider({
function useValidation (line 207) | function useValidation(): ValidationContextValue {
function useFieldValidation (line 215) | function useFieldValidation(
FILE: packages/react-email/src/contexts/visibility.tsx
type VisibilityContextValue (line 14) | interface VisibilityContextValue {
type VisibilityProviderProps (line 21) | interface VisibilityProviderProps {
function VisibilityProvider (line 25) | function VisibilityProvider({ children }: VisibilityProviderProps) {
function useVisibility (line 51) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 59) | function useIsVisible(
FILE: packages/react-email/src/render.test.tsx
function minimalSpec (line 11) | function minimalSpec(bodyChildren: Spec["elements"] = {}): Spec {
function validateSpecStructure (line 31) | function validateSpecStructure(spec: Spec) {
FILE: packages/react-email/src/render.tsx
type RenderComponentRegistry (line 15) | type RenderComponentRegistry = Record<string, React.ComponentType<any>>;
type RenderOptions (line 17) | interface RenderOptions {
function renderElement (line 25) | function renderElement(
function buildDocument (line 115) | function buildDocument(
function renderToHtml (line 151) | async function renderToHtml(
function renderToPlainText (line 162) | async function renderToPlainText(
FILE: packages/react-email/src/renderer.tsx
type ComponentRenderProps (line 39) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 47) | type ComponentRenderer<P = Record<string, unknown>> = ComponentType<
type ComponentRegistry (line 51) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type RendererProps (line 53) | interface RendererProps {
type ElementErrorBoundaryProps (line 65) | interface ElementErrorBoundaryProps {
type ElementErrorBoundaryState (line 70) | interface ElementErrorBoundaryState {
class ElementErrorBoundary (line 74) | class ElementErrorBoundary extends React.Component<
method constructor (line 78) | constructor(props: ElementErrorBoundaryProps) {
method getDerivedStateFromError (line 83) | static getDerivedStateFromError(): ElementErrorBoundaryState {
method componentDidCatch (line 87) | componentDidCatch(error: Error, info: ErrorInfo) {
method render (line 95) | render() {
type ElementRendererProps (line 107) | interface ElementRendererProps {
function RepeatChildren (line 237) | function RepeatChildren({
function Renderer (line 305) | function Renderer({
type JSONUIProviderProps (line 344) | interface JSONUIProviderProps {
function JSONUIProvider (line 359) | function JSONUIProvider({
type DefineRegistryResult (line 384) | interface DefineRegistryResult {
type DefineRegistryComponentFn (line 388) | type DefineRegistryComponentFn = (ctx: {
function defineRegistry (line 396) | function defineRegistry<C extends Catalog>(
type CreateRendererProps (line 430) | interface CreateRendererProps {
type ComponentMap (line 439) | type ComponentMap<
function createRenderer (line 451) | function createRenderer<
FILE: packages/react-email/src/schema.ts
type ReactEmailSchema (line 51) | type ReactEmailSchema = typeof schema;
type ReactEmailSpec (line 53) | type ReactEmailSpec<TCatalog> = typeof schema extends {
FILE: packages/react-native/src/catalog-types.ts
type SetState (line 20) | type SetState = (
type ComponentContext (line 35) | interface ComponentContext<
type ComponentFn (line 58) | type ComponentFn<
type Components (line 71) | type Components<C extends Catalog> = {
type ActionFn (line 87) | type ActionFn<
type Actions (line 104) | type Actions<C extends Catalog> = {
FILE: packages/react-native/src/catalog.ts
type ComponentDefinition (line 503) | type ComponentDefinition = {
type ActionDefinition (line 513) | type ActionDefinition = {
FILE: packages/react-native/src/components/standard.tsx
function ContainerComponent (line 26) | function ContainerComponent({ element, children }: ComponentRenderProps) {
function RowComponent (line 54) | function RowComponent({ element, children }: ComponentRenderProps) {
function ColumnComponent (line 87) | function ColumnComponent({ element, children }: ComponentRenderProps) {
function ScrollContainerComponent (line 118) | function ScrollContainerComponent({ element, children }: ComponentRender...
function SafeAreaComponent (line 145) | function SafeAreaComponent({ element, children }: ComponentRenderProps) {
function SpacerComponent (line 162) | function SpacerComponent({ element }: ComponentRenderProps) {
function PressableComponent (line 179) | function PressableComponent({ children, emit }: ComponentRenderProps) {
function DividerComponent (line 193) | function DividerComponent({ element }: ComponentRenderProps) {
function HeadingComponent (line 229) | function HeadingComponent({ element }: ComponentRenderProps) {
function ParagraphComponent (line 253) | function ParagraphComponent({ element }: ComponentRenderProps) {
function LabelComponent (line 283) | function LabelComponent({ element }: ComponentRenderProps) {
function ImageComponent (line 304) | function ImageComponent({ element }: ComponentRenderProps) {
function AvatarComponent (line 335) | function AvatarComponent({ element }: ComponentRenderProps) {
function BadgeComponent (line 392) | function BadgeComponent({ element }: ComponentRenderProps) {
function ChipComponent (line 426) | function ChipComponent({ element, emit }: ComponentRenderProps) {
function ButtonComponent (line 486) | function ButtonComponent({ element, emit }: ComponentRenderProps) {
function TextInputComponent (line 544) | function TextInputComponent({ element, bindings }: ComponentRenderProps) {
function SwitchComponent (line 590) | function SwitchComponent({ element, bindings }: ComponentRenderProps) {
function CheckboxComponent (line 617) | function CheckboxComponent({ element, bindings }: ComponentRenderProps) {
function SliderComponent (line 670) | function SliderComponent({ element }: ComponentRenderProps) {
function SearchBarComponent (line 721) | function SearchBarComponent({ element, emit }: ComponentRenderProps) {
function SpinnerComponent (line 760) | function SpinnerComponent({ element }: ComponentRenderProps) {
function ProgressBarComponent (line 771) | function ProgressBarComponent({ element }: ComponentRenderProps) {
function CardComponent (line 807) | function CardComponent({ element, children }: ComponentRenderProps) {
function ListItemComponent (line 865) | function ListItemComponent({ element, emit }: ComponentRenderProps) {
function ModalComponent (line 936) | function ModalComponent({ element, children }: ComponentRenderProps) {
function createStandardActionHandlers (line 969) | function createStandardActionHandlers(options?: {
FILE: packages/react-native/src/contexts/actions.tsx
function generateUniqueId (line 25) | function generateUniqueId(): string {
function deepResolveValue (line 40) | function deepResolveValue(
type PendingConfirmation (line 86) | interface PendingConfirmation {
type ActionContextValue (line 100) | interface ActionContextValue {
type ActionProviderProps (line 122) | interface ActionProviderProps {
function ActionProvider (line 133) | function ActionProvider({
function useActions (line 341) | function useActions(): ActionContextValue {
function useAction (line 352) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 367) | interface ConfirmDialogProps {
function ConfirmDialog (line 379) | function ConfirmDialog({
FILE: packages/react-native/src/contexts/repeat-scope.tsx
type RepeatScopeValue (line 6) | interface RepeatScopeValue {
function RepeatScopeProvider (line 20) | function RepeatScopeProvider({
function useRepeatScope (line 36) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/react-native/src/contexts/validation.tsx
type FieldValidationState (line 20) | interface FieldValidationState {
type ValidationContextValue (line 32) | interface ValidationContextValue {
type ValidationProviderProps (line 54) | interface ValidationProviderProps {
function dynamicArgsEqual (line 64) | function dynamicArgsEqual(
function validationConfigEqual (line 98) | function validationConfigEqual(
function ValidationProvider (line 126) | function ValidationProvider({
function useValidation (line 249) | function useValidation(): ValidationContextValue {
function useFieldValidation (line 260) | function useFieldValidation(
FILE: packages/react-native/src/contexts/visibility.tsx
type VisibilityContextValue (line 17) | interface VisibilityContextValue {
type VisibilityProviderProps (line 29) | interface VisibilityProviderProps {
function VisibilityProvider (line 36) | function VisibilityProvider({ children }: VisibilityProviderProps) {
function useVisibility (line 67) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 78) | function useIsVisible(
FILE: packages/react-native/src/hooks.ts
function useBoundProp (line 33) | function useBoundProp<T>(
type ParseResult (line 53) | interface ParseResult {
function looksLikeJson (line 63) | function looksLikeJson(line: string): boolean {
function parsePatchLine (line 76) | function parsePatchLine(line: string): ParseResult {
function setSpecValue (line 122) | function setSpecValue(newSpec: Spec, path: string, value: unknown): void {
function removeSpecValue (line 166) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 204) | function getSpecValue(spec: Spec, path: string): unknown {
function applyPatch (line 213) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
type StreamResult (line 253) | interface StreamResult {
type UseUIStreamOptions (line 265) | interface UseUIStreamOptions {
type UseUIStreamReturn (line 307) | interface UseUIStreamReturn {
function useUIStream (line 327) | function useUIStream({
function flatToTree (line 607) | function flatToTree(elements: FlatElement[]): Spec {
FILE: packages/react-native/src/renderer.tsx
type ComponentRenderProps (line 46) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 66) | type ComponentRenderer<P = Record<string, unknown>> = ComponentType<
type ComponentRegistry (line 73) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type RendererProps (line 78) | interface RendererProps {
type ElementErrorBoundaryProps (line 99) | interface ElementErrorBoundaryProps {
type ElementErrorBoundaryState (line 104) | interface ElementErrorBoundaryState {
class ElementErrorBoundary (line 108) | class ElementErrorBoundary extends React.Component<
method constructor (line 112) | constructor(props: ElementErrorBoundaryProps) {
method getDerivedStateFromError (line 117) | static getDerivedStateFromError(): ElementErrorBoundaryState {
method componentDidCatch (line 121) | componentDidCatch(error: Error, info: ErrorInfo) {
method render (line 129) | render() {
type ElementRendererProps (line 139) | interface ElementRendererProps {
function RepeatChildren (line 289) | function RepeatChildren({
function Renderer (line 372) | function Renderer({
type JSONUIProviderProps (line 417) | interface JSONUIProviderProps {
function JSONUIProvider (line 450) | function JSONUIProvider({
function ConfirmationDialogManager (line 481) | function ConfirmationDialogManager() {
type DefineRegistryResult (line 504) | interface DefineRegistryResult {
function defineRegistry (line 556) | function defineRegistry<C extends Catalog>(
type DefineRegistryComponentFn (line 630) | type DefineRegistryComponentFn = (ctx: {
type DefineRegistryActionFn (line 639) | type DefineRegistryActionFn = (
type CreateRendererProps (line 652) | interface CreateRendererProps {
type ComponentMap (line 675) | type ComponentMap<
function createRenderer (line 701) | function createRenderer<
FILE: packages/react-native/src/schema.ts
type ReactNativeSchema (line 94) | type ReactNativeSchema = typeof schema;
type ReactNativeSpec (line 99) | type ReactNativeSpec<TCatalog> = typeof schema extends {
type ElementTreeSchema (line 109) | type ElementTreeSchema = ReactNativeSchema;
type ElementTreeSpec (line 111) | type ElementTreeSpec<T> = ReactNativeSpec<T>;
FILE: packages/react-pdf/src/catalog-types.ts
type SetState (line 15) | type SetState = (
type ComponentContext (line 23) | interface ComponentContext<
type ComponentFn (line 34) | type ComponentFn<
type Components (line 39) | type Components<C extends Catalog> = {
FILE: packages/react-pdf/src/catalog.ts
type StandardComponentDefinitions (line 288) | type StandardComponentDefinitions = typeof standardComponentDefinitions;
type StandardComponentProps (line 290) | type StandardComponentProps<
FILE: packages/react-pdf/src/components/standard.tsx
constant EMOJI_RE (line 15) | const EMOJI_RE =
function stripEmoji (line 18) | function stripEmoji(text: string): string {
function DocumentComponent (line 29) | function DocumentComponent({
function PageComponent (line 46) | function PageComponent({
function ViewComponent (line 75) | function ViewComponent({
function RowComponent (line 104) | function RowComponent({
function ColumnComponent (line 127) | function ColumnComponent({
function HeadingComponent (line 160) | function HeadingComponent({
function TextComponent (line 181) | function TextComponent({
function ImageComponent (line 208) | function ImageComponent({
function LinkComponent (line 225) | function LinkComponent({
function TableComponent (line 267) | function TableComponent({
function ListComponent (line 345) | function ListComponent({
function DividerComponent (line 385) | function DividerComponent({
function SpacerComponent (line 402) | function SpacerComponent({
function PageNumberComponent (line 414) | function PageNumberComponent({
FILE: packages/react-pdf/src/contexts/actions.tsx
function generateUniqueId (line 20) | function generateUniqueId(): string {
function deepResolveValue (line 25) | function deepResolveValue(
type PendingConfirmation (line 63) | interface PendingConfirmation {
type ActionContextValue (line 70) | interface ActionContextValue {
type ActionProviderProps (line 82) | interface ActionProviderProps {
function ActionProvider (line 88) | function ActionProvider({
function useActions (line 251) | function useActions(): ActionContextValue {
function useAction (line 259) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 271) | interface ConfirmDialogProps {
function ConfirmDialog (line 281) | function ConfirmDialog(_props: ConfirmDialogProps) {
FILE: packages/react-pdf/src/contexts/repeat-scope.tsx
type RepeatScopeValue (line 3) | interface RepeatScopeValue {
function RepeatScopeProvider (line 11) | function RepeatScopeProvider({
function useRepeatScope (line 24) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/react-pdf/src/contexts/validation.tsx
type FieldValidationState (line 17) | interface FieldValidationState {
type ValidationContextValue (line 23) | interface ValidationContextValue {
type ValidationProviderProps (line 35) | interface ValidationProviderProps {
function dynamicArgsEqual (line 40) | function dynamicArgsEqual(
function validationConfigEqual (line 70) | function validationConfigEqual(
function ValidationProvider (line 92) | function ValidationProvider({
function useValidation (line 207) | function useValidation(): ValidationContextValue {
function useFieldValidation (line 215) | function useFieldValidation(
FILE: packages/react-pdf/src/contexts/visibility.tsx
type VisibilityContextValue (line 14) | interface VisibilityContextValue {
type VisibilityProviderProps (line 21) | interface VisibilityProviderProps {
function VisibilityProvider (line 25) | function VisibilityProvider({ children }: VisibilityProviderProps) {
function useVisibility (line 51) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 59) | function useIsVisible(
FILE: packages/react-pdf/src/render.tsx
type RenderComponentRegistry (line 19) | type RenderComponentRegistry = Record<string, React.ComponentType<any>>;
type RenderOptions (line 21) | interface RenderOptions {
function renderElement (line 29) | function renderElement(
function buildDocument (line 120) | function buildDocument(
function renderToBuffer (line 151) | async function renderToBuffer(
function renderToStream (line 162) | async function renderToStream(
function renderToFile (line 173) | async function renderToFile(
FILE: packages/react-pdf/src/renderer.tsx
type ComponentRenderProps (line 40) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 48) | type ComponentRenderer<P = Record<string, unknown>> = ComponentType<
type ComponentRegistry (line 52) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type RendererProps (line 54) | interface RendererProps {
type ElementErrorBoundaryProps (line 66) | interface ElementErrorBoundaryProps {
type ElementErrorBoundaryState (line 71) | interface ElementErrorBoundaryState {
class ElementErrorBoundary (line 75) | class ElementErrorBoundary extends React.Component<
method constructor (line 79) | constructor(props: ElementErrorBoundaryProps) {
method getDerivedStateFromError (line 84) | static getDerivedStateFromError(): ElementErrorBoundaryState {
method componentDidCatch (line 88) | componentDidCatch(error: Error, info: ErrorInfo) {
method render (line 96) | render() {
type ElementRendererProps (line 108) | interface ElementRendererProps {
function RepeatChildren (line 245) | function RepeatChildren({
function Renderer (line 313) | function Renderer({
type JSONUIProviderProps (line 352) | interface JSONUIProviderProps {
function JSONUIProvider (line 369) | function JSONUIProvider({
type DefineRegistryResult (line 399) | interface DefineRegistryResult {
type DefineRegistryComponentFn (line 403) | type DefineRegistryComponentFn = (ctx: {
function defineRegistry (line 411) | function defineRegistry<C extends Catalog>(
type CreateRendererProps (line 445) | interface CreateRendererProps {
type ComponentMap (line 455) | type ComponentMap<
function createRenderer (line 467) | function createRenderer<
FILE: packages/react-pdf/src/schema.ts
type ReactPdfSchema (line 51) | type ReactPdfSchema = typeof schema;
type ReactPdfSpec (line 53) | type ReactPdfSpec<TCatalog> = typeof schema extends {
FILE: packages/react-state/src/env.d.ts
type ProcessEnv (line 4) | interface ProcessEnv {
FILE: packages/react-state/src/index.tsx
type StateContextValue (line 24) | interface StateContextValue {
type StateProviderProps (line 42) | interface StateProviderProps {
function computeInitialFlat (line 59) | function computeInitialFlat(
function StateProvider (line 76) | function StateProvider({
function useStateStore (line 190) | function useStateStore(): StateContextValue {
function useStateValue (line 201) | function useStateValue<T>(path: string): T | undefined {
function useStateBinding (line 214) | function useStateBinding<T>(
FILE: packages/react-three-fiber/src/catalog.ts
type ComponentDefinition (line 825) | type ComponentDefinition = {
type ThreeProps (line 840) | type ThreeProps<K extends keyof typeof threeComponentDefinitions> =
FILE: packages/react-three-fiber/src/components.tsx
type Vec3 (line 36) | type Vec3 = [number, number, number];
constant DEFAULT_POS (line 38) | const DEFAULT_POS: Vec3 = [0, 0, 0];
constant DEFAULT_ROT (line 39) | const DEFAULT_ROT: Vec3 = [0, 0, 0];
constant DEFAULT_SCALE (line 40) | const DEFAULT_SCALE: Vec3 = [1, 1, 1];
function pos (line 42) | function pos(v: Vec3 | null | undefined): Vec3 {
function rot (line 46) | function rot(v: Vec3 | null | undefined): Vec3 {
function scl (line 50) | function scl(v: Vec3 | null | undefined): Vec3 {
function MaterialComponent (line 54) | function MaterialComponent({
function TunnelRing (line 705) | function TunnelRing({
FILE: packages/react-three-fiber/src/r3f-jsx.d.ts
type IntrinsicElements (line 5) | interface IntrinsicElements extends ThreeElements {}
type IntrinsicElements (line 11) | interface IntrinsicElements extends ThreeElements {}
type IntrinsicElements (line 17) | interface IntrinsicElements extends ThreeElements {}
FILE: packages/react-three-fiber/src/renderer.tsx
type ThreeRendererProps (line 18) | interface ThreeRendererProps {
function ThreeRenderer (line 59) | function ThreeRenderer({
type ThreeCanvasProps (line 98) | interface ThreeCanvasProps extends ThreeRendererProps {
function ThreeCanvas (line 125) | function ThreeCanvas({
FILE: packages/react/src/catalog-types.ts
type SetState (line 20) | type SetState = (
type EventHandle (line 39) | interface EventHandle {
type BaseComponentProps (line 60) | interface BaseComponentProps<P = Record<string, unknown>> {
type ComponentContext (line 82) | interface ComponentContext<
type ComponentFn (line 94) | type ComponentFn<
type Components (line 107) | type Components<C extends Catalog> = {
type ActionFn (line 123) | type ActionFn<
type Actions (line 140) | type Actions<C extends Catalog> = {
type CatalogHasActions (line 148) | type CatalogHasActions<C extends Catalog> = [
FILE: packages/react/src/chained-actions.test.tsx
function Button (line 15) | function Button({ element, emit }: ComponentRenderProps<{ label: string ...
function Text (line 26) | function Text({ element }: ComponentRenderProps<{ text: unknown }>) {
function StateProbe (line 39) | function StateProbe() {
function App (line 77) | function App() {
function App (line 130) | function App() {
function App (line 178) | function App() {
FILE: packages/react/src/contexts/actions.tsx
function generateUniqueId (line 27) | function generateUniqueId(): string {
function deepResolveValue (line 42) | function deepResolveValue(
type PendingConfirmation (line 88) | interface PendingConfirmation {
type ActionContextValue (line 102) | interface ActionContextValue {
type ActionProviderProps (line 124) | interface ActionProviderProps {
function ActionProvider (line 135) | function ActionProvider({
function useActions (line 372) | function useActions(): ActionContextValue {
function useAction (line 383) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 398) | interface ConfirmDialogProps {
function ConfirmDialog (line 410) | function ConfirmDialog({
FILE: packages/react/src/contexts/repeat-scope.tsx
type RepeatScopeValue (line 8) | interface RepeatScopeValue {
function RepeatScopeProvider (line 22) | function RepeatScopeProvider({
function useRepeatScope (line 38) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/react/src/contexts/validation.tsx
type FieldValidationState (line 23) | interface FieldValidationState {
type ValidationContextValue (line 35) | interface ValidationContextValue {
type ValidationProviderProps (line 57) | interface ValidationProviderProps {
function dynamicArgsEqual (line 67) | function dynamicArgsEqual(
function validationConfigEqual (line 101) | function validationConfigEqual(
function ValidationProvider (line 129) | function ValidationProvider({
function useValidation (line 267) | function useValidation(): ValidationContextValue {
function useOptionalValidation (line 279) | function useOptionalValidation(): ValidationContextValue | null {
function useFieldValidation (line 286) | function useFieldValidation(
FILE: packages/react/src/contexts/visibility.tsx
type VisibilityContextValue (line 19) | interface VisibilityContextValue {
type VisibilityProviderProps (line 31) | interface VisibilityProviderProps {
function VisibilityProvider (line 38) | function VisibilityProvider({ children }: VisibilityProviderProps) {
function useVisibility (line 69) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 80) | function useIsVisible(
FILE: packages/react/src/dynamic-forms.test.tsx
function Button (line 18) | function Button({ element, emit }: ComponentRenderProps<{ label: string ...
function Text (line 26) | function Text({ element }: ComponentRenderProps<{ text: unknown }>) {
function InputField (line 39) | function InputField({
function SelectField (line 81) | function SelectField({
function ValidatedSelect (line 97) | function ValidatedSelect({
function StateProbe (line 166) | function StateProbe() {
function getState (line 173) | function getState(): Record<string, unknown> {
FILE: packages/react/src/hooks.ts
type TokenUsage (line 25) | interface TokenUsage {
type ParsedLine (line 34) | type ParsedLine =
function parseLine (line 42) | function parseLine(line: string): ParsedLine {
function setSpecValue (line 71) | function setSpecValue(newSpec: Spec, path: string, value: unknown): void {
function removeSpecValue (line 115) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 153) | function getSpecValue(spec: Spec, path: string): unknown {
function applyPatch (line 167) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
type UseUIStreamOptions (line 209) | interface UseUIStreamOptions {
type UseUIStreamReturn (line 221) | interface UseUIStreamReturn {
function useUIStream (line 241) | function useUIStream({
function flatToTree (line 399) | function flatToTree(elements: FlatElement[]): Spec {
function useBoundProp (line 454) | function useBoundProp<T>(
type DataPart (line 484) | interface DataPart {
function isSpecDataPart (line 518) | function isSpecDataPart(data: unknown): data is SpecDataPart {
function buildSpecFromParts (line 532) | function buildSpecFromParts(parts: DataPart[]): Spec | null {
function getTextFromParts (line 574) | function getTextFromParts(parts: DataPart[]): string {
function useJsonRenderMessage (line 618) | function useJsonRenderMessage(parts: DataPart[]) {
type ChatMessage (line 655) | interface ChatMessage {
type UseChatUIOptions (line 669) | interface UseChatUIOptions {
type UseChatUIReturn (line 681) | interface UseChatUIReturn {
function generateChatId (line 695) | function generateChatId(): string {
function useChatUI (line 732) | function useChatUI({
FILE: packages/react/src/renderer.tsx
type ComponentRenderProps (line 52) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 74) | type ComponentRenderer<P = Record<string, unknown>> = ComponentType<
type ComponentRegistry (line 81) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type RendererProps (line 86) | interface RendererProps {
type ElementErrorBoundaryProps (line 102) | interface ElementErrorBoundaryProps {
type ElementErrorBoundaryState (line 107) | interface ElementErrorBoundaryState {
class ElementErrorBoundary (line 111) | class ElementErrorBoundary extends React.Component<
method constructor (line 115) | constructor(props: ElementErrorBoundaryProps) {
method getDerivedStateFromError (line 120) | static getDerivedStateFromError(): ElementErrorBoundaryState {
method componentDidCatch (line 124) | componentDidCatch(error: Error, info: ErrorInfo) {
method render (line 132) | render() {
constant EMPTY_FUNCTIONS (line 146) | const EMPTY_FUNCTIONS: Record<string, ComputedFunction> = {};
function useFunctions (line 151) | function useFunctions(): Record<string, ComputedFunction> {
type ElementRendererProps (line 155) | interface ElementRendererProps {
function RepeatChildren (line 404) | function RepeatChildren({
function Renderer (line 472) | function Renderer({ spec, registry, loading, fallback }: RendererProps) {
type JSONUIProviderProps (line 496) | interface JSONUIProviderProps {
function JSONUIProvider (line 528) | function JSONUIProvider({
function ConfirmationDialogManager (line 562) | function ConfirmationDialogManager() {
type DefineRegistryResult (line 585) | interface DefineRegistryResult {
type DefineRegistryOptions (line 615) | type DefineRegistryOptions<C extends Catalog> = {
function defineRegistry (line 644) | function defineRegistry<C extends Catalog>(
type DefineRegistryComponentFn (line 717) | type DefineRegistryComponentFn = (ctx: {
type DefineRegistryActionFn (line 727) | type DefineRegistryActionFn = (
type CreateRendererProps (line 740) | interface CreateRendererProps {
type ComponentMap (line 765) | type ComponentMap<
function createRenderer (line 791) | function createRenderer<
FILE: packages/react/src/schema.ts
type ReactSchema (line 100) | type ReactSchema = typeof schema;
type ReactSpec (line 105) | type ReactSpec<TCatalog> = typeof schema extends {
type ElementTreeSchema (line 115) | type ElementTreeSchema = ReactSchema;
type ElementTreeSpec (line 117) | type ElementTreeSpec<T> = ReactSpec<T>;
FILE: packages/redux/src/index.test.ts
function createTestStore (line 5) | function createTestStore(initial: Record<string, unknown> = {}) {
FILE: packages/redux/src/index.ts
type ReduxStateStoreOptions (line 10) | interface ReduxStateStoreOptions<
function reduxStateStore (line 65) | function reduxStateStore<
FILE: packages/remotion/src/catalog-types.ts
type FrameContext (line 15) | interface FrameContext {
type VideoComponentContext (line 31) | interface VideoComponentContext<
type VideoComponentFn (line 52) | type VideoComponentFn<
type VideoComponents (line 66) | type VideoComponents<C extends Catalog> = {
type TransitionFn (line 78) | type TransitionFn = (progress: number) => React.CSSProperties;
type BuiltInTransition (line 83) | type BuiltInTransition =
type InferCatalogEffects (line 99) | type InferCatalogEffects<C extends Catalog> = C extends {
type EffectFn (line 108) | type EffectFn<
type Effects (line 118) | type Effects<C extends Catalog> = {
FILE: packages/remotion/src/catalog.ts
type ComponentDefinition (line 230) | type ComponentDefinition = {
type TransitionDefinition (line 240) | type TransitionDefinition = {
type EffectDefinition (line 248) | type EffectDefinition = {
FILE: packages/remotion/src/components/ClipWrapper.tsx
type ClipWrapperProps (line 7) | interface ClipWrapperProps {
function ClipWrapper (line 23) | function ClipWrapper({ clip, children }: ClipWrapperProps) {
FILE: packages/remotion/src/components/Renderer.tsx
type ClipErrorBoundaryProps (line 42) | interface ClipErrorBoundaryProps {
type ClipErrorBoundaryState (line 48) | interface ClipErrorBoundaryState {
class ClipErrorBoundary (line 52) | class ClipErrorBoundary extends React.Component<
method constructor (line 56) | constructor(props: ClipErrorBoundaryProps) {
method getDerivedStateFromError (line 61) | static getDerivedStateFromError(): ClipErrorBoundaryState {
method componentDidCatch (line 65) | componentDidCatch(error: Error, info: React.ErrorInfo) {
method render (line 73) | render() {
type RendererProps (line 81) | interface RendererProps {
function Renderer (line 107) | function Renderer({
FILE: packages/remotion/src/components/hooks.ts
function useTransition (line 16) | function useTransition(clip: Clip, frame: number): TransitionStyles {
function useMotion (line 115) | function useMotion(clip: Clip, frame: number): MotionStyles {
FILE: packages/remotion/src/components/standard.tsx
function TitleCard (line 16) | function TitleCard({ clip }: { clip: Clip }) {
function ImageSlide (line 67) | function ImageSlide({ clip }: { clip: Clip }) {
function SplitScreen (line 109) | function SplitScreen({ clip }: { clip: Clip }) {
function QuoteCard (line 153) | function QuoteCard({ clip }: { clip: Clip }) {
function StatCard (line 212) | function StatCard({ clip }: { clip: Clip }) {
function LowerThird (line 262) | function LowerThird({ clip }: { clip: Clip }) {
function TextOverlay (line 294) | function TextOverlay({ clip }: { clip: Clip }) {
function TypingText (line 338) | function TypingText({ clip }: { clip: Clip }) {
function LogoBug (line 425) | function LogoBug({ clip }: { clip: Clip }) {
function VideoClip (line 463) | function VideoClip({ clip }: { clip: Clip }) {
FILE: packages/remotion/src/components/types.ts
type MotionState (line 9) | interface MotionState {
type SpringConfig (line 27) | interface SpringConfig {
type MotionLoop (line 39) | interface MotionLoop {
type Motion (line 55) | interface Motion {
type MotionStyles (line 69) | interface MotionStyles {
type Clip (line 80) | interface Clip {
type TimelineSpec (line 96) | interface TimelineSpec {
type AudioTrack (line 112) | interface AudioTrack {
type TransitionStyles (line 123) | interface TransitionStyles {
type ClipComponent (line 133) | type ClipComponent = React.ComponentType<{ clip: Clip }>;
type ComponentRegistry (line 138) | type ComponentRegistry = Record<string, ClipComponent>;
FILE: packages/remotion/src/schema.ts
function remotionPromptTemplate (line 8) | function remotionPromptTemplate(context: PromptContext): string {
type RemotionSchema (line 309) | type RemotionSchema = typeof schema;
type RemotionSpec (line 314) | type RemotionSpec<TCatalog> = typeof schema extends {
FILE: packages/shadcn/src/catalog.ts
type ComponentDefinition (line 486) | type ComponentDefinition = {
type ShadcnProps (line 505) | type ShadcnProps<K extends keyof typeof shadcnComponentDefinitions> =
FILE: packages/shadcn/src/components.tsx
function getPaginationRange (line 126) | function getPaginationRange(
FILE: packages/shadcn/src/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: packages/shadcn/src/ui/accordion.tsx
function Accordion (line 7) | function Accordion({
function AccordionItem (line 13) | function AccordionItem({
function AccordionTrigger (line 26) | function AccordionTrigger({
function AccordionContent (line 48) | function AccordionContent({
FILE: packages/shadcn/src/ui/alert.tsx
function Alert (line 22) | function Alert({
function AlertTitle (line 37) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 50) | function AlertDescription({
FILE: packages/shadcn/src/ui/avatar.tsx
function Avatar (line 8) | function Avatar({
function AvatarImage (line 24) | function AvatarImage({
function AvatarFallback (line 37) | function AvatarFallback({
FILE: packages/shadcn/src/ui/badge.tsx
function Badge (line 27) | function Badge({
FILE: packages/shadcn/src/ui/button.tsx
function Button (line 41) | function Button({
FILE: packages/shadcn/src/ui/card.tsx
function Card (line 5) | function Card({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader (line 18) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 31) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 41) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardContent (line 51) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 61) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: packages/shadcn/src/ui/carousel.tsx
type CarouselApi (line 12) | type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters (line 13) | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions (line 14) | type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin (line 15) | type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps (line 17) | type CarouselProps = {
type CarouselContextProps (line 24) | type CarouselContextProps = {
function useCarousel (line 35) | function useCarousel() {
function Carousel (line 45) | function Carousel({
function CarouselContent (line 135) | function CarouselContent({ className, ...props }: React.ComponentProps<"...
function CarouselItem (line 156) | function CarouselItem({ className, ...props }: React.ComponentProps<"div...
function CarouselPrevious (line 174) | function CarouselPrevious({
function CarouselNext (line 204) | function CarouselNext({
FILE: packages/shadcn/src/ui/checkbox.tsx
function Checkbox (line 9) | function Checkbox({
FILE: packages/shadcn/src/ui/collapsible.tsx
function Collapsible (line 4) | function Collapsible({
function CollapsibleTrigger (line 10) | function CollapsibleTrigger({
function CollapsibleContent (line 21) | function CollapsibleContent({
FILE: packages/shadcn/src/ui/dialog.tsx
function Dialog (line 10) | function Dialog({
function DialogTrigger (line 16) | function DialogTrigger({
function DialogPortal (line 22) | function DialogPortal({
function DialogClose (line 28) | function DialogClose({
function DialogOverlay (line 34) | function DialogOverlay({
function DialogContent (line 50) | function DialogContent({
function DialogHeader (line 84) | function DialogHeader({ className, ...props }: React.ComponentProps<"div...
function DialogFooter (line 94) | function DialogFooter({
function DialogTitle (line 121) | function DialogTitle({
function DialogDescription (line 134) | function DialogDescription({
FILE: packages/shadcn/src/ui/drawer.tsx
function Drawer (line 6) | function Drawer({
function DrawerTrigger (line 12) | function DrawerTrigger({
function DrawerPortal (line 18) | function DrawerPortal({
function DrawerClose (line 24) | function DrawerClose({
function DrawerOverlay (line 30) | function DrawerOverlay({
function DrawerContent (line 46) | function DrawerContent({
function DrawerHeader (line 73) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 86) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 96) | function DrawerTitle({
function DrawerDescription (line 109) | function DrawerDescription({
FILE: packages/shadcn/src/ui/dropdown-menu.tsx
function DropdownMenu (line 9) | function DropdownMenu({
function DropdownMenuPortal (line 15) | function DropdownMenuPortal({
function DropdownMenuTrigger (line 23) | function DropdownMenuTrigger({
function DropdownMenuContent (line 34) | function DropdownMenuContent({
function DropdownMenuGroup (line 54) | function DropdownMenuGroup({
function DropdownMenuItem (line 62) | function DropdownMenuItem({
function DropdownMenuCheckboxItem (line 85) | function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup (line 111) | function DropdownMenuRadioGroup({
function DropdownMenuRadioItem (line 122) | function DropdownMenuRadioItem({
function DropdownMenuLabel (line 146) | function DropdownMenuLabel({
function DropdownMenuSeparator (line 166) | function DropdownMenuSeparator({
function DropdownMenuShortcut (line 179) | function DropdownMenuShortcut({
function DropdownMenuSub (line 195) | function DropdownMenuSub({
function DropdownMenuSubTrigger (line 201) | function DropdownMenuSubTrigger({
function DropdownMenuSubContent (line 225) | function DropdownMenuSubContent({
FILE: packages/shadcn/src/ui/input.tsx
function Input (line 5) | function Input({ className, type, ...props }: React.ComponentProps<"inpu...
FILE: packages/shadcn/src/ui/label.tsx
function Label (line 6) | function Label({
FILE: packages/shadcn/src/ui/pagination.tsx
function Pagination (line 11) | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent (line 23) | function PaginationContent({
function PaginationItem (line 36) | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
type PaginationLinkProps (line 40) | type PaginationLinkProps = {
function PaginationLink (line 45) | function PaginationLink({
function PaginationPrevious (line 68) | function PaginationPrevious({
function PaginationNext (line 85) | function PaginationNext({
function PaginationEllipsis (line 102) | function PaginationEllipsis({
FILE: packages/shadcn/src/ui/popover.tsx
function Popover (line 8) | function Popover({
function PopoverTrigger (line 14) | function PopoverTrigger({
function PopoverContent (line 20) | function PopoverContent({
function PopoverAnchor (line 42) | function PopoverAnchor({
function PopoverHeader (line 48) | function PopoverHeader({ className, ...props }: React.ComponentProps<"di...
function PopoverTitle (line 58) | function PopoverTitle({ className, ...props }: React.ComponentProps<"h2"...
function PopoverDescription (line 68) | function PopoverDescription({
FILE: packages/shadcn/src/ui/progress.tsx
function Progress (line 6) | function Progress({
FILE: packages/shadcn/src/ui/radio-group.tsx
function RadioGroup (line 9) | function RadioGroup({
function RadioGroupItem (line 22) | function RadioGroupItem({
FILE: packages/shadcn/src/ui/select.tsx
function Select (line 7) | function Select({
function SelectGroup (line 13) | function SelectGroup({
function SelectValue (line 19) | function SelectValue({
function SelectTrigger (line 25) | function SelectTrigger({
function SelectContent (line 51) | function SelectContent({
function SelectLabel (line 88) | function SelectLabel({
function SelectItem (line 101) | function SelectItem({
function SelectSeparator (line 128) | function SelectSeparator({
function SelectScrollUpButton (line 141) | function SelectScrollUpButton({
function SelectScrollDownButton (line 159) | function SelectScrollDownButton({
FILE: packages/shadcn/src/ui/separator.tsx
function Separator (line 8) | function Separator({
FILE: packages/shadcn/src/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: packages/shadcn/src/ui/slider.tsx
function Slider (line 8) | function Slider({
FILE: packages/shadcn/src/ui/switch.tsx
function Switch (line 8) | function Switch({
FILE: packages/shadcn/src/ui/table.tsx
function Table (line 5) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 20) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 30) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 40) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 53) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 66) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 79) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 92) | function TableCaption({
FILE: packages/shadcn/src/ui/tabs.tsx
function Tabs (line 9) | function Tabs({
function TabsList (line 43) | function TabsList({
function TabsTrigger (line 59) | function TabsTrigger({
function TabsContent (line 78) | function TabsContent({
FILE: packages/shadcn/src/ui/textarea.tsx
function Textarea (line 5) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: packages/shadcn/src/ui/toggle-group.tsx
function ToggleGroup (line 20) | function ToggleGroup({
function ToggleGroupItem (line 51) | function ToggleGroupItem({
FILE: packages/shadcn/src/ui/toggle.tsx
function Toggle (line 29) | function Toggle({
FILE: packages/shadcn/src/ui/tooltip.tsx
function TooltipProvider (line 8) | function TooltipProvider({
function Tooltip (line 21) | function Tooltip({
function TooltipTrigger (line 27) | function TooltipTrigger({
function TooltipContent (line 33) | function TooltipContent({
FILE: packages/solid/src/catalog-types.ts
type SetState (line 20) | type SetState = (
type EventHandle (line 39) | interface EventHandle {
type BaseComponentProps (line 60) | interface BaseComponentProps<P = Record<string, unknown>> {
type ComponentContext (line 82) | interface ComponentContext<
type ComponentFn (line 94) | type ComponentFn<
type Components (line 107) | type Components<C extends Catalog> = {
type ActionFn (line 123) | type ActionFn<
type Actions (line 140) | type Actions<C extends Catalog> = {
type CatalogHasActions (line 148) | type CatalogHasActions<C extends Catalog> = [
FILE: packages/solid/src/chained-actions.test.tsx
function Button (line 12) | function Button(props: ComponentRenderProps<{ label: string }>) {
function Text (line 20) | function Text(props: ComponentRenderProps<{ text: unknown }>) {
function StateProbe (line 30) | function StateProbe() {
function getProbeState (line 41) | function getProbeState(): Record<string, unknown> {
function App (line 74) | function App() {
function App (line 126) | function App() {
function App (line 174) | function App() {
FILE: packages/solid/src/contexts/actions.test.tsx
function withProviders (line 20) | function withProviders<T>(
function withFullProviders (line 59) | function withFullProviders(options: {
function Inner (line 237) | function Inner(): JSX.Element {
FILE: packages/solid/src/contexts/actions.tsx
function generateUniqueId (line 20) | function generateUniqueId(): string {
function deepResolveValue (line 25) | function deepResolveValue(
type PendingConfirmation (line 63) | interface PendingConfirmation {
type ActionContextValue (line 70) | interface ActionContextValue {
type ActionProviderProps (line 82) | interface ActionProviderProps {
function ActionProvider (line 87) | function ActionProvider(props: ParentProps<ActionProviderProps>) {
function useActions (line 293) | function useActions(): ActionContextValue {
function useAction (line 301) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 314) | interface ConfirmDialogProps {
function ConfirmDialog (line 320) | function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {
FILE: packages/solid/src/contexts/repeat-scope.tsx
type RepeatScopeValue (line 3) | interface RepeatScopeValue {
function RepeatScopeProvider (line 11) | function RepeatScopeProvider(props: ParentProps<RepeatScopeValue>) {
function useRepeatScope (line 21) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/solid/src/contexts/state.test.tsx
function renderWithState (line 12) | function renderWithState<T>(
function TestComponent (line 65) | function TestComponent(): JSX.Element {
function TestComponent (line 93) | function TestComponent(): JSX.Element {
FILE: packages/solid/src/contexts/state.tsx
type StateContextValue (line 19) | interface StateContextValue {
type StateProviderProps (line 32) | interface StateProviderProps {
function computeInitialFlat (line 38) | function computeInitialFlat(
function StateProvider (line 47) | function StateProvider(props: ParentProps<StateProviderProps>) {
function useStateStore (line 188) | function useStateStore(): StateContextValue {
function useStateValue (line 196) | function useStateValue<T>(path: string): Accessor<T | undefined> {
function useStateBinding (line 201) | function useStateBinding<T>(
FILE: packages/solid/src/contexts/validation.test.tsx
function withProviders (line 12) | function withProviders<T>(
function withStateOnly (line 31) | function withStateOnly<T>(hook: () => T): T {
function withBothContexts (line 45) | function withBothContexts(
function TestComponent (line 137) | function TestComponent(): JSX.Element {
FILE: packages/solid/src/contexts/validation.tsx
type FieldValidationState (line 18) | interface FieldValidationState {
type ValidationContextValue (line 24) | interface ValidationContextValue {
type ValidationProviderProps (line 36) | interface ValidationProviderProps {
function dynamicArgsEqual (line 40) | function dynamicArgsEqual(
function validationConfigEqual (line 70) | function validationConfigEqual(
function ValidationProvider (line 93) | function ValidationProvider(
function useValidation (line 207) | function useValidation(): ValidationContextValue {
function useOptionalValidation (line 215) | function useOptionalValidation(): ValidationContextValue | null {
function useFieldValidation (line 219) | function useFieldValidation(
FILE: packages/solid/src/contexts/visibility.test.tsx
function renderWithVisibility (line 7) | function renderWithVisibility<T>(
FILE: packages/solid/src/contexts/visibility.tsx
type VisibilityContextValue (line 9) | interface VisibilityContextValue {
type VisibilityProviderProps (line 16) | type VisibilityProviderProps = ParentProps;
function VisibilityProvider (line 18) | function VisibilityProvider(props: VisibilityProviderProps) {
function useVisibility (line 40) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 48) | function useIsVisible(
FILE: packages/solid/src/dynamic-forms.test.tsx
function Button (line 170) | function Button(props: ComponentRenderProps<{ label: string }>) {
function Text (line 178) | function Text(props: ComponentRenderProps<{ text: unknown }>) {
function InputField (line 187) | function InputField(
function SelectField (line 230) | function SelectField(
function ValidatedSelect (line 240) | function ValidatedSelect(
function Stack (line 305) | function Stack(props: ComponentRenderProps<Record<string, unknown>>) {
function StateProbe (line 311) | function StateProbe() {
function getState (line 319) | function getState(): Record<string, unknown> {
FILE: packages/solid/src/hooks.ts
type TokenUsage (line 23) | interface TokenUsage {
type ParsedLine (line 32) | type ParsedLine =
function parseLine (line 40) | function parseLine(line: string): ParsedLine {
function setSpecValue (line 69) | function setSpecValue(newSpec: Spec, path: string, value: unknown): void {
function removeSpecValue (line 113) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 151) | function getSpecValue(spec: Spec, path: string): unknown {
function applyPatch (line 165) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
type UseUIStreamOptions (line 207) | interface UseUIStreamOptions {
type UseUIStreamReturn (line 219) | interface UseUIStreamReturn {
function useUIStream (line 239) | function useUIStream(options: UseUIStreamOptions): UseUIStreamReturn {
function flatToTree (line 391) | function flatToTree(elements: FlatElement[]): Spec {
function useBoundProp (line 449) | function useBoundProp<T>(
type DataPart (line 471) | interface DataPart {
function isSpecDataPart (line 505) | function isSpecDataPart(data: unknown): data is SpecDataPart {
function buildSpecFromParts (line 519) | function buildSpecFromParts(parts: DataPart[]): Spec | null {
function getTextFromParts (line 561) | function getTextFromParts(parts: DataPart[]): string {
function useJsonRenderMessage (line 602) | function useJsonRenderMessage(getParts: () => DataPart[]) {
type ChatMessage (line 632) | interface ChatMessage {
type UseChatUIOptions (line 646) | interface UseChatUIOptions {
type UseChatUIReturn (line 658) | interface UseChatUIReturn {
function generateChatId (line 672) | function generateChatId(): string {
function useChatUI (line 709) | function useChatUI(options: UseChatUIOptions): UseChatUIReturn {
FILE: packages/solid/src/renderer.tsx
type ComponentRenderProps (line 53) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 75) | type ComponentRenderer<P = Record<string, unknown>> = Component<
type ComponentRegistry (line 82) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type RendererProps (line 87) | interface RendererProps {
constant EMPTY_FUNCTIONS (line 102) | const EMPTY_FUNCTIONS: Record<string, ComputedFunction> = {};
function useFunctions (line 107) | function useFunctions(): Record<string, ComputedFunction> {
type ElementRendererProps (line 111) | interface ElementRendererProps {
function ElementRenderer (line 122) | function ElementRenderer(props: ElementRendererProps) {
type ElementRendererContentProps (line 278) | interface ElementRendererContentProps {
function ElementRendererContent (line 292) | function ElementRendererContent(props: ElementRendererContentProps) {
type RepeatChildrenProps (line 371) | interface RepeatChildrenProps {
function RepeatChildren (line 379) | function RepeatChildren(props: RepeatChildrenProps) {
function Renderer (line 441) | function Renderer(props: RendererProps) {
type JSONUIProviderProps (line 466) | interface JSONUIProviderProps {
function JSONUIProvider (line 498) | function JSONUIProvider(props: JSONUIProviderProps) {
function ConfirmationDialogManager (line 524) | function ConfirmationDialogManager() {
type DefineRegistryResult (line 547) | interface DefineRegistryResult {
type DefineRegistryOptions (line 577) | type DefineRegistryOptions<C extends Catalog> = {
function defineRegistry (line 606) | function defineRegistry<C extends Catalog>(
type DefineRegistryComponentFn (line 680) | type DefineRegistryComponentFn = (ctx: {
type DefineRegistryActionFn (line 690) | type DefineRegistryActionFn = (
type CreateRendererProps (line 703) | interface CreateRendererProps {
type ComponentMap (line 728) | type ComponentMap<
function createRenderer (line 754) | function createRenderer<
FILE: packages/solid/src/schema.ts
type SolidSchema (line 100) | type SolidSchema = typeof schema;
type SolidSpec (line 105) | type SolidSpec<TCatalog> = typeof schema extends {
type ElementTreeSchema (line 115) | type ElementTreeSchema = SolidSchema;
type ElementTreeSpec (line 117) | type ElementTreeSpec<T> = SolidSpec<T>;
FILE: packages/svelte/src/catalog-types.ts
type SetState (line 20) | type SetState = (
type EventHandle (line 32) | interface EventHandle {
type BaseComponentProps (line 45) | interface BaseComponentProps<P = Record<string, unknown>> {
type ComponentContext (line 63) | interface ComponentContext<
type ComponentFn (line 71) | type ComponentFn<
type Components (line 79) | type Components<C extends Catalog> = {
type ActionFn (line 90) | type ActionFn<
type Actions (line 102) | type Actions<C extends Catalog> = {
FILE: packages/svelte/src/contexts/actions.test.ts
function component (line 9) | function component(
FILE: packages/svelte/src/contexts/state.test.ts
function component (line 6) | function component(
FILE: packages/svelte/src/contexts/visibility.test.ts
function component (line 8) | function component(
FILE: packages/svelte/src/renderer.test.ts
function mountRenderer (line 23) | function mountRenderer(
FILE: packages/svelte/src/renderer.ts
type ComponentRenderProps (line 21) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRenderer (line 42) | type ComponentRenderer<P = Record<string, unknown>> = Component<
type ComponentRegistry (line 50) | type ComponentRegistry = Record<string, ComponentRenderer<any>>;
type DefineRegistryActionFn (line 55) | type DefineRegistryActionFn = (
type DefineRegistryResult (line 64) | interface DefineRegistryResult {
function defineRegistry (line 110) | function defineRegistry<
type CreateRendererProps (line 201) | interface CreateRendererProps {
type ComponentMap (line 216) | type ComponentMap<
function createRenderer (line 236) | function createRenderer<
FILE: packages/svelte/src/schema.ts
type SvelteSchema (line 100) | type SvelteSchema = typeof schema;
type SvelteSpec (line 105) | type SvelteSpec<TCatalog> = typeof schema extends {
FILE: packages/svelte/src/streaming.svelte.ts
type TokenUsage (line 13) | interface TokenUsage {
type UIStreamState (line 22) | interface UIStreamState {
type UIStreamReturn (line 33) | interface UIStreamReturn {
type UIStreamOptions (line 46) | interface UIStreamOptions {
type ParsedLine (line 52) | type ParsedLine =
function parseLine (line 57) | function parseLine(line: string): ParsedLine {
function setSpecValue (line 82) | function setSpecValue(newSpec: Spec, path: string, value: unknown): void {
function removeSpecValue (line 123) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 158) | function getSpecValue(spec: Spec, path: string): unknown {
function applyPatch (line 168) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
function createUIStream (line 209) | function createUIStream({
type ChatMessage (line 345) | interface ChatMessage {
type ChatUIOptions (line 355) | interface ChatUIOptions {
type ChatUIReturn (line 364) | interface ChatUIReturn {
function generateChatId (line 373) | function generateChatId(): string {
function createChatUI (line 387) | function createChatUI({
FILE: packages/svelte/src/utils.svelte.ts
type DataPart (line 16) | interface DataPart {
function flatToTree (line 28) | function flatToTree(elements: FlatElement[]): Spec {
function isSpecDataPart (line 63) | function isSpecDataPart(data: unknown): data is SpecDataPart {
function buildSpecFromParts (line 81) | function buildSpecFromParts(
function getTextFromParts (line 115) | function getTextFromParts(parts: DataPart[]): string {
FILE: packages/ui/src/button.tsx
type ButtonProps (line 5) | interface ButtonProps {
FILE: packages/ui/src/card.tsx
function Card (line 3) | function Card({
FILE: packages/ui/src/code.tsx
function Code (line 3) | function Code({
FILE: packages/vue/src/catalog-types.ts
type SetState (line 20) | type SetState = (
type EventHandle (line 39) | interface EventHandle {
type BaseComponentProps (line 58) | interface BaseComponentProps<P = Record<string, unknown>> {
type ComponentContext (line 81) | interface ComponentContext<
type ComponentFn (line 92) | type ComponentFn<
type Components (line 105) | type Components<C extends Catalog> = {
type ActionFn (line 121) | type ActionFn<
type Actions (line 138) | type Actions<C extends Catalog> = {
type CatalogHasActions (line 146) | type CatalogHasActions<C extends Catalog> = [
FILE: packages/vue/src/composables/actions.test.ts
function withProviders (line 8) | function withProviders<T>(
method setup (line 75) | setup() {
FILE: packages/vue/src/composables/actions.ts
function generateUniqueId (line 27) | function generateUniqueId(): string {
function deepResolveValue (line 39) | function deepResolveValue(
type PendingConfirmation (line 80) | interface PendingConfirmation {
type ActionContextValue (line 90) | interface ActionContextValue {
constant ACTIONS_KEY (line 100) | const ACTIONS_KEY = Symbol("json-render:actions");
type ActionProviderProps (line 102) | interface ActionProviderProps {
method setup (line 122) | setup(props, { slots }) {
function useActions (line 335) | function useActions(): ActionContextValue {
function useAction (line 346) | function useAction(binding: ActionBinding): {
type ConfirmDialogProps (line 364) | interface ConfirmDialogProps {
method setup (line 389) | setup(props) {
FILE: packages/vue/src/composables/repeat-scope.ts
type RepeatScopeValue (line 6) | interface RepeatScopeValue {
constant REPEAT_SCOPE_KEY (line 15) | const REPEAT_SCOPE_KEY = Symbol("json-render:repeat-scope");
method setup (line 35) | setup(props, { slots }) {
function useRepeatScope (line 44) | function useRepeatScope(): RepeatScopeValue | null {
FILE: packages/vue/src/composables/state.test.ts
function withProvider (line 8) | function withProvider<T>(
FILE: packages/vue/src/composables/state.ts
type StateContextValue (line 25) | interface StateContextValue {
constant STATE_KEY (line 38) | const STATE_KEY = Symbol("json-render:state");
type StateProviderProps (line 43) | interface StateProviderProps {
method setup (line 85) | setup(props, { slots }) {
function useStateStore (line 185) | function useStateStore(): StateContextValue {
function useStateValue (line 196) | function useStateValue<T>(path: string): ComputedRef<T | undefined> {
function useStateBinding (line 209) | function useStateBinding<T>(
FILE: packages/vue/src/composables/validation.test.ts
function withProviders (line 13) | function withProviders<T>(
function withStateOnly (line 37) | function withStateOnly<T>(composable: () => T): { result: T } {
method setup (line 108) | setup() {
method setup (line 134) | setup() {
method setup (line 162) | setup() {
method setup (line 188) | setup() {
FILE: packages/vue/src/composables/validation.ts
type FieldValidationState (line 23) | interface FieldValidationState {
type ValidationContextValue (line 32) | interface ValidationContextValue {
constant VALIDATION_KEY (line 42) | const VALIDATION_KEY = Symbol("json-render:validation");
type ValidationProviderProps (line 44) | interface ValidationProviderProps {
function dynamicArgsEqual (line 51) | function dynamicArgsEqual(
function validationConfigEqual (line 82) | function validationConfigEqual(
method setup (line 112) | setup(props, { slots }) {
function useOptionalValidation (line 207) | function useOptionalValidation(): ValidationContextValue | null {
function useValidation (line 219) | function useValidation(): ValidationContextValue {
function useFieldValidation (line 230) | function useFieldValidation(
FILE: packages/vue/src/composables/visibility.test.ts
function withProviders (line 8) | function withProviders<T>(
method setup (line 76) | setup() {
FILE: packages/vue/src/composables/visibility.ts
type VisibilityContextValue (line 18) | interface VisibilityContextValue {
constant VISIBILITY_KEY (line 25) | const VISIBILITY_KEY = Symbol("json-render:visibility");
method setup (line 32) | setup(_, { slots }) {
function useVisibility (line 51) | function useVisibility(): VisibilityContextValue {
function useIsVisible (line 63) | function useIsVisible(
FILE: packages/vue/src/dynamic-forms.test.ts
method setup (line 31) | setup(props) {
method setup (line 50) | setup(props) {
method setup (line 75) | setup(_props, { slots }) {
method setup (line 89) | setup(props) {
method setup (line 126) | setup(props) {
method setup (line 148) | setup() {
function getState (line 155) | function getState(wrapper: ReturnType<typeof mount>): Record<string, unk...
function mountWithProviders (line 163) | function mountWithProviders(
FILE: packages/vue/src/hooks.test.ts
function withStateProvider (line 21) | function withStateProvider<T>(
function makeReadableStream (line 40) | function makeReadableStream(text: string): ReadableStream<Uint8Array> {
method setup (line 193) | setup() {
method setup (line 241) | setup() {
method setup (line 267) | setup() {
method setup (line 286) | setup() {
FILE: packages/vue/src/hooks.ts
type TokenUsage (line 32) | interface TokenUsage {
type ParsedLine (line 41) | type ParsedLine =
function parseLine (line 49) | function parseLine(line: string): ParsedLine {
function setSpecValue (line 78) | function setSpecValue(newSpec: Spec, path: string, value: unknown): void {
function removeSpecValue (line 122) | function removeSpecValue(newSpec: Spec, path: string): void {
function getSpecValue (line 160) | function getSpecValue(spec: Spec, path: string): unknown {
function applyPatch (line 174) | function applyPatch(spec: Spec, patch: JsonPatch): Spec {
type UseUIStreamOptions (line 216) | interface UseUIStreamOptions {
type UseUIStreamReturn (line 228) | interface UseUIStreamReturn {
function useUIStream (line 248) | function useUIStream({
function flatToTree (line 403) | function flatToTree(elements: FlatElement[]): Spec {
function useBoundProp (line 458) | function useBoundProp<T>(
type DataPart (line 482) | interface DataPart {
function isSpecDataPart (line 492) | function isSpecDataPart(data: unknown): data is SpecDataPart {
function buildSpecFromParts (line 514) | function buildSpecFromParts(parts: DataPart[]): Spec | null {
function getTextFromParts (line 546) | function getTextFromParts(parts: DataPart[]): string {
function useJsonRenderMessage (line 575) | function useJsonRenderMessage(parts: DataPart[] | Ref<DataPart[]>): {
type ChatMessage (line 597) | interface ChatMessage {
type UseChatUIOptions (line 611) | interface UseChatUIOptions {
type UseChatUIReturn (line 623) | interface UseChatUIReturn {
function generateChatId (line 637) | function generateChatId(): string {
function useChatUI (line 663) | function useChatUI({
FILE: packages/vue/src/renderer.test.ts
function mountRenderer (line 43) | function mountRenderer(
method setup (line 169) | setup() {
FILE: packages/vue/src/renderer.ts
type ComponentRenderProps (line 57) | interface ComponentRenderProps<P = Record<string, unknown>> {
type ComponentRegistry (line 76) | type ComponentRegistry = Record<string, Component>;
type RendererProps (line 81) | interface RendererProps {
constant EMPTY_FUNCTIONS (line 92) | const EMPTY_FUNCTIONS: Record<string, ComputedFunction> = {};
constant FUNCTIONS_KEY (line 93) | const FUNCTIONS_KEY = Symbol("json-render:functions");
method setup (line 103) | setup(props, { slots }) {
function useFunctions (line 110) | function useFunctions(): ComputedRef<Record<string, ComputedFunction>> {
method setup (line 129) | setup(props, { slots }) {
function resolveAndExecuteBindings (line 152) | async function resolveAndExecuteBindings(
type ElementRendererInternalProps (line 183) | interface ElementRendererInternalProps {
method setup (line 215) | setup(props: ElementRendererInternalProps) {
method setup (line 421) | setup(props) {
method setup (line 499) | setup(props) {
method setup (line 523) | setup() {
type JSONUIProviderProps (line 545) | interface JSONUIProviderProps {
method setup (line 614) | setup(props, { slots }) {
type DefineRegistryResult (line 664) | interface DefineRegistryResult {
type DefineRegistryOptions (line 678) | type DefineRegistryOptions<C extends Catalog> = {
type DefineRegistryComponentFn (line 684) | type DefineRegistryComponentFn = (ctx: {
type DefineRegistryActionFn (line 693) | type DefineRegistryActionFn = (
function defineRegistry (line 718) | function defineRegistry<C extends Catalog>(
type CreateRendererProps (line 815) | interface CreateRendererProps {
type ComponentMap (line 830) | type ComponentMap<
function createRenderer (line 850) | function createRenderer<
FILE: packages/vue/src/schema.ts
type VueSchema (line 100) | type VueSchema = typeof schema;
type VueSpec (line 105) | type VueSpec<TCatalog> = typeof schema extends {
FILE: packages/xstate/src/index.test.ts
function createTestStore (line 5) | function createTestStore(initial: Record<string, unknown> = {}) {
FILE: packages/xstate/src/index.ts
type XstateStoreStateStoreOptions (line 10) | interface XstateStoreStateStoreOptions {
function xstateStoreStateStore (line 30) | function xstateStoreStateStore(
FILE: packages/yaml/src/parser.ts
type YamlStreamCompiler (line 11) | interface YamlStreamCompiler<T> {
function createYamlStreamCompiler (line 41) | function createYamlStreamCompiler<
FILE: packages/yaml/src/prompt.ts
type ZodLike (line 5) | interface ZodLike {
type YamlPromptOptions (line 9) | interface YamlPromptOptions {
type CatalogComponentDef (line 23) | interface CatalogComponentDef {
function getZodTypeName (line 33) | function getZodTypeName(schema: ZodLike): string {
function formatZodType (line 43) | function formatZodType(schema: ZodLike): string {
function getExampleProps (line 123) | function getExampleProps(def: CatalogComponentDef): Record<string, unkno...
function exampleValue (line 149) | function exampleValue(schema: ZodLike): unknown {
function toYaml (line 204) | function toYaml(value: unknown): string {
function yamlPrompt (line 222) | function yamlPrompt(
FILE: packages/yaml/src/transform.test.ts
function runTransform (line 6) | async function runTransform(
function extractPatches (line 42) | function extractPatches(output: StreamChunk[]) {
function extractText (line 48) | function extractText(output: StreamChunk[]) {
method start (line 147) | start(controller) {
FILE: packages/yaml/src/transform.ts
constant YAML_SPEC_FENCE (line 13) | const YAML_SPEC_FENCE = "```yaml-spec";
constant YAML_EDIT_FENCE (line 14) | const YAML_EDIT_FENCE = "```yaml-edit";
constant YAML_PATCH_FENCE (line 15) | const YAML_PATCH_FENCE = "```yaml-patch";
constant DIFF_FENCE (line 16) | const DIFF_FENCE = "```diff";
constant FENCE_CLOSE (line 17) | const FENCE_CLOSE = "```";
type YamlTransformOptions (line 19) | interface YamlTransformOptions {
function createYamlTransform (line 38) | function createYamlTransform(
function pipeYamlRender (line 441) | function pipeYamlRender<T = StreamChunk>(
FILE: packages/zustand/src/index.test.ts
type AppState (line 135) | interface AppState extends Record<string, unknown> {
type AppState (line 161) | interface AppState extends Record<string, unknown> {
type AppState (line 179) | interface AppState extends Record<string, unknown> {
FILE: packages/zustand/src/index.ts
type ZustandStateStoreOptions (line 10) | interface ZustandStateStoreOptions<S extends StateModel = StateModel> {
function zustandStateStore (line 57) | function zustandStateStore<S extends StateModel = StateModel>(
FILE: skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx
constant COLOR_BAR (line 11) | const COLOR_BAR = "#D4AF37";
constant COLOR_TEXT (line 12) | const COLOR_TEXT = "#ffffff";
constant COLOR_MUTED (line 13) | const COLOR_MUTED = "#888888";
constant COLOR_BG (line 14) | const COLOR_BG = "#0a0a0a";
constant COLOR_AXIS (line 15) | const COLOR_AXIS = "#333333";
FILE: skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx
constant COLOR_BG (line 8) | const COLOR_BG = "#ffffff";
constant COLOR_TEXT (line 9) | const COLOR_TEXT = "#000000";
constant FULL_TEXT (line 10) | const FULL_TEXT = "From prompt to motion graphics. This is Remotion.";
constant PAUSE_AFTER (line 11) | const PAUSE_AFTER = "From prompt to motion graphics.";
constant FONT_SIZE (line 12) | const FONT_SIZE = 72;
constant FONT_WEIGHT (line 13) | const FONT_WEIGHT = 700;
constant CHAR_FRAMES (line 14) | const CHAR_FRAMES = 2;
constant CURSOR_BLINK_FRAMES (line 15) | const CURSOR_BLINK_FRAMES = 16;
constant PAUSE_SECONDS (line 16) | const PAUSE_SECONDS = 1;
FILE: skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx
constant COLOR_BG (line 16) | const COLOR_BG = "#ffffff";
constant COLOR_TEXT (line 17) | const COLOR_TEXT = "#000000";
constant COLOR_HIGHLIGHT (line 18) | const COLOR_HIGHLIGHT = "#A7C7E7";
constant FULL_TEXT (line 19) | const FULL_TEXT = "This is Remotion.";
constant HIGHLIGHT_WORD (line 20) | const HIGHLIGHT_WORD = "Remotion";
constant FONT_SIZE (line 21) | const FONT_SIZE = 72;
constant FONT_WEIGHT (line 22) | const FONT_WEIGHT = 700;
constant HIGHLIGHT_START_FRAME (line 23) | const HIGHLIGHT_START_FRAME = 30;
constant HIGHLIGHT_WIPE_DURATION (line 24) | const HIGHLIGHT_WIPE_DURATION = 18;
FILE: skills/skill-creator/scripts/init_skill.py
function title_case_skill_name (line 189) | def title_case_skill_name(skill_name):
function init_skill (line 194) | def init_skill(skill_name, path):
function main (line 273) | def main():
FILE: skills/skill-creator/scripts/package_skill.py
function package_skill (line 19) | def package_skill(skill_path, output_dir=None):
function main (line 85) | def main():
FILE: skills/skill-creator/scripts/quick_validate.py
function validate_skill (line 12) | def validate_skill(skill_path):
FILE: tests/e2e/state-store-e2e.test.ts
constant HAS_API_KEY (line 21) | const HAS_API_KEY = !!process.env.AI_GATEWAY_API_KEY;
function generateSpec (line 61) | async function generateSpec(): Promise<Spec> {
function extractStatePaths (line 83) | function extractStatePaths(spec: Spec): string[] {
function flattenState (line 109) | function flattenState(
function verifyStoreRoundTrip (line 133) | function verifyStoreRoundTrip(store: StateStore, spec: Spec) {
Condensed preview — 1089 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,566K chars).
[
{
"path": ".changeset/README.md",
"chars": 685,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 900,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.1.1/schema.json\",\n \"changelog\": \"@changesets/cli/changelog\",\n \""
},
{
"path": ".cursor/mcp.json",
"chars": 136,
"preview": "{\n \"mcpServers\": {\n \"json-render\": {\n \"command\": \"npx\",\n \"args\": [\"tsx\", \"examples/mcp/server.ts\", \"--stdi"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1184,
"preview": "name: CI\n\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\nconcurrency:\n group: ${{ g"
},
{
"path": ".github/workflows/release.yml",
"chars": 1083,
"preview": "name: Release\n\non:\n push:\n branches:\n - main\n workflow_dispatch:\n\nconcurrency: ${{ github.workflow }}-${{ gith"
},
{
"path": ".gitignore",
"chars": 602,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# Dependencies\nnode_modules\n.pnp\n"
},
{
"path": ".husky/pre-commit",
"chars": 17,
"preview": "pnpm lint-staged\n"
},
{
"path": ".npmrc",
"chars": 0,
"preview": ""
},
{
"path": ".vscode/mcp.json",
"chars": 155,
"preview": "{\n \"servers\": {\n \"json-render\": {\n \"type\": \"stdio\",\n \"command\": \"npx\",\n \"args\": [\"tsx\", \"examples/mcp"
},
{
"path": "AGENTS.md",
"chars": 5704,
"preview": "# AGENTS.md\n\nInstructions for AI coding agents working with this codebase.\n\n## Package Management\n\n**Always check the la"
},
{
"path": "LICENSE",
"chars": 10931,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 17425,
"preview": "# json-render\n\n**The Generative UI framework.**\n\nGenerate dynamic, personalized UIs from prompts without sacrificing rel"
},
{
"path": "apps/web/.env.example",
"chars": 526,
"preview": "# Vercel AI Gateway\n# Automatically authenticated when deployed on Vercel\n# For local development, get your key from htt"
},
{
"path": "apps/web/.gitignore",
"chars": 442,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "apps/web/CHANGELOG.md",
"chars": 1444,
"preview": "# web\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [43b7515]\n - @json-render/core@0.14.1\n - @json-render/codeg"
},
{
"path": "apps/web/README.md",
"chars": 1435,
"preview": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-re"
},
{
"path": "apps/web/app/(main)/docs/a2ui/page.mdx",
"chars": 7562,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/a2ui\")\n\n# A2UI Integration"
},
{
"path": "apps/web/app/(main)/docs/adaptive-cards/page.mdx",
"chars": 11197,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/adaptive-cards\")\n\n# Adapti"
},
{
"path": "apps/web/app/(main)/docs/ag-ui/page.mdx",
"chars": 10235,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/ag-ui\")\n\n# AG-UI Integrati"
},
{
"path": "apps/web/app/(main)/docs/ai-sdk/page.mdx",
"chars": 6188,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/ai-sdk\")\n\n# AI SDK Integra"
},
{
"path": "apps/web/app/(main)/docs/api/codegen/page.mdx",
"chars": 2656,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/codegen\")\n\n# @json-ren"
},
{
"path": "apps/web/app/(main)/docs/api/core/page.mdx",
"chars": 19576,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/core\")\n\n# @json-render"
},
{
"path": "apps/web/app/(main)/docs/api/image/page.mdx",
"chars": 8535,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/image\")\n\n# @json-rende"
},
{
"path": "apps/web/app/(main)/docs/api/jotai/page.mdx",
"chars": 2423,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/jotai\")\n\n# @json-rende"
},
{
"path": "apps/web/app/(main)/docs/api/mcp/page.mdx",
"chars": 6173,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/mcp\")\n\n# @json-render/"
},
{
"path": "apps/web/app/(main)/docs/api/react/page.mdx",
"chars": 10661,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/react\")\n\n# @json-rende"
},
{
"path": "apps/web/app/(main)/docs/api/react-email/page.mdx",
"chars": 7135,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/react-email\")\n\n# @json"
},
{
"path": "apps/web/app/(main)/docs/api/react-native/page.mdx",
"chars": 8536,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/react-native\")\n\n# @jso"
},
{
"path": "apps/web/app/(main)/docs/api/react-pdf/page.mdx",
"chars": 9644,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/react-pdf\")\n\n# @json-r"
},
{
"path": "apps/web/app/(main)/docs/api/react-three-fiber/page.mdx",
"chars": 9500,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/react-three-fiber\")\n\n#"
},
{
"path": "apps/web/app/(main)/docs/api/redux/page.mdx",
"chars": 2371,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/redux\")\n\n# @json-rende"
},
{
"path": "apps/web/app/(main)/docs/api/remotion/page.mdx",
"chars": 5174,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/remotion\")\n\n# @json-re"
},
{
"path": "apps/web/app/(main)/docs/api/shadcn/page.mdx",
"chars": 7595,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/shadcn\")\n\n# @json-rend"
},
{
"path": "apps/web/app/(main)/docs/api/solid/page.mdx",
"chars": 4551,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\";\nexport const metadata = pageMetadata(\"docs/api/solid\");\n\n# @json-ren"
},
{
"path": "apps/web/app/(main)/docs/api/svelte/page.mdx",
"chars": 2910,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/svelte\")\n\n# @json-rend"
},
{
"path": "apps/web/app/(main)/docs/api/vue/page.mdx",
"chars": 9774,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/vue\")\n\n# @json-render/"
},
{
"path": "apps/web/app/(main)/docs/api/xstate/page.mdx",
"chars": 1612,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/xstate\")\n\n# @json-rend"
},
{
"path": "apps/web/app/(main)/docs/api/yaml/page.mdx",
"chars": 5855,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/yaml\")\n\n# @json-render"
},
{
"path": "apps/web/app/(main)/docs/api/zustand/page.mdx",
"chars": 2371,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/api/zustand\")\n\n# @json-ren"
},
{
"path": "apps/web/app/(main)/docs/catalog/page.mdx",
"chars": 3031,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/catalog\")\n\n# Catalog\n\nThe "
},
{
"path": "apps/web/app/(main)/docs/changelog/page.mdx",
"chars": 25857,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/changelog\")\n\n# Changelog\n\n"
},
{
"path": "apps/web/app/(main)/docs/code-export/page.mdx",
"chars": 3569,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/code-export\")\n\n# Code Expo"
},
{
"path": "apps/web/app/(main)/docs/computed-values/page.mdx",
"chars": 2875,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/computed-values\")\n\n# Compu"
},
{
"path": "apps/web/app/(main)/docs/custom-schema/page.mdx",
"chars": 7898,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/custom-schema\")\n\n# Custom "
},
{
"path": "apps/web/app/(main)/docs/data-binding/page.mdx",
"chars": 8099,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/data-binding\")\n\n# Data Bin"
},
{
"path": "apps/web/app/(main)/docs/generation-modes/page.mdx",
"chars": 6548,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/generation-modes\")\n\n# Gene"
},
{
"path": "apps/web/app/(main)/docs/installation/page.mdx",
"chars": 1970,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/installation\")\n\n# Installa"
},
{
"path": "apps/web/app/(main)/docs/layout.tsx",
"chars": 1078,
"preview": "import { DocsMobileNav } from \"@/components/docs-mobile-nav\";\nimport { DocsSidebar } from \"@/components/docs-sidebar\";\ni"
},
{
"path": "apps/web/app/(main)/docs/migration/page.mdx",
"chars": 11013,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/migration\")\n\n# Migration G"
},
{
"path": "apps/web/app/(main)/docs/openapi/page.mdx",
"chars": 7985,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/openapi\")\n\n# OpenAPI Integ"
},
{
"path": "apps/web/app/(main)/docs/page.mdx",
"chars": 4116,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs\")\n\n# Introduction\n\njson-re"
},
{
"path": "apps/web/app/(main)/docs/quick-start/page.mdx",
"chars": 5734,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/quick-start\")\n\n# Quick Sta"
},
{
"path": "apps/web/app/(main)/docs/registry/page.mdx",
"chars": 10355,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/registry\")\n\n# Registry\n\nA "
},
{
"path": "apps/web/app/(main)/docs/renderers/page.mdx",
"chars": 7730,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\";\nexport const metadata = pageMetadata(\"docs/renderers\");\n\n# Renderers"
},
{
"path": "apps/web/app/(main)/docs/schemas/page.mdx",
"chars": 4117,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/schemas\")\n\n# Schemas\n\nSche"
},
{
"path": "apps/web/app/(main)/docs/skills/page.mdx",
"chars": 5658,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\";\n\nexport const metadata = pageMetadata(\"docs/skills\");\n\n# Skills\n\njso"
},
{
"path": "apps/web/app/(main)/docs/specs/page.mdx",
"chars": 7037,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/specs\")\n\n# Specs\n\nA spec i"
},
{
"path": "apps/web/app/(main)/docs/streaming/page.mdx",
"chars": 4943,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/streaming\")\n\n# Streaming\n\n"
},
{
"path": "apps/web/app/(main)/docs/validation/page.mdx",
"chars": 7611,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/validation\")\n\n# Validation"
},
{
"path": "apps/web/app/(main)/docs/visibility/page.mdx",
"chars": 7452,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/visibility\")\n\n# Visibility"
},
{
"path": "apps/web/app/(main)/docs/watchers/page.mdx",
"chars": 4651,
"preview": "import { pageMetadata } from \"@/lib/page-metadata\"\nexport const metadata = pageMetadata(\"docs/watchers\")\n\n# Watchers\n\nRe"
},
{
"path": "apps/web/app/(main)/examples/page.tsx",
"chars": 4974,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { examples, allTa"
},
{
"path": "apps/web/app/(main)/layout.tsx",
"chars": 279,
"preview": "import { Header } from \"@/components/header\";\n\nexport default function MainLayout({\n children,\n}: {\n children: React.R"
},
{
"path": "apps/web/app/(main)/page.tsx",
"chars": 11037,
"preview": "import Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\nimport { Demo } from \"@/components/demo\";"
},
{
"path": "apps/web/app/api/docs-chat/route.ts",
"chars": 5076,
"preview": "import { readFile } from \"fs/promises\";\nimport { join } from \"path\";\nimport { convertToModelMessages, stepCountIs, strea"
},
{
"path": "apps/web/app/api/docs-markdown/route.ts",
"chars": 1568,
"preview": "import { readFile } from \"fs/promises\";\nimport { join } from \"path\";\nimport { NextRequest, NextResponse } from \"next/ser"
},
{
"path": "apps/web/app/api/generate/route.ts",
"chars": 4866,
"preview": "import { streamText } from \"ai\";\nimport { headers } from \"next/headers\";\nimport type { Spec, EditMode } from \"@json-rend"
},
{
"path": "apps/web/app/api/search/route.ts",
"chars": 1994,
"preview": "import { NextRequest, NextResponse } from \"next/server\";\nimport { getSearchIndex } from \"@/lib/search-index\";\n\nexport as"
},
{
"path": "apps/web/app/globals.css",
"chars": 4684,
"preview": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@source \"../node_modules/streamdown/dist/index.js\";\n\n@custom-variant d"
},
{
"path": "apps/web/app/layout.tsx",
"chars": 3094,
"preview": "import type { Metadata } from \"next\";\nimport localFont from \"next/font/local\";\nimport { GeistPixelSquare } from \"geist/f"
},
{
"path": "apps/web/app/not-found.tsx",
"chars": 737,
"preview": "import Link from \"next/link\";\nimport { Header } from \"@/components/header\";\n\nexport default function NotFound() {\n retu"
},
{
"path": "apps/web/app/og/[...slug]/route.tsx",
"chars": 416,
"preview": "import { NextResponse } from \"next/server\";\nimport { getPageTitle, renderOgImage } from \"../og-image\";\n\nexport async fun"
},
{
"path": "apps/web/app/og/og-image.tsx",
"chars": 2744,
"preview": "import { ImageResponse } from \"next/og\";\nimport { readFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\n"
},
{
"path": "apps/web/app/og/route.tsx",
"chars": 157,
"preview": "import { getPageTitle, renderOgImage } from \"./og-image\";\n\nexport async function GET() {\n const title = getPageTitle(\"\""
},
{
"path": "apps/web/app/playground/layout.tsx",
"chars": 176,
"preview": "export default function PlaygroundLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return <div className=\"h"
},
{
"path": "apps/web/app/playground/page.tsx",
"chars": 230,
"preview": "import { Playground } from \"@/components/playground\";\nimport { pageMetadata } from \"@/lib/page-metadata\";\n\nexport const "
},
{
"path": "apps/web/components/code-block.tsx",
"chars": 5514,
"preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { createHighlighter, type Highlighter } from \"shiki\";"
},
{
"path": "apps/web/components/code-tabs.tsx",
"chars": 1883,
"preview": "\"use client\";\n\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { CopyButton } fr"
},
{
"path": "apps/web/components/code.tsx",
"chars": 4710,
"preview": "import { codeToHtml } from \"shiki\";\nimport { CopyButton } from \"./copy-button\";\nimport { ExpandableCode } from \"./expand"
},
{
"path": "apps/web/components/copy-button.tsx",
"chars": 1351,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\n\ninterface CopyButtonProps {\n text: string;\n className?: string;\n}\n\ne"
},
{
"path": "apps/web/components/copy-page-button.tsx",
"chars": 1976,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\n\nexport function CopyPag"
},
{
"path": "apps/web/components/demo.tsx",
"chars": 60414,
"preview": "\"use client\";\n\nimport React, {\n useEffect,\n useState,\n useCallback,\n useRef,\n useMemo,\n} from \"react\";\nimport { use"
},
{
"path": "apps/web/components/docs-chat.tsx",
"chars": 17439,
"preview": "\"use client\";\n\nimport {\n useRef,\n useEffect,\n useState,\n useCallback,\n type PointerEvent as ReactPointerEvent,\n} fr"
},
{
"path": "apps/web/components/docs-mobile-nav.tsx",
"chars": 3293,
"preview": "\"use client\";\n\nimport { useState, useMemo } from \"react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"nex"
},
{
"path": "apps/web/components/docs-sidebar.tsx",
"chars": 2131,
"preview": "\"use client\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { cn } from \"@/lib/ut"
},
{
"path": "apps/web/components/expandable-code.tsx",
"chars": 1454,
"preview": "\"use client\";\n\nimport { useState, useRef, useEffect } from \"react\";\n\ninterface ExpandableCodeProps {\n children: React.R"
},
{
"path": "apps/web/components/generation-modes-diagram.tsx",
"chars": 9392,
"preview": "\"use client\";\n\nfunction ScheduleItem({\n time,\n label,\n color,\n}: {\n time: string;\n label: string;\n color: string;\n"
},
{
"path": "apps/web/components/header.tsx",
"chars": 6326,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigat"
},
{
"path": "apps/web/components/package-install.tsx",
"chars": 4456,
"preview": "import { codeToHtml } from \"shiki\";\nimport { CodeTabs } from \"./code-tabs\";\n\nconst vercelDarkTheme = {\n name: \"vercel-d"
},
{
"path": "apps/web/components/playground.tsx",
"chars": 47214,
"preview": "\"use client\";\n\nimport { useEffect, useState, useCallback, useRef, useMemo } from \"react\";\nimport { flushSync } from \"rea"
},
{
"path": "apps/web/components/search.tsx",
"chars": 8378,
"preview": "\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useRouter } from \"next/navigat"
},
{
"path": "apps/web/components/table-of-contents.tsx",
"chars": 2182,
"preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { cn }"
},
{
"path": "apps/web/components/theme-provider.tsx",
"chars": 352,
"preview": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\n\nexport function ThemeProvider({ child"
},
{
"path": "apps/web/components/theme-toggle.tsx",
"chars": 1606,
"preview": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\n\nexport function The"
},
{
"path": "apps/web/components/ui/accordion.tsx",
"chars": 2059,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Accordion as Acc"
},
{
"path": "apps/web/components/ui/alert.tsx",
"chars": 1625,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \""
},
{
"path": "apps/web/components/ui/badge.tsx",
"chars": 1642,
"preview": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"cla"
},
{
"path": "apps/web/components/ui/button.tsx",
"chars": 2402,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from "
},
{
"path": "apps/web/components/ui/card.tsx",
"chars": 2000,
"preview": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({ className, ...props }: React.Compone"
},
{
"path": "apps/web/components/ui/carousel.tsx",
"chars": 5624,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-car"
},
{
"path": "apps/web/components/ui/checkbox.tsx",
"chars": 1222,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon } from \"lucide-react\";\nimport { Checkbox as CheckboxPr"
},
{
"path": "apps/web/components/ui/collapsible.tsx",
"chars": 801,
"preview": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\n\nfunction Collapsible({\n ...props\n}: Rea"
},
{
"path": "apps/web/components/ui/dialog.tsx",
"chars": 4325,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive "
},
{
"path": "apps/web/components/ui/drawer.tsx",
"chars": 4273,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/"
},
{
"path": "apps/web/components/ui/dropdown-menu.tsx",
"chars": 8451,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\ni"
},
{
"path": "apps/web/components/ui/input.tsx",
"chars": 967,
"preview": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Input({ className, type, ...props }: React."
},
{
"path": "apps/web/components/ui/label.tsx",
"chars": 613,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\n\nimport { cn } from \""
},
{
"path": "apps/web/components/ui/pagination.tsx",
"chars": 2732,
"preview": "import * as React from \"react\";\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n MoreHorizontalIcon,\n} from \"lucide-rea"
},
{
"path": "apps/web/components/ui/popover.tsx",
"chars": 2370,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\n\nimport { cn } fr"
},
{
"path": "apps/web/components/ui/progress.tsx",
"chars": 742,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\n\nimport { cn } "
},
{
"path": "apps/web/components/ui/radio-group.tsx",
"chars": 1469,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { CircleIcon } from \"lucide-react\";\nimport { RadioGroup as RadioGr"
},
{
"path": "apps/web/components/ui/resizable.tsx",
"chars": 1875,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { GripVerticalIcon } from \"lucide-react\";\nimport { Group, Panel, S"
},
{
"path": "apps/web/components/ui/select.tsx",
"chars": 6376,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";"
},
{
"path": "apps/web/components/ui/separator.tsx",
"chars": 701,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\n\nimport { cn "
},
{
"path": "apps/web/components/ui/sheet.tsx",
"chars": 2522,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } f"
},
{
"path": "apps/web/components/ui/skeleton.tsx",
"chars": 279,
"preview": "import { cn } from \"@/lib/utils\";\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n"
},
{
"path": "apps/web/components/ui/slider.tsx",
"chars": 2002,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\n\nimport { cn } from"
},
{
"path": "apps/web/components/ui/sonner.tsx",
"chars": 1042,
"preview": "\"use client\";\n\nimport {\n CircleCheckIcon,\n InfoIcon,\n Loader2Icon,\n OctagonXIcon,\n TriangleAlertIcon,\n} from \"lucid"
},
{
"path": "apps/web/components/ui/switch.tsx",
"chars": 1417,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\n\nimport { cn } from"
},
{
"path": "apps/web/components/ui/table.tsx",
"chars": 2464,
"preview": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Table({ className, ...props "
},
{
"path": "apps/web/components/ui/tabs.tsx",
"chars": 1980,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\n\nimport { cn } fro"
},
{
"path": "apps/web/components/ui/textarea.tsx",
"chars": 764,
"preview": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.Com"
},
{
"path": "apps/web/components/ui/toggle-group.tsx",
"chars": 2323,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { To"
},
{
"path": "apps/web/components/ui/toggle.tsx",
"chars": 1574,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport"
},
{
"path": "apps/web/components/ui/tooltip.tsx",
"chars": 1840,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\n\nimport { cn } fr"
},
{
"path": "apps/web/components.json",
"chars": 447,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"new-york\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {"
},
{
"path": "apps/web/eslint.config.js",
"chars": 280,
"preview": "import { nextJsConfig } from \"@internal/eslint-config/next-js\";\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport "
},
{
"path": "apps/web/lib/docs-navigation.ts",
"chars": 3503,
"preview": "export type NavItem = {\n title: string;\n href: string;\n external?: boolean;\n};\n\nexport type NavSection = {\n title: s"
},
{
"path": "apps/web/lib/examples.ts",
"chars": 4517,
"preview": "export type Example = {\n slug: string;\n title: string;\n description: string;\n tags: string[];\n githubPath: string;\n"
},
{
"path": "apps/web/lib/mdx-to-markdown.ts",
"chars": 1824,
"preview": "/**\n * Converts raw MDX content to clean Markdown suitable for AI agents.\n *\n * Transformations:\n * - Remove `export` st"
},
{
"path": "apps/web/lib/page-metadata.ts",
"chars": 1017,
"preview": "import type { Metadata } from \"next\";\nimport { PAGE_TITLES } from \"./page-titles\";\n\nconst DESCRIPTION =\n \"The Generativ"
},
{
"path": "apps/web/lib/page-titles.ts",
"chars": 2580,
"preview": "/**\n * Single source of truth for page titles.\n * Used by both page metadata exports and the OG image route.\n *\n * Keys "
},
{
"path": "apps/web/lib/rate-limit.ts",
"chars": 1662,
"preview": "import { Ratelimit } from \"@upstash/ratelimit\";\nimport { Redis } from \"@upstash/redis\";\n\n// Lazy initialization to avoid"
},
{
"path": "apps/web/lib/render/catalog-display.ts",
"chars": 3987,
"preview": "/**\n * Shared utility for extracting catalog data for display in the UI.\n * Used by both the demo and playground compone"
},
{
"path": "apps/web/lib/render/catalog.ts",
"chars": 14738,
"preview": "import { defineCatalog } from \"@json-render/core\";\nimport { schema } from \"@json-render/react/schema\";\nimport { z } from"
},
{
"path": "apps/web/lib/render/registry.tsx",
"chars": 39924,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n defineRegistry,\n useBoundProp,\n useStateBinding,\n useFiel"
},
{
"path": "apps/web/lib/render/renderer.tsx",
"chars": 2681,
"preview": "\"use client\";\n\nimport { useRef, useMemo, type ReactNode } from \"react\";\nimport { toast } from \"sonner\";\nimport {\n Rende"
},
{
"path": "apps/web/lib/search-index.ts",
"chars": 1981,
"preview": "import { readFile } from \"fs/promises\";\nimport { join } from \"path\";\nimport { docsNavigation } from \"./docs-navigation\";"
},
{
"path": "apps/web/lib/spec-patch.ts",
"chars": 4414,
"preview": "import type { Spec, JsonPatch } from \"@json-render/core\";\nimport { setByPath, getByPath, removeByPath } from \"@json-rend"
},
{
"path": "apps/web/lib/use-playground-stream.ts",
"chars": 17405,
"preview": "\"use client\";\n\nimport { useState, useCallback, useRef, useEffect } from \"react\";\nimport type { Spec, JsonPatch, EditMode"
},
{
"path": "apps/web/lib/utils.ts",
"chars": 169,
"preview": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: C"
},
{
"path": "apps/web/mdx-components.tsx",
"chars": 5695,
"preview": "import type { MDXComponents } from \"mdx/types\";\nimport Link from \"next/link\";\nimport { Code } from \"@/components/code\";\n"
},
{
"path": "apps/web/next.config.js",
"chars": 661,
"preview": "import createMDX from \"@next/mdx\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n serverExternalPackag"
},
{
"path": "apps/web/package.json",
"chars": 2238,
"preview": "{\n \"name\": \"web\",\n \"version\": \"0.1.9\",\n \"type\": \"module\",\n \"private\": true,\n \"license\": \"Apache-2.0\",\n \"scripts\": "
},
{
"path": "apps/web/postcss.config.mjs",
"chars": 70,
"preview": "export default {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\n"
},
{
"path": "apps/web/tsconfig.json",
"chars": 351,
"preview": "{\n \"extends\": \"@internal/typescript-config/nextjs.json\",\n \"compilerOptions\": {\n \"plugins\": [\n {\n \"name\""
},
{
"path": "examples/chat/.env.example",
"chars": 454,
"preview": "# Vercel AI Gateway\n# Automatically authenticated when deployed on Vercel\n# For local development, get your key from htt"
},
{
"path": "examples/chat/CHANGELOG.md",
"chars": 1386,
"preview": "# example-chat\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [43b7515]\n - @json-render/core@0.14.1\n - @json-ren"
},
{
"path": "examples/chat/app/api/generate/route.ts",
"chars": 1817,
"preview": "import { agent } from \"@/lib/agent\";\nimport { minuteRateLimit, dailyRateLimit } from \"@/lib/rate-limit\";\nimport {\n conv"
},
{
"path": "examples/chat/app/globals.css",
"chars": 3644,
"preview": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@source \"../../../node_modules/streamdown/dist/*.js\";\n\n@custom-variant"
},
{
"path": "examples/chat/app/layout.tsx",
"chars": 955,
"preview": "import type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport { Toaster } from \"son"
},
{
"path": "examples/chat/app/page.tsx",
"chars": 16555,
"preview": "\"use client\";\n\nimport { useState, useCallback, useRef, useEffect } from \"react\";\nimport { useChat } from \"@ai-sdk/react\""
},
{
"path": "examples/chat/components/theme-provider.tsx",
"chars": 354,
"preview": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\n\nexport function ThemeProvider({ child"
},
{
"path": "examples/chat/components/theme-toggle.tsx",
"chars": 854,
"preview": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { Moon, Sun }"
},
{
"path": "examples/chat/components/ui/accordion.tsx",
"chars": 2091,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport { Chev"
},
{
"path": "examples/chat/components/ui/alert.tsx",
"chars": 1625,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \""
},
{
"path": "examples/chat/components/ui/badge.tsx",
"chars": 1785,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from "
},
{
"path": "examples/chat/components/ui/button.tsx",
"chars": 1932,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from "
},
{
"path": "examples/chat/components/ui/card.tsx",
"chars": 2000,
"preview": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({ className, ...props }: React.Compone"
},
{
"path": "examples/chat/components/ui/chart.tsx",
"chars": 10144,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib"
},
{
"path": "examples/chat/components/ui/input.tsx",
"chars": 742,
"preview": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst Input = React.forwardRef<\n HTMLInputElement,\n "
},
{
"path": "examples/chat/components/ui/label.tsx",
"chars": 591,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn } from \"@"
},
{
"path": "examples/chat/components/ui/progress.tsx",
"chars": 742,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\n\nimport { cn } "
},
{
"path": "examples/chat/components/ui/radio-group.tsx",
"chars": 1425,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { Ci"
},
{
"path": "examples/chat/components/ui/select.tsx",
"chars": 4843,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport { Check, Che"
},
{
"path": "examples/chat/components/ui/separator.tsx",
"chars": 701,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\n\nimport { cn "
},
{
"path": "examples/chat/components/ui/skeleton.tsx",
"chars": 279,
"preview": "import { cn } from \"@/lib/utils\";\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n"
},
{
"path": "examples/chat/components/ui/table.tsx",
"chars": 2464,
"preview": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Table({ className, ...props "
},
{
"path": "examples/chat/components/ui/tabs.tsx",
"chars": 3796,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport"
},
{
"path": "examples/chat/eslint.config.js",
"chars": 670,
"preview": "import { nextJsConfig } from \"@internal/eslint-config/next-js\";\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport "
},
{
"path": "examples/chat/lib/agent.ts",
"chars": 10504,
"preview": "import { ToolLoopAgent, stepCountIs } from \"ai\";\nimport { gateway } from \"@ai-sdk/gateway\";\nimport { explorerCatalog } f"
},
{
"path": "examples/chat/lib/rate-limit.ts",
"chars": 1672,
"preview": "import { Ratelimit } from \"@upstash/ratelimit\";\nimport { Redis } from \"@upstash/redis\";\n\n// Lazy initialization to avoid"
},
{
"path": "examples/chat/lib/render/catalog.ts",
"chars": 14749,
"preview": "import { defineCatalog } from \"@json-render/core\";\nimport { schema } from \"@json-render/react/schema\";\nimport { shadcnCo"
},
{
"path": "examples/chat/lib/render/registry.tsx",
"chars": 27828,
"preview": "\"use client\";\n\nimport { useState, useRef, type ReactNode } from \"react\";\nimport { useBoundProp, defineRegistry } from \"@"
},
{
"path": "examples/chat/lib/render/renderer.tsx",
"chars": 1076,
"preview": "\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport {\n Renderer,\n type ComponentRenderer,\n type Spec,\n Sta"
},
{
"path": "examples/chat/lib/tools/crypto.ts",
"chars": 5469,
"preview": "import { tool } from \"ai\";\nimport { z } from \"zod\";\n\n// ================================================================"
},
{
"path": "examples/chat/lib/tools/github.ts",
"chars": 7713,
"preview": "import { tool } from \"ai\";\nimport { z } from \"zod\";\n\n// ----------------------------------------------------------------"
},
{
"path": "examples/chat/lib/tools/hackernews.ts",
"chars": 1907,
"preview": "import { tool } from \"ai\";\nimport { z } from \"zod\";\n\n/**\n * Get top stories from Hacker News.\n * Uses the official HN Fi"
},
{
"path": "examples/chat/lib/tools/search.ts",
"chars": 1274,
"preview": "import { tool, generateText } from \"ai\";\nimport { gateway } from \"@ai-sdk/gateway\";\nimport { z } from \"zod\";\n\n/**\n * Web"
},
{
"path": "examples/chat/lib/tools/weather.ts",
"chars": 4089,
"preview": "import { tool } from \"ai\";\nimport { z } from \"zod\";\n\n/**\n * Get current weather and 7-day forecast for a city using Open"
},
{
"path": "examples/chat/lib/utils.ts",
"chars": 169,
"preview": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: C"
},
{
"path": "examples/chat/next-env.d.ts",
"chars": 251,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\nimport \"./.next/dev/types/routes.d.ts\";"
},
{
"path": "examples/chat/next.config.ts",
"chars": 104,
"preview": "import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {};\n\nexport default nextConfig;\n"
},
{
"path": "examples/chat/package.json",
"chars": 1661,
"preview": "{\n \"name\": \"example-chat\",\n \"version\": \"0.1.9\",\n \"type\": \"module\",\n \"private\": true,\n \"scripts\": {\n \"predev\": \"c"
},
{
"path": "examples/chat/postcss.config.mjs",
"chars": 70,
"preview": "export default {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\n"
},
{
"path": "examples/chat/tsconfig.json",
"chars": 335,
"preview": "{\n \"extends\": \"../../packages/typescript-config/nextjs.json\",\n \"compilerOptions\": {\n \"plugins\": [{ \"name\": \"next\" }"
},
{
"path": "examples/dashboard/.env.example",
"chars": 380,
"preview": "# Database\nDATABASE_URL=postgresql://postgres:postgres@localhost:5432/json_render_dashboard_example\n\n# AI (optional - fo"
},
{
"path": "examples/dashboard/CHANGELOG.md",
"chars": 1400,
"preview": "# example-dashboard\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [43b7515]\n - @json-render/core@0.14.1\n - @jso"
},
{
"path": "examples/dashboard/app/api/generate/route.ts",
"chars": 1495,
"preview": "import { streamText } from \"ai\";\nimport { buildUserPrompt } from \"@json-render/core\";\nimport { dashboardCatalog } from \""
},
{
"path": "examples/dashboard/app/api/v1/accounts/[id]/route.ts",
"chars": 349,
"preview": "import { getAccount } from \"@/lib/db/store\";\n\nexport async function GET(\n req: Request,\n { params }: { params: Promise"
},
{
"path": "examples/dashboard/app/api/v1/accounts/route.ts",
"chars": 817,
"preview": "import { getAccounts } from \"@/lib/db/store\";\n\nexport async function GET() {\n const accountList = await getAccounts();\n"
},
{
"path": "examples/dashboard/app/api/v1/customers/[id]/route.ts",
"chars": 1071,
"preview": "import { getCustomer, updateCustomer, deleteCustomer } from \"@/lib/db/store\";\n\nexport async function GET(\n req: Request"
},
{
"path": "examples/dashboard/app/api/v1/customers/route.ts",
"chars": 879,
"preview": "import { getCustomers, createCustomer } from \"@/lib/db/store\";\n\nexport async function GET(req: Request) {\n const { sear"
},
{
"path": "examples/dashboard/app/api/v1/expenses/[id]/approve/route.ts",
"chars": 421,
"preview": "import { approveExpense } from \"@/lib/db/store\";\n\nexport async function POST(\n req: Request,\n { params }: { params: Pr"
},
{
"path": "examples/dashboard/app/api/v1/expenses/[id]/reject/route.ts",
"chars": 419,
"preview": "import { rejectExpense } from \"@/lib/db/store\";\n\nexport async function POST(\n req: Request,\n { params }: { params: Pro"
},
{
"path": "examples/dashboard/app/api/v1/expenses/[id]/route.ts",
"chars": 1050,
"preview": "import { getExpense, updateExpense, deleteExpense } from \"@/lib/db/store\";\n\nexport async function GET(\n req: Request,\n "
},
{
"path": "examples/dashboard/app/api/v1/expenses/route.ts",
"chars": 1128,
"preview": "import { getExpenses, createExpense } from \"@/lib/db/store\";\n\nexport async function GET(req: Request) {\n const { search"
},
{
"path": "examples/dashboard/app/api/v1/invoices/[id]/mark-paid/route.ts",
"chars": 429,
"preview": "import { markInvoicePaid } from \"@/lib/db/store\";\n\nexport async function POST(\n req: Request,\n { params }: { params: P"
},
{
"path": "examples/dashboard/app/api/v1/invoices/[id]/route.ts",
"chars": 1050,
"preview": "import { getInvoice, updateInvoice, deleteInvoice } from \"@/lib/db/store\";\n\nexport async function GET(\n req: Request,\n "
},
{
"path": "examples/dashboard/app/api/v1/invoices/[id]/send/route.ts",
"chars": 424,
"preview": "import { sendInvoice } from \"@/lib/db/store\";\n\nexport async function POST(\n req: Request,\n { params }: { params: Promi"
}
]
// ... and 889 more files (download for full content)
About this extraction
This page contains the full source code of the vercel-labs/json-render GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 1089 files (4.1 MB), approximately 1.1M tokens, and a symbol index with 2038 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.