Baserender

Build type-safe, declarative UIs with JSON schemas and TypeScript.

Baserender is a JSON-driven UI component library for TypeScript. Define your UI as structured data, and let Baserender render it to HTML. With 40+ built-in components and full type safety powered by Zod, you get autocomplete, validation, and confidence in your UI definitions.

Why Baserender?

• Type-Safe by Default - Zod schemas provide compile-time and runtime validation
• 40+ Components - Layouts, forms, navigation, overlays, and more
• Composable - Nest components freely to build complex UIs
• Zero Config - Get started immediately
• Lightweight - Minimal dependencies, small bundle size
• Serializable - Export UI definitions as JSON

Installation

pnpm add baserender zod
# or
npm install baserender zod

Quick Start

Hello World

Create src/index.ts:

import { Card, Button, renderToHTML } from 'baserender';

const ui = Card({
  id: 'hello',
  title: 'Hello, Baserender',
  description: 'Build type-safe UIs with JSON schemas',
  content: [
    Button({
      text: 'Get Started',
      variant: 'primary',
    }),
  ],
});

const html = renderToHTML(ui);
console.log(html);

Run it:

npx tsx src/index.ts

Output:

<div class="card">
  <header>
    <h3>Hello, Baserender</h3>
    <p>Build type-safe UIs with JSON schemas</p>
  </header>
  <section>
    <button class="btn btn-primary">Get Started</button>
  </section>
</div>

Mounting to DOM

import { Card, Button, mount } from 'baserender';

const ui = Card({
  title: 'Welcome',
  content: [Button({ text: 'Click me' })],
});

mount(ui, '#app');

Key Features

Type Safety - TypeScript catches errors before runtime:

Button({ variant: 'primary' }); // ✅ Works
Button({ variant: 'invalid' }); // ❌ TypeScript error

Composable - Build complex UIs by combining components:

Stack({
  direction: 'vertical',
  gap: 4,
  content: [
    Card({ title: 'Card 1' }),
    Card({ title: 'Card 2' }),
  ],
});

Nestable - Components support arbitrary nesting:

Card({
  title: 'Parent',
  content: [
    Stack({
      content: [
        Button({ text: 'Button 1' }),
        Button({ text: 'Button 2' }),
      ],
    }),
  ],
});

Available Components

Layout: Container, Stack, Grid, Spacer, Divider

Forms: Input, Select, Textarea, Checkbox, Radio Group

Content: Button, Card, Text, Icon, Badge

Navigation: Tabs, Breadcrumb, Pagination, Sidebar

Overlays: Dialog, Popover, Tooltip, Dropdown Menu

Feedback: Alert, Progress, Skeleton, Spinner, Toast

Advanced: Accordion, Avatar, Button Group, Command, Combobox, and more

Built-in features

SPA Router - Combine with a router to build single-page applications. Define routes as component schemas and render them dynamically.

import { createRouter } from 'baserender/router'
import ViewHome from './views/home'
import View404 from './views/404'
import buildPostPage from './views/blog'

const router = createRouter({
  routes: {
    '/': ViewHome()
    '/blog': () => fetch('/api/schemas/blog').then(r => r.json()),
    '/blog/:slug': ({ params }) => buildPostPage(params.slug),
  },
  notFound: View404()
})

router.mount('#app')

Server-Side Rendering (SSR) - Generate HTML on the server and send it to clients. Perfect for SEO, faster initial page loads, and dynamic content.

import { Text, renderToHTML } from "baserender";

function buildPageSchema(page) {
    return Text({ text: `Viewing: ${page}`})
}

app.get('/:page', (req, res) => {
  const page = buildPageSchema(req.params.page);
  const html = renderToHTML(page);
  res.send(html);
});

AI-Generated UI - Let AI models generate UI schemas based on prompts. Since UIs are just JSON, they're perfect for AI generation.

const aiPrompt = "Create a user profile card with email and phone fields";
const uiSchema = await generateUISchema(aiPrompt); // Call your AI model
const html = renderToHTML(uiSchema);

Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Clone your fork: git clone <your-fork-url>
3. Install dependencies: pnpm install
4. Create a feature branch: git checkout -b feature/your-feature
5. Make your changes and add tests
6. Run tests: pnpm test
7. Lint your code: pnpm lint:fix
8. Commit with clear messages: git commit -m "feat: add new feature"
9. Push to your fork: git push origin feature/your-feature
10. Create a Pull Request with a description of your changes

Guidelines

• Write tests for new features in tests/
• Follow the existing code style (use pnpm format)
• Keep components focused and reusable
• Update documentation for API changes
• Ensure all tests pass before submitting a PR

License

Released under MIT License - see details.

© 2026-present, Henry Hale