JSON-to-UI rendering for Olwiba projects.

Documentation

🪲 Report a bug · ✨ Feature request

@olwiba/render is the @olwiba/ui adapter for @json-render/react.

It lets you describe UI declaratively as a JSON spec and renders it using the full Olwiba component library. Useful for AI-generated pages, dynamic dashboard layouts, or any surface where structure comes from data rather than code.

bun add @olwiba/render

Peer dependencies: @olwiba/cn, @olwiba/ui, react, react-dom, zod

import { RenderPage } from '@olwiba/render';

const spec = {
  root: 'header-1',
  elements: {
    'header-1': {
      type: 'PageHeader',
      props: { title: 'Dashboard', description: 'Welcome back' },
      children: ['card-1'],
    },
    'card-1': {
      type: 'StatCard',
      props: { label: 'Users', value: '1,234', delta: '+12%', trend: 'up' },
      children: [],
    },
  },
};

function DashboardPage() {
  return (
    <RenderPage
      spec={spec}
      onAction={{ navigate: (p) => router.navigate(p.to) }}
    />
  );
}

RenderPage Top-level renderer — pass a spec and action handlers, get a full page
defineRegistry Cherry-pick specific components for a lean custom renderer
catalog Full component registry with Zod-validated prop schemas
AI prompting catalog.prompt() generates a system prompt describing all registered components

• @olwiba/ui — the component library being rendered
• @olwiba/cn — base UI primitives
• @olwiba/sync — keep @olwiba/* deps up to date

Bug reports, pull requests & feature requests are welcome. Open an issue first for anything beyond a small fix.

Built with 💖 by Olwiba