✨ The Universal Schema-Driven UI Engine

From JSON to World-Class UI in Minutes

Build beautiful, production-ready interfaces without writing React code. Just define your UI in JSON and let ObjectUI handle the rest with Tailwind CSS and Shadcn UI.

Get Started Star on GitHub

auth/login-simple

{
  "type": "card",
  "className": "w-full max-w-md mx-auto",
  "header": [
    {
      "type": "stack",
      "gap": 2,
      "className": "text-center",
      "children": [
        {
          "type": "text",
          "content": "Welcome Back",
          "className": "text-2xl font-bold tracking-tight"
        },
        {
          "type": "text",
          "content": "Enter your credentials to sign in",
          "className": "text-sm text-muted-foreground"
        }
      ]
    }
  ],
  "children": [
    {
      "type": "stack",
      "gap": 4,
      "children": [
        {
          "type": "stack",
          "gap": 2,
          "children": [
            {
              "type": "label",
              "htmlFor": "email",
              "label": "Email"
            },
            {
              "type": "input",
              "id": "email",
              "name": "email",
              "inputType": "email",
              "placeholder": "name@example.com",
              "required": true
            }
          ]
        },
        {
          "type": "stack",
          "gap": 2,
          "children": [
            {
              "type": "label",
              "htmlFor": "password",
              "label": "Password"
            },
            {
              "type": "input",
              "id": "password",
              "name": "password",
              "inputType": "password",
              "placeholder": "Enter your password",
              "required": true
            }
          ]
        },
        {
          "type": "flex",
          "properties": {
            "align": "center",
            "justify": "between",
            "children": [
              {
                "type": "flex",
                "properties": {
                  "align": "center",
                  "gap": 2,
                  "children": [
                    {
                      "type": "checkbox",
                      "id": "remember",
                      "name": "remember"
                    },
                    {
                      "type": "label",
                      "htmlFor": "remember",
                      "label": "Remember me",
                      "className": "text-sm font-normal"
                    }
                  ]
                }
              },
              {
                "type": "text",
                "content": "Forgot password?",
                "className": "text-sm text-primary hover:underline cursor-pointer"
              }
            ]
          }
        },
        {
          "type": "button",
          "label": "Sign In",
          "variant": "default",
          "className": "w-full"
        },
        {
          "type": "separator",
          "className": "my-2"
        },
        {
          "type": "button",
          "label": "Continue with Google",
          "variant": "outline",
          "className": "w-full"
        }
      ]
    },
    {
      "type": "box",
      "className": "text-center text-sm pt-2",
      "children": [
        {
          "type": "text",
          "content": "Don't have an account? ",
          "className": "text-muted-foreground"
        },
        {
          "type": "text",
          "content": "Sign up",
          "className": "text-primary hover:underline cursor-pointer font-medium"
        }
      ]
    }
  ]
}

Live previewTry editing the JSON →

Side by side

Same UI. Written as JSON.

Here's a stats-card dashboard written two ways. Both render the same pixels — one is a React component, the other is plain JSON an AI agent can author, edit, or generate in a single tool call.

React + ShadcnStatsCards.tsx

import {
  Card, CardContent, CardHeader, CardTitle,
} from "@/components/ui/card";
import {
  DollarSign, Users, CreditCard, Activity,
} from "lucide-react";

const stats = [
  { title: "Total Revenue", value: "$45,231.89",
    change: "+20.1% from last month", Icon: DollarSign },
  { title: "Subscriptions", value: "+2,350",
    change: "+180.1% from last month", Icon: Users },
  { title: "Sales", value: "+12,234",
    change: "+19% from last month", Icon: CreditCard },
  { title: "Active Now", value: "+573",
    change: "+201 since last hour", Icon: Activity },
];

export function StatsCards() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {stats.map(({ title, value, change, Icon }) => (
        <Card key={title}>
          <CardHeader
            className="flex flex-row items-center
              justify-between space-y-0 pb-2"
          >
            <CardTitle className="text-sm font-medium">
              {title}
            </CardTitle>
            <Icon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{value}</div>
            <p className="text-xs text-muted-foreground">
              {change}
            </p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

ObjectUIstats-cards.schema.json

{
  "type": "grid",
  "columns": { "xs": 1, "md": 2, "lg": 4 }, "gap": 4,
  "children": [
    { "type": "statistic", "label": "Total Revenue",
      "value": "$45,231.89", "description": "+20.1% from last month",
      "icon": "dollar-sign" },
    { "type": "statistic", "label": "Subscriptions",
      "value": "+2,350", "description": "+180.1% from last month",
      "icon": "users" },
    { "type": "statistic", "label": "Sales",
      "value": "+12,234", "description": "+19% from last month",
      "icon": "credit-card" },
    { "type": "statistic", "label": "Active Now",
      "value": "+573", "description": "+201 since last hour",
      "icon": "activity" }
  ]
}

What you maintain

One JSON file

No component code, no build step.

Editable by AI agents

One tool call

JSON patches, no AST surgery or codegen pipelines.

Pixel parity

Same Shadcn

Identical components — just authored declaratively.

Why Choose ObjectUI?

Stop writing repetitive UI code. Build faster with better results.

Blazing Fast

Lazy-loaded plugins and tree-shakable packages: a page pays for the components it renders, nothing else.

Beautiful by Default

Professional designs using Tailwind CSS and Shadcn UI. Light/dark theme support, fully customizable, and WCAG 2.1 AA accessible.

Developer Friendly

TypeScript-first with complete type definitions. Zero learning curve if you know React. Works with existing tools and workflows.

Production Ready

TypeScript end to end, a CI suite on every change, and documentation that is gated against the code.

Modular Architecture

Tree-shakable packages and lazy-loaded plugins. Only load what you need.

Backend Agnostic

Works with any backend through universal DataSource interface. REST, GraphQL, Firebase, or custom adapters.

Ready to Build Something Amazing?

Join developers who are building faster with ObjectUI. Get started in minutes with our comprehensive documentation.

Get Started Now Browse the schema catalog