The demos

• A blog studio and its site

  Drafts beside the row, revisions, scheduled publishing and a page builder, with the public site rendered at build time.

  Try this

  1. 1 · WriteAs Wren, a writer, start a post. It saves as you type; a writer cannot publish.
  2. 2 · PublishSwitch to Edda, an editor, open it and publish it.
  3. 3 · ReadView the site as a visitor: only what was published is there.
  4. 4 · BuildIn Pages, open Home and build it from blocks; publish, then look again.

  Read firstexamples/cms/src/server/server.ts

  • foldkit-cms
  • foldkit-cms-drizzle
  • foldkit-remote
  • foldkit-crud
  • foldkit-form
  • foldkit-builder
  • foldkit-ssr
  Open the demo

• Two devices, one registry

  Two devices edit 10,000 products in a data grid, offline and in conflict, and agree once both are back.

  Try this

  1. 1 · EditChange a price in Device A. It shows in Device B a moment later.
  2. 2 · ConflictTick “Work offline” in Device B, edit the same price in both, then untick it. The later edit wins, and the device that lost says so.
  3. 3 · ReloadReload Device B while it is offline. Its edits are still waiting, and go when it is back.

  Read firstexamples/registry/src/domain.ts

  • foldkit-data-grid
  • foldkit-mixins-data-grid
  • foldkit-remote
  • foldkit-sync
  • foldkit-durable
  Open the demo

• Pages two tabs edit at once

  Rich text two people edit at the same time, online or not, converging through one journal.

  Try this

  1. 1 · ShareOpen the demo in two tabs, and make a page in one: it appears in the other.
  2. 2 · Edit togetherType in the page from both tabs; each sees the other’s typing.
  3. 3 · ReloadReload a tab: the page is read back from the journal.

  Read firstexamples/pages/src/app.ts

  • foldkit-richtext
  • foldkit-richtext-dom
  • foldkit-richtext-markdown
  • foldkit-sync
  • foldkit-durable
  Open the demo

• A todo list an agent can use

  One application definition drives the view, the tools an agent calls, the document replicas share, and the policy the server enforces.

  Try this

  1. 1 · ShareAdd a todo, and open the demo in a second tab: it is there.
  2. 2 · Someone elseOpen it as Bob (add ?token=bob) and tick the todo: the first tab shows it ticked.
  3. 3 · ReloadReload a tab: what it shows is read back from the journal.

  Read firstexamples/todo-app/src/app.ts

  • foldkit-surface
  • foldkit-sync
  • foldkit-durable
  • foldkit-agent
  • foldkit-agent-webmcp
  • foldkit-mixins
  • foldkit-mirror
  Open the demo

• A data grid over 100,000 rows

  A grid that owns focus, selection, columns and the open editor, while the application owns every row.

  Try this

  1. 1 · EditPick a price and press Enter to edit it; one that is not a price, like 4.999, is refused.
  2. 2 · CopySelect a range with Shift and the arrow keys, and copy it into a spreadsheet.
  3. 3 · ArrangeOpen a column’s menu to pin or hide it, or drag its header to move it.

  Read firstexamples/data-grid/src/main.ts

  • foldkit-data-grid
  • foldkit-mixins-data-grid
  • foldkit-bundle
  Open the demo

This page is one too: rendered at build time with foldkit-ssr and styled with foldkit-mixins. Its source.