✨ 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",
      "spacing": 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",
      "spacing": 4,
      "children": [
        {
          "type": "stack",
          "spacing": 2,
          "children": [
            {
              "type": "label",
              "htmlFor": "email",
              "label": "Email"
            },
            {
              "type": "input",
              "id": "email",
              "name": "email",
              "inputType": "email",
              "placeholder": "name@example.com",
              "required": true
            }
          ]
        },
        {
          "type": "stack",
          "spacing": 2,
          "children": [
            {
              "type": "label",
              "htmlFor": "password",
              "label": "Password"
            },
            {
              "type": "input",
              "id": "password",
              "name": "password",
              "inputType": "password",
              "placeholder": "Enter your password",
              "required": true
            }
          ]
        },
        {
          "type": "flex",
          "className": "items-center justify-between",
          "children": [
            {
              "type": "flex",
              "className": "items-center space-x-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": "div",
      "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. 58% less code.

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

43 lines

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

18 lines

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

Lines of code

43 → 18

58% smaller, 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

3x faster page loads and 6x smaller bundle sizes compared to traditional low-code platforms. Built on React 18+ with automatic optimizations.

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

85%+ test coverage, enterprise security built-in, comprehensive documentation, and active development support.

Modular Architecture

Tree-shakable packages, lazy-loaded plugins, and support for Server Components. Only load what you need.

Backend Agnostic

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

60+

Components

85%+

Test Coverage

50KB

Bundle Size

What Can You Build?

From admin panels to dashboards, ObjectUI handles it all

📊

Dashboards

Data visualization and analytics

⚙️

Admin Panels

Complete CRUD interfaces

📝

Forms

Complex multi-step forms

📄

CMS

Content management systems

🔧

Internal Tools

Business applications

✨

Interactive Examples

Explore 30+ components with live demos

Ready to Build Something Amazing?

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

Get Started Now