Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 13 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,34 +54,29 @@ One schema, many view types — dashboards, Gantt schedules, kanban boards, cale

## Examples

ObjectStack examples that demonstrate different features and use cases:
Everything under [`examples/`](examples) — in learning order. The
[examples catalog](examples/README.md) has the full "which one should I use?" table.

- **[examples/crm](examples/crm)** - Full-featured CRM application with dashboards, multiple views (Grid, Kanban, Map, Gantt), and custom server implementation.
- **[examples/todo](examples/todo)** - Simple task management app demonstrating basic ObjectStack configuration and field types.
- **[examples/kitchen-sink](examples/kitchen-sink)** - Comprehensive component catalog showing all available field types, dashboard widgets, and view types.
- **[examples/msw-todo](examples/msw-todo)** - Frontend-first development example using MSW (Mock Service Worker) to run ObjectStack in the browser.
- **[examples/hello-world](examples/hello-world)** - The smallest JSON → UI demo: one `schema.json` (a `Page` holding a `Card` with text and a button) rendered by `<SchemaRenderer>` from a single `App.tsx`. Start here to see how a `type` resolves against the component registry.
- **[examples/byo-backend-console](examples/byo-backend-console)** ⭐ - Minimal custom console in ~100 lines showing third-party integration without full console infrastructure. Uses `@object-ui/app-shell` and `@object-ui/providers` with custom routing and a mock REST adapter (BYO backend).
- **[examples/console-starter](examples/console-starter)** - Opinionated, fork-ready console template with the full plugin set (grid, kanban, dashboard, designer, charts, …) wired up against an ObjectStack backend. Use this as the starting point when you want a complete console rather than a minimal integration.
- **[examples/schema-catalog](examples/schema-catalog)** - Not a runnable app — the canonical JSON schema catalog that is the single source of truth for the schemas shipped elsewhere: the docs site renders them via `<SchemaExample id="…" />`, a smoke test mounts every entry, and AI agents use it as a few-shot corpus.

### Running Examples as API Servers

All examples (except msw-todo) can be run as API servers using `@objectstack/cli`:
### Running an example

```bash
# From the monorepo root
pnpm run serve:crm # Start CRM example on http://localhost:3000
pnpm run serve:todo # Start Todo example on http://localhost:3000
pnpm run serve:kitchen-sink # Start Kitchen Sink example on http://localhost:3000
pnpm install
pnpm -w build

# Or from individual example directories
cd examples/crm
pnpm run serve
# Vite dev server — byo-backend-console or console-starter
cd examples/console-starter
pnpm dev
```

Each server provides:
- GraphQL API endpoint: `http://localhost:3000/graphql`
- REST API endpoints based on object definitions
- Sample data loaded from the configuration manifest
`hello-world` ships no dev server: copy its `App.tsx` and `schema.json` into your own
Vite/Next.js app. `schema-catalog` is a data package — its smoke test mounts every
schema in it (`pnpm --filter @object-ui/example-schema-catalog test`).

## 📦 For React Developers

Expand Down
16 changes: 13 additions & 3 deletions examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,28 @@ Runnable examples that show how to consume ObjectUI in different scenarios. Pick
> - Adding ObjectUI to an existing product / different backend → `byo-backend-console`.
> - Standing up a brand-new ObjectStack console → fork `console-starter`.

### Also under `examples/`

| Directory | What it is |
|---|---|
| [`schema-catalog/`](./schema-catalog) | **Not a runnable app** — a data package (`@object-ui/example-schema-catalog`) holding the canonical JSON schemas consumed by the docs site (`<SchemaExample id="…" />`), by the smoke test that mounts every entry, and by AI agents as a few-shot corpus. See [its README](./schema-catalog/README.md) for how to add one. |

## Running an example

From the monorepo root:
`byo-backend-console` and `console-starter` are Vite apps. From the monorepo root:

```bash
pnpm install
pnpm -w build
cd examples/<name>
cd examples/console-starter # or byo-backend-console
pnpm dev
```

Each example exposes its own dev server port (see its README).
Each exposes its own dev server port (see its README).

The other two directories are not dev servers: `hello-world` is a snippet to drop into
your own Vite/Next.js app, and `schema-catalog` is a data package verified with
`pnpm --filter @object-ui/example-schema-catalog test`.

## Adding a new example

Expand Down