Editor

The collaborative code editor that supports syntax highlighting, markdown editing, image uploads, auto-save, and real-time CRDT sync.

It is built on CodeMirror with Automerge CRDT sync. Multiple people can edit the same file simultaneously with no conflicts, and every change is tracked with provenance.

Code Editing

Syntax Highlighting

The editor supports syntax highlighting for 50+ languages including JavaScript, TypeScript, Python, Go, Rust, Java, C/C++, Ruby, PHP, Swift, Kotlin, and more. Language detection is automatic based on file extension.

Real-Time Collaboration

All editing is collaborative by default:

Remote cursors let you see where other participants are typing, with name labels
Conflict-free sync through Automerge CRDT ensures changes from multiple editors merge automatically
Sub-second latency means changes appear for all participants almost instantly
Auto-save keeps every edit saved automatically to the CRDT. There is no save button.

Tip

Cmd+S is intercepted to prevent the browser's save dialog. The editor auto-saves continuously, so you never need to manually save.

Editor Controls

Control	Description
Line numbers	Toggleable in editor settings
Word wrap	Toggleable in editor settings
Font size	Adjustable in editor settings
Font family	System (Geist Sans), Inter, IBM Plex Sans, Nunito, Open Sans, Lora, Source Serif, Merriweather, JetBrains Mono, Fira Code, and more (styled markdown only)
Line spacing	Compact (1.4), Normal (1.6), Relaxed (1.8), Spacious (2.0) (styled markdown only)
Theme	Auto, light, or dark
Search	Cmd+F to find within a file

Offline Behavior

When the sync connection drops:

The editor switches to read-only mode with a visual indicator
Reconnection happens automatically with exponential backoff (1s to 60s)
A retry button is available for manual reconnection
Browser online/offline events are detected automatically
Changes queue while offline and sync when reconnected

Sync Status

A status indicator shows the current sync state:

Green: synced and up to date
Yellow: changes pending (with count)
Red: offline / disconnected

Markdown Editing

Markdown files (.md, .mdx) get a rich editing experience:

Format Bar

A toolbar appears above the editor with buttons for:

Action	Shortcut	Description
Bold	Cmd+B	Toggle bold text
Italic	Cmd+I	Toggle italic text
Headings		H1 through H6
Bullet list		Unordered list
Numbered list		Ordered list
Link		Insert hyperlink
Inline code		Code span
Code block		Fenced code block
Image		Insert image
Table		Insert table

Styled Preview Mode

Markdown renders with live styling. Headings, lists, code blocks, links, and images are displayed as formatted content while you edit.

Task Lists

Interactive checkboxes in markdown:

- [x] Completed task
- [ ] Pending task

Checkboxes can be toggled directly by clicking.

Tables

When your cursor is inside a markdown table, additional options appear in the format bar:

Insert column left/right
Insert row above/below
Delete column
Delete row

File Linking

There are two ways to link to other files in the workspace:

Standard links: Use regular markdown link syntax like [see auth](src/auth.ts). These are clickable and navigate to the linked file.

Obsidian-style links: Type [[ to open a fuzzy-search autocomplete showing all project files. Select a file to insert a [[path/to/file.md]] reference. These render as clickable pills showing the filename, with the full path visible on hover. If a linked file is later deleted or renamed, the pill turns red with a strikethrough to indicate a broken link.

You can also drag a file from the sidebar into a markdown document to insert a link automatically. Images are inserted as ![filename](path) with inline preview, and other files are inserted as [filename](path).

Decision Embeds

Decisions can be embedded inline in markdown using the syntax:

![DECISION:content_hash]()

These render as interactive decision cards with accept/reject buttons directly in the editor. See Decisions for details.

Comments

Add inline comments to any file:

Select text in the editor.
Press Cmd+Shift+M to add a comment.
Type your comment and press Cmd+Enter to submit.
Press Escape to cancel.

Comments are visible to all participants and persist across sessions. They appear as highlighted marks in the editor with a threaded discussion panel.

Image and File Uploads

Images

Add images to markdown files in three ways:

Paste from clipboard (Cmd+V)
Drag and drop from your file system
File picker via the format bar image button

Supported formats: PNG, JPG, JPEG, GIF, WebP, SVG, ICO. Maximum size: 10 MB.

Images are uploaded to cloud storage (S3) in the background. A local preview appears instantly while the upload completes. The markdown reference is inserted automatically:

![screenshot](images/screenshot.png)

DOCX Files

DOCX files are rendered inline with full formatting preserved, including text styling, images, tables, headers, and lists. A download button is available for the original file.

SVG Files

SVG files are rendered as editable XML with a visual preview. You can edit the raw SVG markup and see the rendered result alongside it.

Video Files

Video files (.mp4, .webm, .mov, .ogg, .m4v) can be played inline. Click the play button to load the video from cloud storage and watch it directly in the editor. A download button is also available.

PDF Files

PDF files are viewable directly in the editor.

Other Binary Files

Unsupported binary formats show a download panel with the file name and size.

Smart Document Caching

The editor keeps documents in memory when you switch between layout modes (Video, Split, Project). This prevents unnecessary reloads and preserves your scroll position and cursor location.