Skip to content

Commit 39cc0fc

Browse files
hotlonghotlong
authored
Merge pull request #98 from objectstack-ai/copilot/refactor-vitepress-homepage
2 parents a8c8ecd + 1d7b5d1 commit 39cc0fc

File tree

1 file changed

+284
-35
lines changed

1 file changed

+284
-35
lines changed

‎docs/index.md‎

Lines changed: 284 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,309 @@
22
layout: home
33

44
hero:
5-
name: Object UI
6-
text: The Universal UI Engine
7-
tagline: Build Enterprise Interfaces with JSON. Render with React, Style with Tailwind.
5+
name: ObjectUI
6+
text: Stop Hand-Coding Enterprise UIs
7+
tagline: A Server-Driven UI Engine that turns JSON into pixel-perfect React + Tailwind + Shadcn components. Build complex dashboards, forms, and data views faster—without sacrificing design quality or flexibility.
88
actions:
99
- theme: brand
10-
text: Quick Start
11-
link: /guide/introduction
10+
text: Read the Spec
11+
link: /protocol/overview
1212
- theme: alt
13-
text: Architecture
14-
link: /spec/architecture
13+
text: View Component Gallery
14+
link: /components/
1515

1616
features:
17-
- title: 🎨 Tailwind Native
18-
details: Fully stylable using standard Utility Classes. No hidden styles or CSS modules. Merge styles via `className`.
19-
- title: 🔌 Backend Agnostic
20-
details: Connect to Rest, GraphQL, or Local Data. Universal `DataSource` interface allows usage with any API.
21-
- title: 🧱 Shadcn Compatible
22-
details: Built on Radix UI primitives. The rendered output looks and feels like hand-coded Shadcn components.
23-
- title: ⚡️ Lazy Loaded Plugins
24-
details: Heavy components (Monaco, Recharts) are loaded only when rendered, keeping your bundle ultra-light.
17+
- title: 🎨 The Stack You Love
18+
details: Built on React, Radix primitives (Shadcn), and native Tailwind CSS. Not a black box—override styles with utility classes. No hidden CSS modules. Just pure, modern frontend tech.
19+
- title: ⚡️ Server-Driven Agility
20+
details: Update layouts, fields, and validation rules instantly from your backend—no frontend redeployment needed. Change a form in production? Just update the JSON. The UI adapts in real-time.
21+
- title: 🏢 Enterprise Ready-Made
22+
details: Built-in support for complex patterns like Kanbans, Gantt charts, multi-step forms, and data tables with sorting/filtering. Stop rebuilding the same components from scratch.
2523
---
2624

27-
# The Shift to Schema-Driven UI
25+
# You Define the Intent. We Render the Reality.
2826

29-
Object UI decouples the **Protocol** (JSON Schema) from the **Implementation** (React Components), allowing you to build complex enterprise apps faster without sacrificing control.
27+
Frontend development for enterprise apps is repetitive. You spend 80% of your time gluing together form libraries, data tables, and validation logic—writing the same boilerplate over and over.
3028

31-
## How it works
29+
**ObjectUI turns UI into Data.** Define your interface in standard JSON, and let our engine render pixel-perfect, accessible React + Tailwind components.
3230

33-
### 1. Define Protocol (JSON)
34-
You define the *what*, not the *how*. Standard Tailwind classes apply directly.
31+
---
32+
33+
## The Magic Trick: JSON → Beautiful UI
34+
35+
ObjectUI bridges the gap between configuration speed and design quality. Here's how:
36+
37+
### Input: The Protocol (JSON Schema)
38+
39+
You define **what** you want, not **how** to build it. Standard Tailwind classes work natively.
3540

3641
```json
3742
{
38-
"type": "form",
39-
"className": "space-y-4 border p-4 rounded-lg",
40-
"fields": [
43+
"type": "data-table",
44+
"className": "rounded-lg border",
45+
"dataSource": {
46+
"api": "/api/users",
47+
"method": "GET"
48+
},
49+
"columns": [
50+
{
51+
"key": "name",
52+
"title": "User Name",
53+
"sortable": true
54+
},
55+
{
56+
"key": "email",
57+
"title": "Email Address"
58+
},
4159
{
42-
"type": "input",
43-
"name": "email",
44-
"label": "Email Address",
45-
"className": "bg-slate-50"
60+
"key": "status",
61+
"title": "Status",
62+
"render": "badge"
63+
}
64+
],
65+
"actions": [
66+
{
67+
"label": "Edit",
68+
"type": "button",
69+
"variant": "outline",
70+
"onClick": {
71+
"action": "navigate",
72+
"target": "/users/${row.id}/edit"
73+
}
4674
}
4775
]
4876
}
4977
```
5078

51-
### 2. Render Component (React)
52-
The engine transforms generic JSON into polished **Shadcn UI** components.
79+
### Output: Production-Ready Shadcn Component
80+
81+
The engine transforms your JSON into a **fully interactive, accessible data table** with:
82+
83+
- ✅ Server-side data fetching
84+
- ✅ Column sorting and filtering
85+
- ✅ Action buttons with dynamic routing
86+
- ✅ Responsive design (mobile-friendly)
87+
- ✅ Light/dark theme support
88+
- ✅ WCAG 2.1 AA accessibility
89+
90+
**All rendered using the same Shadcn UI primitives you'd hand-code**, but configured in seconds instead of hours.
91+
92+
---
93+
94+
## Why ObjectUI?
95+
96+
### 1. The Stack You Love 🎨
97+
98+
ObjectUI is **not a proprietary framework**. It's built on the modern frontend stack you already know and trust:
99+
100+
- **React 18+** with hooks and concurrent rendering
101+
- **Radix UI primitives** (the foundation of Shadcn)
102+
- **Tailwind CSS** for styling—use utility classes directly in your JSON
103+
- **TypeScript-first** with complete type definitions
104+
105+
**You're not locked into a black box.** Every component ObjectUI renders looks and behaves like hand-coded Shadcn UI. You can:
106+
107+
- Override styles using `className` with Tailwind utilities
108+
- Inspect the rendered DOM—it's just clean React + Radix
109+
- Mix ObjectUI with your existing React codebase seamlessly
110+
111+
### 2. Server-Driven Agility ⚡️
112+
113+
In traditional frontend development, changing a form field requires:
114+
115+
1. Editing React code
116+
2. Running tests
117+
3. Building the app
118+
4. Deploying to production
119+
120+
With **Server-Driven UI (SDUI)**, the UI is a **configuration**, not code. ObjectUI separates the **protocol** (what to render) from the **implementation** (how to render it).
121+
122+
**The Benefits:**
123+
124+
- **Instant Updates:** Change layouts, fields, or validation rules from your backend—no frontend redeployment
125+
- **A/B Testing:** Serve different UI schemas to different users dynamically
126+
- **Multi-tenant Apps:** Each client gets a customized interface from the same codebase
127+
- **Backend-Driven Validation:** Form rules defined server-side, enforced client-side automatically
128+
129+
**Example:** Your backend returns a JSON schema. The UI adapts instantly.
130+
131+
```typescript
132+
// Backend returns this JSON
133+
const schema = await fetch('/api/dashboard/schema').then(r => r.json());
134+
135+
// React renders it
136+
<SchemaRenderer schema={schema} />
137+
```
138+
139+
Change the schema on the backend? The dashboard updates in production—**no code push required.**
140+
141+
### 3. Enterprise Ready-Made 🏢
142+
143+
Stop rebuilding the same complex components from scratch. ObjectUI includes production-ready patterns for:
144+
145+
- **📊 Data Tables** with sorting, filtering, pagination, and bulk actions
146+
- **📋 Multi-step Forms** with validation, conditional fields, and auto-save
147+
- **🗂️ Kanban Boards** with drag-and-drop and swimlanes
148+
- **📅 Gantt Charts** for project planning
149+
- **📈 Dashboards** with metrics, charts, and real-time updates
150+
- **🔍 Advanced Filters** with dynamic operators and query builders
151+
152+
All components are:
153+
154+
- **Accessible** (WCAG 2.1 AA compliant)
155+
- **Responsive** (mobile-first design)
156+
- **Themeable** (light/dark mode built-in)
157+
- **Performant** (lazy-loaded, tree-shakable)
158+
159+
---
160+
161+
## How It Works: The Architecture
162+
163+
ObjectUI follows a clean, three-layer architecture:
164+
165+
### Step 1: The Protocol (JSON Schema)
166+
167+
You define the UI structure using a **standard JSON protocol**. This is the **source of truth** for your interface.
168+
169+
```json
170+
{
171+
"type": "page",
172+
"title": "User Dashboard",
173+
"body": {
174+
"type": "grid",
175+
"columns": 3,
176+
"items": [...]
177+
}
178+
}
179+
```
180+
181+
The protocol is **backend-agnostic**. Serve it from REST, GraphQL, or even static files.
182+
183+
### Step 2: The Engine (@object-ui/core)
184+
185+
The **core engine** processes the schema:
186+
187+
- **Validates** the JSON structure
188+
- **Resolves** expressions like `visible: "${user.role === 'admin'}"`
189+
- **Manages** component state and data flow
190+
- **Registers** custom components
191+
192+
**Zero React dependencies.** The core is pure TypeScript logic—fully testable, fully portable.
193+
194+
### Step 3: The Renderer (@object-ui/react)
195+
196+
The **React runtime** maps JSON nodes to Shadcn components:
197+
198+
```typescript
199+
import { SchemaRenderer } from '@object-ui/react';
200+
201+
<SchemaRenderer schema={schema} data={data} />
202+
```
203+
204+
Under the hood, ObjectUI uses the **component registry** to find the right React component for each schema type (e.g., `"type": "data-table"` → `<DataTable />`).
205+
206+
The rendered output is **indistinguishable** from hand-coded Shadcn UI.
207+
208+
---
209+
210+
## Not Just a Toy: Extensibility
211+
212+
**Worried about being locked in?** Don't be.
213+
214+
ObjectUI is designed for **professional developers** who need flexibility. You can:
215+
216+
### Register Custom React Components
217+
218+
Have a specialized component your design system requires? Register it into the engine and use it in your JSON schemas.
219+
220+
```typescript
221+
import { registerRenderer } from '@object-ui/core';
222+
import { MyCustomWidget } from './components/MyCustomWidget';
223+
224+
// Register your custom component
225+
registerRenderer('custom-widget', MyCustomWidget);
226+
```
227+
228+
Now use it in your schema:
229+
230+
```json
231+
{
232+
"type": "custom-widget",
233+
"className": "my-custom-class",
234+
"props": {
235+
"customProp": "value"
236+
}
237+
}
238+
```
239+
240+
**You're not limited to the built-in component set.** ObjectUI is a **rendering engine**, not a walled garden.
241+
242+
### Override Built-in Components
243+
244+
Don't like the default `Button` component? Replace it:
245+
246+
```typescript
247+
import { registerRenderer } from '@object-ui/core';
248+
import { MyCustomButton } from './components/MyCustomButton';
249+
250+
// Override the built-in button
251+
registerRenderer('button', MyCustomButton);
252+
```
253+
254+
All schemas using `"type": "button"` will now render **your** component.
255+
256+
### Mix with Existing React Code
257+
258+
ObjectUI components are **just React components**. Use them alongside your existing codebase:
53259

54260
```tsx
55-
<div className="space-y-4 border p-4 rounded-lg">
56-
<div className="flex flex-col gap-2 bg-slate-50">
57-
<Label>Email Address</Label>
58-
<Input name="email" />
59-
</div>
60-
</div>
261+
function MyPage() {
262+
return (
263+
<div>
264+
<MyExistingHeader />
265+
<SchemaRenderer schema={formSchema} />
266+
<MyExistingFooter />
267+
</div>
268+
);
269+
}
61270
```
271+
272+
**No migration required.** Adopt ObjectUI incrementally, one component at a time.
273+
274+
---
275+
276+
## Part of the ObjectStack Ecosystem
277+
278+
ObjectUI is the **official UI renderer** for the ObjectStack ecosystem, but it's **backend-agnostic** and works with any REST API.
279+
280+
### Standalone Usage
281+
282+
Connect ObjectUI to **any backend**:
283+
284+
- REST APIs (with the universal `DataSource` interface)
285+
- GraphQL endpoints
286+
- Firebase, Supabase, or custom backends
287+
- Static JSON files for prototyping
288+
289+
### Perfect Pair with ObjectQL
290+
291+
For an **end-to-end protocol-driven experience**, pair ObjectUI with [**ObjectQL**](https://github.com/objectstack-ai/objectql):
292+
293+
- **ObjectQL** handles your backend: type-safe APIs from YAML schemas
294+
- **ObjectUI** handles your frontend: beautiful UIs from JSON schemas
295+
296+
Together, they enable **full-stack development at configuration speed**—without sacrificing the control and quality of hand-written code.
297+
298+
**Learn more:** [ObjectQL Integration Guide](/integration/objectql)
299+
300+
---
301+
302+
## Ready to Build Faster?
303+
304+
Stop writing repetitive UI code. Start building with ObjectUI.
305+
306+
<div style="display: flex; gap: 1rem; margin-top: 2rem;">
307+
<a href="/protocol/overview" style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">Read the Spec</a>
308+
<a href="/components/" style="padding: 0.75rem 1.5rem; border: 1px solid #3b82f6; color: #3b82f6; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">View Component Gallery</a>
309+
<a href="/guide/quick-start" style="padding: 0.75rem 1.5rem; border: 1px solid #6b7280; color: #6b7280; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">Quick Start →</a>
310+
</div>

0 commit comments

Comments
 (0)