Object UI

The Universal Schema-Driven UI Engine

From JSON to world-class UI in minutes

Documentation | Quick Start | 🎨 Showcase | Examples

🎨 Try the Showcase

Explore all components interactively! The Object UI Showcase demonstrates every component, layout pattern, and feature in an interactive demo.

# Clone the repository
git clone https://github.com/objectql/objectui.git
cd objectui

# Install and build
pnpm install && pnpm build

# Run the showcase
pnpm showcase

Opens at: http://localhost:3000

What's included:

✨ 60+ component examples across 8 categories
📱 Responsive layouts (mobile, tablet, desktop)
🎨 Light/Dark theme support
🔍 Live schema inspection
📋 Copy-paste ready JSON examples

📖 Complete Showcase Guide →

🚀 Just JSON

No React code required. Run any folder containing an app.json or pages/*.json file:

# Run the CRM Example
pnpm dev:crm

# Run the Dashboard Example
pnpm dev:dashboard

# Run any custom folder
pnpm start:app ./my-app-folder

🚀 Quick Start (Development Mode)

Since this package is not yet published to NPM, here is how to play with the source code:

Clone & Install

git clone https://github.com/objectstack-ai/objectui.git
cd objectui
pnpm install
# Build the core engine
pnpm build

Run Examples

We have pre-configured commands to run the JSON examples directly from the source.
- Run Dashboard Example:
```
pnpm dev
# Opens http://localhost:3000
```
- Run CRM Example (Routing Demo):
```
pnpm dev:crm
# Opens http://localhost:3001
```
Edit & Reload

Open examples/dashboard/app.json or examples/crm-app/pages/index.json. Any change you make to the JSON files will be instantly reflected in the browser.

📦 For React Developers

Install the core packages to use <SchemaRenderer> inside your Next.js or Vite app.

npm install @object-ui/react @object-ui/components

See React Integration Guide for details.

🎨 Beautiful by Default

Professional designs using Tailwind CSS and Shadcn/UI
Light/dark theme support
Fully customizable with utility classes
WCAG 2.1 AA accessible

⚡ Blazing Fast

3x faster page loads than traditional low-code platforms
6x smaller bundle sizes (< 50KB vs 300KB+)
Built on React 18+ with automatic optimizations
Tree-shakable architecture

🚀 Developer Friendly

TypeScript-first with complete type definitions
Zero learning curve if you know React
Works with existing tools and workflows
Full control - extend or customize anything

🛠️ Production Ready

85%+ test coverage
Enterprise security built-in
Comprehensive documentation
Active development and support

Why Object UI?

For You as a Developer

Stop Writing Repetitive UI Code

// Traditional React: 200+ lines
function UserForm() {
  // ... useState, validation, handlers, JSX
}

// Object UI: 20 lines
const schema = {
  type: "crud",
  api: "/api/users",
  columns: [...]
}

Better Performance, Smaller Bundle

Automatic code splitting
Lazy-loaded components
Zero runtime CSS overhead
Optimized for production

Full Control & Flexibility

Mix with existing React code
Override any component
Custom themes with Tailwind
Export to standard React anytime

vs Other Solutions

Feature	Object UI	Amis	Formily	Material-UI
Tailwind Native	✅	❌	❌	❌
Bundle Size	50KB	300KB+	200KB+	500KB+
TypeScript	✅ Full	Partial	✅ Full	✅ Full
Tree Shakable	✅	❌	⚠️ Partial	⚠️ Partial
Server Components	✅	❌	❌	⚠️ Coming
Visual Designer	✅	✅	❌	❌

Quick Start

Option 1: Using CLI (Fastest Way) 🚀

The easiest way to get started is using the Object UI CLI:

# Install the CLI globally
npm install -g @object-ui/cli

# Create a new app from JSON schema
objectui init my-app

# Start the development server
cd my-app
objectui serve app.schema.json

Your app will be running at http://localhost:3000! 🎉

Just edit app.schema.json to build your UI - no React code needed.

📖 CLI Documentation

Option 2: Using as a Library

Installation

# Using npm
npm install @object-ui/react @object-ui/components

# Using yarn
yarn add @object-ui/react @object-ui/components

# Using pnpm
pnpm add @object-ui/react @object-ui/components

Basic Usage

import React from 'react'
import { SchemaRenderer } from '@object-ui/react'
import { registerDefaultRenderers } from '@object-ui/components'

// Register default components once
registerDefaultRenderers()

const schema = {
  type: "page",
  title: "Dashboard",
  body: {
    type: "grid",
    columns: 3,
    items: [
      { type: "card", title: "Total Users", value: "${stats.users}" },
      { type: "card", title: "Revenue", value: "${stats.revenue}" },
      { type: "card", title: "Orders", value: "${stats.orders}" }
    ]
  }
}

function App() {
  const data = {
    stats: { users: 1234, revenue: "$56,789", orders: 432 }
  }
  
  return <SchemaRenderer schema={schema} data={data} />
}

export default App

Visual Designer

Object UI includes a visual designer package that allows you to build UIs with a drag-and-drop interface. See the @object-ui/designer package for more information.

📦 Packages

Object UI is a modular monorepo with packages designed for specific use cases:

Package	Description	Size
@object-ui/cli	CLI tool for building apps from JSON schemas	25KB
@object-ui/types	TypeScript definitions and protocol specs	10KB
@object-ui/core	Core logic, validation, registry (Zero React)	20KB
@object-ui/react	React bindings and `SchemaRenderer`	15KB
@object-ui/components	Standard UI components (Tailwind + Shadcn)	50KB
@object-ui/designer	Visual drag-and-drop schema editor	80KB
@object-ui/data-objectql	ObjectQL API adapter for data integration	15KB
vscode-extension	VSCode extension for schema development	32KB

Plugins (lazy-loaded):

@object-ui/plugin-charts - Chart components (Chart.js)
@object-ui/plugin-editor - Rich text editor components

Developer Tools:

VSCode Extension - IntelliSense, live preview, validation, and snippets for Object UI schemas

🔌 Data Integration

Object UI is designed to work with any backend through its universal DataSource interface:

ObjectQL Integration

npm install @object-ui/data-objectql

import { ObjectQLDataSource } from '@object-ui/data-objectql';

const dataSource = new ObjectQLDataSource({
  baseUrl: 'https://api.example.com',
  token: 'your-auth-token'
});

// Use with any component
<SchemaRenderer schema={schema} dataSource={dataSource} />

ObjectQL Integration Guide →

Custom Data Sources

You can create adapters for any backend (REST, GraphQL, Firebase, etc.) by implementing the DataSource interface:

import type { DataSource, QueryParams, QueryResult } from '@object-ui/types';

class MyCustomDataSource implements DataSource {
  async find(resource: string, params?: QueryParams): Promise<QueryResult> {
    // Your implementation
  }
  // ... other methods
}

Data Source Examples →

📚 Documentation

Getting Started

Introduction - Learn what Object UI is and why it exists
Quick Start - Build your first app in 5 minutes
Installation - Detailed setup instructions
Visual Studio - Use the drag-and-drop designer

Core Concepts

Schema Rendering - Understand the rendering system
Architecture - Technical architecture overview
Component System - How components work

Data Integration

ObjectQL Integration - Connect to ObjectQL backends
Custom Data Sources - Build your own adapters

Protocol Specifications

Protocol Overview - Complete protocol reference
Form Protocol - Form schema specification
View Protocol - Data view specifications
Page Protocol - Page layout specifications

API Reference

Core API - @object-ui/core API reference
React API - @object-ui/react API reference
Components API - Component library reference
Designer API - Visual designer API

Advanced

Lazy-Loaded Plugins - Plugin architecture
Component Packages - Creating custom components

🎯 What Can You Build?

Object UI is perfect for:

✅ Admin Panels - Complete CRUD interfaces in minutes
✅ Dashboards - Data visualization and analytics
✅ Forms - Complex multi-step forms with validation
✅ CMS - Content management systems
✅ Internal Tools - Business applications
✅ Prototypes - Rapid UI prototyping

🏗️ Examples

JSON Schema Examples (Recommended) 🚀

Explore ready-to-use JSON examples that showcase Object UI's capabilities:

# Install CLI
npm install -g @object-ui/cli

# Try different examples
objectui serve examples/basic-form/app.json       # Contact form
objectui serve examples/dashboard/app.json        # Analytics dashboard
objectui serve examples/data-display/app.json     # Data visualization
objectui serve examples/landing-page/app.json     # Marketing page

Available Examples:

📝 Basic Form - Contact form with validation
📊 Dashboard - Analytics with metrics and feeds
📋 Data Display - Lists, badges, progress bars
🚀 Landing Page - Full marketing page
🎨 CLI Demo - Bilingual form demo

View All Examples →

Full Application Examples

# Clone the repository
git clone https://github.com/objectstack-ai/objectui.git
cd objectui

# Install dependencies
pnpm install

# Run the prototype example
pnpm prototype

# Run the visual designer demo
pnpm designer

🛣️ Roadmap

See our detailed roadmap for upcoming features and release timeline.

Q1 2026 (Available March 2026):

✅ Core schema rendering
✅ 20+ production-ready components
✅ Expression system
✅ Visual designer (beta)

Q2-Q4 2026:

🔄 Advanced data binding
🔄 Real-time collaboration
🔄 Mobile components
🔄 AI-powered schema generation

🤝 Contributing

We welcome contributions! Please read our Contributing Guide for details.

For Developers

📖 Quick Start for Developers - Get started in 5 minutes
📋 Development Plan - Current priorities and roadmap

Development Setup

# Clone the repository
git clone https://github.com/objectstack-ai/objectui.git
cd objectui

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run the showcase
pnpm showcase

# Run tests
pnpm test

# Run documentation site
pnpm docs:dev

📄 License

Object UI is MIT licensed.

🌟 Community & Support

⭐ Star on GitHub - Show your support!
📖 Documentation - Comprehensive guides and API reference
💬 GitHub Discussions - Ask questions and share ideas
🐛 Report Issues - Found a bug? Let us know
📧 Email Us - Get in touch

🙏 Acknowledgments

Object UI is inspired by and builds upon ideas from:

Amis - Schema-driven UI framework
Formily - Form solution
Shadcn/UI - UI component library
Tailwind CSS - Utility-first CSS framework

Built with ❤️ by the ObjectQL Team

Website · Documentation · GitHub

Name		Name	Last commit message	Last commit date
Latest commit History 637 Commits
.changeset		.changeset
.github		.github
docs		docs
examples		examples
packages		packages
scripts		scripts
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
cliff.toml		cliff.toml
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
tsconfig.new.json		tsconfig.new.json
vitest.config.mts		vitest.config.mts
vitest.setup.ts		vitest.setup.ts

License

objectstack-ai/objectui

Folders and files

Latest commit

History

Repository files navigation

Object UI

🎨 Try the Showcase

🚀 Just JSON

🚀 Quick Start (Development Mode)

📦 For React Developers

🎨 Beautiful by Default

⚡ Blazing Fast

🚀 Developer Friendly

🛠️ Production Ready

Why Object UI?

For You as a Developer

vs Other Solutions

Quick Start

Option 1: Using CLI (Fastest Way) 🚀

Option 2: Using as a Library

Installation

Basic Usage

Visual Designer

📦 Packages

🔌 Data Integration

ObjectQL Integration

Custom Data Sources

📚 Documentation

Getting Started

Core Concepts

Data Integration

Protocol Specifications

API Reference

Advanced

🎯 What Can You Build?

🏗️ Examples

JSON Schema Examples (Recommended) 🚀

Full Application Examples

🛣️ Roadmap

🤝 Contributing

For Developers

Development Setup

📄 License

🌟 Community & Support

🙏 Acknowledgments

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 6

Uh oh!

Languages

Packages