Object UI

The Universal Schema-Driven UI Engine

From JSON to world-class UI in minutes

Documentation | Quick Start

---

---

🚀 Quick Start (Development Mode)

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

1. Clone & Install

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

2. Run the Development Server

   pnpm dev
   # Opens http://localhost:3000

3. Edit & Reload

   Edit the JSON schema files and the changes 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 @object-ui/data-objectstack

🎨 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.

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

📦 Packages

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

Core Packages

Package	Description	Size
@object-ui/types	TypeScript definitions and protocol specs	10KB
@object-ui/core	Core logic, validation, registry, expression evaluation	20KB
@object-ui/react	React bindings and SchemaRenderer	15KB
@object-ui/components	Standard UI components (Tailwind + Shadcn)	50KB
@object-ui/fields	Field renderers and registry	12KB
@object-ui/layout	Layout components with React Router integration	18KB

CLI & Tools

Package	Description	Size
@object-ui/cli	CLI tool for building apps from JSON schemas	25KB
@object-ui/runner	Universal application runner for testing schemas	30KB
vscode-extension	VSCode extension with IntelliSense and live preview	32KB

Data Adapters

Package	Description	Size
@object-ui/data-objectstack	ObjectStack data adapter	8KB

Plugins (Lazy-Loaded)

Plugin	Description	Size
@object-ui/plugin-aggrid	AG Grid data grid integration	150KB
@object-ui/plugin-calendar	Calendar and event management	25KB
@object-ui/plugin-charts	Chart components powered by Recharts	80KB
@object-ui/plugin-chatbot	Chatbot interface components	35KB
@object-ui/plugin-dashboard	Dashboard layouts and widgets	22KB
@object-ui/plugin-editor	Rich text editor powered by Monaco	120KB
@object-ui/plugin-form	Advanced form components	28KB
@object-ui/plugin-gantt	Gantt chart visualization	40KB
@object-ui/plugin-grid	Advanced data grid	45KB
@object-ui/plugin-kanban	Kanban boards with drag-and-drop	100KB
@object-ui/plugin-map	Map visualization	60KB
@object-ui/plugin-markdown	Markdown rendering	30KB
@object-ui/plugin-timeline	Timeline components	20KB
@object-ui/plugin-view	ObjectQL-integrated views (grid, form, detail)	35KB

🔌 Data Integration

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

ObjectStack Integration

npm install @object-ui/core

import { createObjectStackAdapter } from '@object-ui/core';

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

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

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 →

🎯 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

🛣️ Roadmap

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

• 📖 Contributing Guide - How to contribute to the project

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 development site
pnpm dev

# Run tests
pnpm test

📄 License

Object UI is MIT licensed.

🌟 Community & Support

• ⭐ Star on GitHub - Show your support!
• 📖 Documentation - Comprehensive guides and API reference
• 🐛 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