Skip to content

Commit 0a0bc88

Browse files
os-zhuangclaude
andauthored
docs(readme): show what Object UI renders + slim and reposition (#1982)
- Add a "What is Object UI?" section positioning it as the View layer of the ObjectStack ecosystem (describe / render / run); standalone like Amis/Formily - Add a JSON-schema -> rendered-UI hero and a "See what it renders" gallery (dashboard, Gantt, kanban, calendar) + the visual designers — the README had no UI screenshots, only badges - Fix the published-vs-not-published contradiction; drop the duplicate "Quick Start (Development Mode)" (Development Setup covers source) - Remove unverifiable marketing claims and the version-specific "What's New" block - Surface the agent skill (npx skills add) in Community Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 7fe2735 commit 0a0bc88

8 files changed

Lines changed: 28 additions & 114 deletions

File tree

README.md

Lines changed: 28 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -19,93 +19,38 @@
1919

2020
---
2121

22-
## 🎉 What's New (v3.3.x line)
22+
## What is Object UI?
2323

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

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-
});
5226
```
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
6230
```
6331

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>
10954

11055
## Examples
11156

@@ -182,38 +127,6 @@ function MyConsole() {
182127

183128
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.
184129

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-
217130
## Why Object UI?
218131

219132
### For You as a Developer
@@ -587,6 +500,7 @@ Object UI is [MIT licensed](./LICENSE).
587500
- 📖 [Documentation](https://www.objectui.org) - Comprehensive guides and API reference
588501
- 🐛 [Report Issues](https://github.com/objectstack-ai/objectui/issues) - Found a bug? Let us know
589502
- 📧 [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
590504

591505
## 🙏 Acknowledgments
592506

docs/screenshots/automation.png

473 KB
Loading

docs/screenshots/calendar.png

294 KB
Loading

docs/screenshots/dashboard.png

430 KB
Loading

docs/screenshots/gantt.png

310 KB
Loading

docs/screenshots/hero-sdui.png

256 KB
Loading

docs/screenshots/kanban.png

340 KB
Loading

docs/screenshots/modeling.png

395 KB
Loading

0 commit comments

Comments
 (0)