React BlockNote First is a recommendation for how to revibe Federated Wiki when working with modern Agentic Workflows and Sourcegraph Amp.
Instead of starting with a minimal Web Components client and hand rolling a block editor, this strategy says we should first build a React single page application that uses BlockNote for editing, then later derive a lighter web component SPA once we understand the right editor shape.
The key is to keep the classic JSON Page Format and HTTP endpoints unchanged, so both old and new clients can coexist.
# Phase A Reverse Engineering Phase A is about reverse engineering the existing Fedwiki client and server and standing up a new React SPA. In this phase Amp is pointed at the Fedwiki repositories to discover where pages are loaded, rendered, edited and saved. At the same time a new React app is created that: - Fetches and saves pages via the existing JSON endpoints. - Uses BlockNote as the internal `Block[]` document model. - Implements a clear adapter between `story[]` and BlockNote blocks. From the server’s point of view nothing changes; it still sees the same `title`, `story[]` and `journal[]` structures on disk and over HTTP.
# Adapter As The Boundary The adapter becomes the key boundary between the old world and the new editor. It provides two functions: - `storyToBlocks` converts Fedwiki `story[]` items into BlockNote blocks with stable ids, types and props. - `blocksToStory` converts BlockNote’s block tree back into `story[]` items ready to be written as JSON files. Agents work against this adapter boundary, writing tests and small refactors to keep JSON diffs minimal and preserving plugin item shapes. The adapter makes it easy to later swap or supplement the editor without changing the server.
# Phase B Lighter SPA Later Once the React BlockNote client is stable and we understand the real editor patterns we need, we can consider a lighter web component SPA as a second phase. In Phase B Amp can be asked to synthesise a minimal `<fw-app>` built from custom elements that implements just the subset of behaviour the community actually uses. This new SPA still reads and writes the same JSON format and can even reuse the same `storyToBlocks` and `blocksToStory` semantics, but with a hand built block model tuned for simplicity. In this way the web component client becomes a downstream product of the richer React client, not an attempt to design everything from nothing.
# Incremental Vibe Coding React plus BlockNote also makes incremental Vibe Coding easier. Adding features like block gutters, selection tools, AI sidebars or new MCP tools is mostly a matter of small React component changes and calls into BlockNote’s command API. Agents can safely localise diffs to a few files instead of patching low level DOM and `contenteditable` logic spread across multiple custom elements. Over time the React client becomes a rich playground where new features are vibed into existence and then, if they prove valuable, backported or simplified for the lighter SPA.
# Agent Friendly Data BlockNote gives us a clean, agent friendly block tree: - Each block has `id`, `type`, `props`, `content` and optional `children`. - The entire document is plain JSON, easy to diff and annotate. Agents can operate directly on this block JSON, or on the Fedwiki JSON via the adapter, depending on the task. This makes it straightforward to build tools that summarise pages, restructure content, or migrate blocks while still respecting the JSON Page Format and existing federation.
# Tradeoffs React BlockNote First is not the smallest or purest approach. It brings in React, a heavier editor core and a more complex build setup than a simple web component bundle. However it significantly reduces the amount of low level editing code that humans and agents need to write, and it aligns strongly with how current LLM based agents reason about front end code. The lighter web component SPA stays in the plan, but as a later product once the React client has stabilised the design.
# Recommendation The recommendation is: - Use a React SPA with BlockNote as the **primary revibed Fedwiki client** in the near term. - Keep the Fedwiki server and JSON format unchanged behind a clear adapter boundary. - Lean on Sourcegraph Amp and other agents to reverse engineer the old client, build the adapter and vibe code new features. - Once the patterns and behaviours are well understood, invite agents to derive a lighter Web Components SPA from the React codebase. This React BlockNote First path gives the best combination of agent leverage, JSON compatibility and future flexibility.