Skip to main content

What is an editor?

You've seen how documents store their history as operations, and how reducers produce the next state from each action. But none of that matters to a user until something renders on screen. That's the editor's job — and only that.

An editor is a React component, nothing more

An editor is a React component bound to one document type. It receives two things: the current document state, and a way to dispatch actions. Everything else — running reducers, persisting operations, syncing across peers — is handled by the Reactor. The editor doesn't know any of that exists.

When a user opens a document in Connect, the host looks up which editor is registered for that document type and mounts it. If no editor is registered, there's no UI. That registration step is what links a visual component to a document model.

One model can have more than one editor. A budget document might have a simple viewer and a full spreadsheet-style editor. Both are separate React components registered against the same model.

The dividing line: editors vs reducers

This is worth being explicit about, because it's easy to blur:

JobBelongs in
Rendering state on screenEditor
Dispatching an action when the user clicksEditor
Showing a toast notificationEditor
Computing the next state from an actionReducer
Validating that a field is non-emptyReducer
Generating the new document historyReducer

The pattern is simple: reducers are , editors are impure. Reducers have no access to the DOM, the network, or the clock. Editors can do all of those things freely — because they're just React components.

The editor dispatches. The reducer computes. Never the other way around.

QuizA user types a new title for a document and hits Save. Which part of the stack is responsible for each job?

Registration: how Connect finds your editor

An editor isn't just a component — it's a component paired with metadata that says which document type it handles. That pairing is called an , and it lives in editors/editors.ts. Connect reads this registry at startup to know which UI to mount for each document type.

The registration is generated for you during the codegen phase — you don't write it by hand. But it's worth knowing it exists, because a missing registration is the most common reason an editor doesn't appear in Connect.