|
19 | 19 |
|
20 | 20 | --- |
21 | 21 |
|
22 | | -## 🎉 What's New (v3.3.x line) |
| 22 | +## What is Object UI? |
23 | 23 |
|
24 | | -**v3.3.0 was the first official release** — all 39 packages under `packages/*` are published to npm. The current published patch is **v3.3.2** and the workspace now consumes **`@objectstack/spec` ^4.0.4** and **`@objectstack/client` ^4.0.4** (the UI sub-export remains backward compatible with the 3.3.x renderer). |
| 24 | +**Object UI is the View layer of the [ObjectStack](https://github.com/objectstack-ai/framework) ecosystem** — a standalone, schema-driven renderer that turns a JSON schema (or ObjectStack metadata) into production-grade React UI. Use it on its own with any backend, like Amis or Formily — or let it render ObjectStack apps end to end. |
25 | 25 |
|
26 | | -> Unreleased work is queued in `.changeset/` and visible in `CHANGELOG.md`'s |
27 | | -> `[Unreleased]` section — see "Recent Highlights" below. |
28 | | -
|
29 | | -### Recent Highlights (post-3.3.2, queued for next release) |
30 | | - |
31 | | -- 📱 **Mobile UX rounds 1 & 2** — kanban readability, calendar default view on phones, timeline marker clipping, list/sidebar/record-detail polish (`apps/console`, `plugin-kanban`, `plugin-calendar`, `plugin-timeline`). |
32 | | -- 🪟 **Manage Views dialog** (`@object-ui/plugin-view`) replaces inline tab drag for view CRUD. |
33 | | -- 🧭 **App-shell view-tab strip** now renders for single-view objects too; broken DropdownMenu propagation fixed. |
34 | | -- ⚡ **View metadata merging + request coalescing** — duplicate `find()` queries from concurrent renderers are deduped. |
35 | | -- 🌐 **Convention-based i18n for sidebars, breadcrumbs, charts, tables, dashboards** — translation packs can localize every label without editing metadata. |
36 | | -- 🛠️ **MetadataProvider lazy loading** — Console no longer fetches the entire `app/object/dashboard/report/page` graph on boot. |
37 | | - |
38 | | -### Highlights |
39 | | - |
40 | | -- 📦 **39 published packages** with complete release metadata, per-package `LICENSE` and `CHANGELOG.md` |
41 | | -- 📚 **Refreshed documentation** across every package README and the [objectui.org docs site](https://www.objectui.org) |
42 | | -- 🏗️ **Thin integration packages** — `@object-ui/app-shell` and `@object-ui/providers` enable third-party integration in ~50KB instead of pulling the full console |
43 | | -- 🔌 **Spec v4 alignment** — plain-string `label` types across Navigation schemas, Protocol bridges updated |
44 | | -- 🧠 **Unified Agent Skill** — `npx skills add objectstack-ai/objectui` installs a consolidated skill (works with Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini, Cline). See [`skills/objectui/`](./skills/objectui/) and [skills.sh](https://skills.sh/objectstack-ai/objectui). |
45 | | - |
46 | | -### Component Namespaces |
47 | | -Organize components into namespaces to prevent naming conflicts: |
48 | | -```typescript |
49 | | -ComponentRegistry.register('button', ButtonComponent, { |
50 | | - namespace: 'ui' // Prevent conflicts across plugins |
51 | | -}); |
52 | 26 | ``` |
53 | | - |
54 | | -### Lazy Field Registration |
55 | | -Load only the fields you need for 30-50% smaller bundles: |
56 | | -```typescript |
57 | | -import { registerField } from '@object-ui/fields'; |
58 | | - |
59 | | -// Only load what you use |
60 | | -registerField('text'); |
61 | | -registerField('number'); |
| 27 | +Describe → ObjectStack the metadata protocol |
| 28 | +Render → Object UI this repo — JSON / metadata → React UI |
| 29 | +Run → ObjectOS the runtime |
62 | 30 | ``` |
63 | 31 |
|
64 | | -### Build Performance |
65 | | -- **3-5x faster CI builds** with Turbo v2 |
66 | | -- **Parallel package builds** with intelligent caching |
67 | | -- **Instant rebuilds** for unchanged packages |
68 | | - |
69 | | -👉 See [CHANGELOG.md](./CHANGELOG.md) for the full 3.3.x release notes and the `[Unreleased]` section. |
70 | | - |
71 | | ---- |
72 | | - |
73 | | -## 🚀 Quick Start (Development Mode) |
74 | | - |
75 | | -Since this package is not yet published to NPM, here is how to play with the source code: |
76 | | - |
77 | | -1. **Clone & Install** |
78 | | - |
79 | | - ```bash |
80 | | - git clone https://github.com/objectstack-ai/objectui.git |
81 | | - cd objectui |
82 | | - pnpm install |
83 | | - # Build the core engine |
84 | | - pnpm build |
85 | | - ``` |
86 | | - |
87 | | -2. **Run the ObjectStack Console** |
88 | | - |
89 | | - Start the unified development console to preview your apps and objects: |
90 | | - |
91 | | - ```bash |
92 | | - pnpm dev |
93 | | - # Opens http://localhost:5173 |
94 | | - ``` |
95 | | - |
96 | | -3. **Try the BYO-Backend Console Example** (New!) |
97 | | - |
98 | | - See how to integrate ObjectUI in your own app: |
99 | | - |
100 | | - ```bash |
101 | | - cd examples/byo-backend-console |
102 | | - pnpm dev |
103 | | - # Opens http://localhost:5174 |
104 | | - ``` |
105 | | - |
106 | | -4. **Edit & Reload** |
107 | | - |
108 | | - Edit the JSON schema files and the changes will be instantly reflected in the browser. |
| 32 | +<p align="center"> |
| 33 | + <img src="docs/screenshots/hero-sdui.png" alt="A kanban JSON schema on the left renders into a live kanban board on the right"> |
| 34 | + <br><sub>A JSON schema in, a production React UI out — no component code.</sub> |
| 35 | +</p> |
| 36 | + |
| 37 | +### See what it renders |
| 38 | + |
| 39 | +One schema, many view types — dashboards, Gantt schedules, kanban boards, calendars — plus visual designers to build them without code. |
| 40 | + |
| 41 | +<p align="center"> |
| 42 | + <img src="docs/screenshots/dashboard.png" width="49%" alt="Dashboard with KPIs and charts"> |
| 43 | + <img src="docs/screenshots/gantt.png" width="49%" alt="Gantt schedule with task bars and milestones"> |
| 44 | +</p> |
| 45 | +<p align="center"> |
| 46 | + <img src="docs/screenshots/kanban.png" width="49%" alt="Kanban board grouped by status"> |
| 47 | + <img src="docs/screenshots/calendar.png" width="49%" alt="Calendar of records by date"> |
| 48 | +</p> |
| 49 | +<p align="center"> |
| 50 | + <img src="docs/screenshots/modeling.png" width="49%" alt="Visual object designer"> |
| 51 | + <img src="docs/screenshots/automation.png" width="49%" alt="Visual flow designer"> |
| 52 | +</p> |
| 53 | +<p align="center"><sub><b>Dashboard, Gantt, Kanban, Calendar</b> rendered from metadata, plus <b>visual designers</b> for objects and flows — all from the plugin packages listed below.</sub></p> |
109 | 54 |
|
110 | 55 | ## Examples |
111 | 56 |
|
@@ -182,38 +127,6 @@ function MyConsole() { |
182 | 127 |
|
183 | 128 | See [examples/byo-backend-console](examples/byo-backend-console) for a complete working example, or [examples/console-starter](examples/console-starter) if you want the full ObjectStack-bound console as a fork-ready template. |
184 | 129 |
|
185 | | -### 🎨 **Beautiful by Default** |
186 | | -- Professional designs using **Tailwind CSS** and **Shadcn/UI** |
187 | | -- Light/dark theme support |
188 | | -- Fully customizable with utility classes |
189 | | -- WCAG 2.1 AA accessible |
190 | | -
|
191 | | -### ⚡ **Blazing Fast** |
192 | | -- **3x faster** page loads than traditional low-code platforms |
193 | | -- **6x smaller** bundle sizes (< 50KB vs 300KB+) |
194 | | -- Built on React 18+ with automatic optimizations |
195 | | -- Tree-shakable architecture |
196 | | -
|
197 | | -### 🚀 **Developer Friendly** |
198 | | -- **TypeScript-first** with complete type definitions |
199 | | -- **Zero learning curve** if you know React |
200 | | -- Works with existing tools and workflows |
201 | | -- Full control - extend or customize anything |
202 | | -
|
203 | | -### 🛠️ **Production Ready** |
204 | | -- 85%+ test coverage |
205 | | -- Enterprise security built-in |
206 | | -- Comprehensive documentation |
207 | | -- Active development and support |
208 | | -
|
209 | | -### 🔥 **Phase 3: Enterprise Data Protocol** (NEW!) |
210 | | -- **Advanced Field Types**: Vector (AI embeddings), Grid (sub-tables), Formula, Summary |
211 | | -- **Query AST Builder**: SQL-like queries with joins, aggregations, subqueries |
212 | | -- **Smart Validation**: 30+ rules, async validation, cross-field dependencies |
213 | | -- **Multi-Datasource**: Health monitoring, connection pooling, query caching |
214 | | -- **40+ Filter Operators**: Date ranges, lookup filters, full-text search |
215 | | -- **Object Inheritance**: Triggers, advanced permissions, metadata caching |
216 | | -
|
217 | 130 | ## Why Object UI? |
218 | 131 |
|
219 | 132 | ### For You as a Developer |
@@ -587,6 +500,7 @@ Object UI is [MIT licensed](./LICENSE). |
587 | 500 | - 📖 [Documentation](https://www.objectui.org) - Comprehensive guides and API reference |
588 | 501 | - 🐛 [Report Issues](https://github.com/objectstack-ai/objectui/issues) - Found a bug? Let us know |
589 | 502 | - 📧 [Email Us](mailto:hello@objectui.org) - Get in touch |
| 503 | +- 🧠 **Agent skill** — `npx skills add objectstack-ai/objectui` installs an Object UI skill for Claude Code, Cursor, Copilot, and more |
590 | 504 |
|
591 | 505 | ## 🙏 Acknowledgments |
592 | 506 |
|
|
0 commit comments