|
1 | 1 | --- |
2 | 2 | title: "You Define the Intent. We Render the Reality." |
3 | 3 | description: "ObjectUI - The Universal Schema-Driven UI Engine for React" |
4 | | -layout: home |
5 | | - |
6 | | -hero: |
7 | | - name: ObjectUI |
8 | | - text: Stop Hand-Coding Enterprise UIs |
9 | | - 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. |
10 | | - actions: |
11 | | - - theme: brand |
12 | | - text: Get Started |
13 | | - link: /docs/guide/quick-start |
14 | | - - theme: alt |
15 | | - text: View Components |
16 | | - link: /docs/components/ |
17 | | - - theme: alt |
18 | | - text: Read Docs |
19 | | - link: /docs/guide/ |
20 | | - |
21 | | -features: |
22 | | - - title: 🎨 The Stack You Love |
23 | | - 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. |
24 | | - - title: ⚡️ Server-Driven Agility |
25 | | - 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. |
26 | | - - title: 🏢 Enterprise Ready-Made |
27 | | - 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. |
28 | | ---- |
29 | | - |
30 | | -## Quick Links |
31 | | - |
32 | | -### For Users |
33 | | -- 📖 [**Quick Start**](/docs/guide/quick-start) - Get started in 5 minutes |
34 | | -- 📦 [**Installation**](/docs/guide/installation) - Setup instructions |
35 | | -- 🧩 [**Components**](/docs/components/) - Component library reference |
36 | | - |
37 | | -### For Developers |
38 | | -- 🤝 [**Contributing Guide**](/docs/community/contributing) - How to contribute |
39 | | -- 📚 [**Architecture**](/docs/architecture/architecture) - Technical architecture |
40 | | -- 🔧 [**API Reference**](/docs/reference/api/core) - Complete API docs |
41 | | -- 🗺️ [**Roadmap**](/docs/community/roadmap) - Upcoming features |
42 | | - |
43 | | -### Need Help? |
44 | | -- ❓ [**FAQ**](/docs/faq) - Frequently asked questions |
45 | | -- 🔧 [**Troubleshooting**](/docs/troubleshooting) - Common issues and solutions |
46 | | -- 🔒 [**Security**](/docs/security) - Security best practices |
47 | | -- 💬 [**Discussions**](https://github.com/objectstack-ai/objectui/discussions) - Ask questions |
48 | | - |
49 | 4 | --- |
50 | 5 |
|
51 | 6 | ## What is ObjectUI? |
@@ -121,124 +76,3 @@ Stop rebuilding components from scratch. ObjectUI includes: |
121 | 76 | - 🗂️ **Kanban Boards** with drag-and-drop |
122 | 77 | - 📈 **Dashboards** with real-time updates |
123 | 78 | - All components are accessible, responsive, and themeable |
124 | | - |
125 | | ---- |
126 | | - |
127 | | -## Getting Started |
128 | | - |
129 | | -Choose your path: |
130 | | - |
131 | | -### Option A: CLI (Fastest) |
132 | | - |
133 | | -Perfect for building dashboards and admin panels without writing React code: |
134 | | - |
135 | | -```bash |
136 | | -# Install CLI |
137 | | -npm install -g @object-ui/cli |
138 | | - |
139 | | -# Create new app |
140 | | -objectui init my-admin |
141 | | - |
142 | | -# Start development server |
143 | | -cd my-admin |
144 | | -objectui dev |
145 | | -``` |
146 | | - |
147 | | -[**📖 CLI Guide →**](/docs/guide/cli/getting-started) |
148 | | - |
149 | | -### Option B: React Library |
150 | | - |
151 | | -Integrate ObjectUI into an existing React project: |
152 | | - |
153 | | -```bash |
154 | | -# Install packages |
155 | | -pnpm add @object-ui/react @object-ui/components |
156 | | -``` |
157 | | - |
158 | | -```tsx |
159 | | -import { SchemaRenderer } from '@object-ui/react'; |
160 | | -import { registerDefaultRenderers } from '@object-ui/components'; |
161 | | - |
162 | | -registerDefaultRenderers(); |
163 | | - |
164 | | -function App() { |
165 | | - const schema = { |
166 | | - type: "page", |
167 | | - title: "Dashboard", |
168 | | - body: { /* ... */ } |
169 | | - }; |
170 | | - |
171 | | - return <SchemaRenderer schema={schema} />; |
172 | | -} |
173 | | -``` |
174 | | - |
175 | | -[**📖 Installation Guide →**](/docs/guide/installation) |
176 | | - |
177 | | ---- |
178 | | - |
179 | | -## Documentation Structure |
180 | | - |
181 | | -### 📘 Getting Started |
182 | | -Start here if you're new to ObjectUI |
183 | | -- [Quick Start](/docs/guide/quick-start) |
184 | | -- [Installation](/docs/guide/installation) |
185 | | - |
186 | | -### 🧩 Components |
187 | | -Browse all available components |
188 | | -- [Component Gallery](/docs/components/) |
189 | | -- [Form Components](/docs/components/form/) |
190 | | -- [Layout Components](/docs/components/layout/) |
191 | | - |
192 | | -### 💡 Core Concepts |
193 | | -Understand how ObjectUI works |
194 | | -- [Schema Rendering](/docs/concepts/schema-rendering) |
195 | | -- [Expressions](/docs/concepts/expressions) |
196 | | -- [Data Sources](/docs/concepts/data-source) |
197 | | - |
198 | | -### 🔌 Plugins |
199 | | -Extend ObjectUI with plugins |
200 | | -- [Plugin System](/docs/concepts/plugins) |
201 | | -- [Charts Plugin](/docs/plugins/plugin-charts) |
202 | | -- [Kanban Plugin](/docs/plugins/plugin-kanban) |
203 | | - |
204 | | -### 📚 Reference |
205 | | -Detailed API documentation |
206 | | -- [Core API](/docs/reference/api/core) |
207 | | -- [React API](/docs/reference/api/react) |
208 | | -- [Protocol Specifications](/docs/reference/protocol/overview) |
209 | | - |
210 | | -### 🏗️ Architecture |
211 | | -For contributors and advanced users |
212 | | -- [System Architecture](/docs/architecture/architecture) |
213 | | -- [Project Structure](/docs/architecture/project-structure) |
214 | | -- [Component Specs](/docs/architecture/component) |
215 | | - |
216 | | -### 🌐 Ecosystem |
217 | | -Integration and deployment |
218 | | -- [ObjectQL Integration](/docs/ecosystem/objectql) |
219 | | -- [API Integration](/docs/ecosystem/api) |
220 | | - |
221 | | -### 🆘 Support |
222 | | -Get help when you need it |
223 | | -- [FAQ](/docs/faq) - Common questions |
224 | | -- [Troubleshooting](/docs/troubleshooting) - Problem solving |
225 | | -- [Security](/docs/security) - Security best practices |
226 | | -- [Migration](/docs/migration/from-objectstack) - Migration guides |
227 | | - |
228 | | -### 🤝 Community |
229 | | -Contribute and collaborate |
230 | | -- [Contributing](/docs/community/contributing) |
231 | | -- [Roadmap](/docs/community/roadmap) |
232 | | -- [Best Practices](/docs/community/best-practices) |
233 | | - |
234 | | ---- |
235 | | - |
236 | | -## Ready to Build Faster? |
237 | | - |
238 | | -Stop writing repetitive UI code. Start building with ObjectUI. |
239 | | - |
240 | | -<div style="display: flex; gap: 1rem; margin-top: 2rem;"> |
241 | | - <a href="/docs/guide/quick-start" style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">Get Started →</a> |
242 | | - <a href="/docs/components/" style="padding: 0.75rem 1.5rem; border: 1px solid #3b82f6; color: #3b82f6; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">View Components</a> |
243 | | -</div> |
244 | | - |
0 commit comments