Caret’s editor is the product’s beating heart. Built on Tiptap 3 and ProseMirror with Y.js collaboration baked in at the foundation, it delivers a writing surface that feels like a premium digital notebook — minimal chrome, impeccable typography, and an interface that fades away so your words can take center stage. Every layout decision, color token, and animation timing is governed by the Swiss Focus design language: grid-based, content-first, confident without being cold.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/arrozet/caret/llms.txt
Use this file to discover all available pages before exploring further.
Editor Foundation
Caret’s editing engine is a layered stack of best-in-class libraries working in concert:Tiptap 3 & ProseMirror
The editor schema, command API, and extension system. All document mutations — including AI-suggested changes — flow through ProseMirror transactions.
Y.js Collaboration
@tiptap/extension-collaboration, @tiptap/y-tiptap, and y-websocket power real-time multi-user editing via CRDT sync over WebSocket.Routes
| Route | Description |
|---|---|
/documents | Document list — browse, create, and organize documents |
/documents/:id | Editor page — full writing surface for a single document |
MainLayout with AuthGuard.
Swiss Focus Design
The Swiss Focus aesthetic is a rigorous, grid-based, content-first visual language inspired by high-end digital paper. The goal: the UI should disappear so writing can breathe.Typography
Typography is the most visible expression of the Swiss Focus principle. Caret uses two typefaces with strictly separated roles:| Surface | Font | Size | Line Height | Weight |
|---|---|---|---|---|
| Document canvas | Merriweather (serif) | 18px | 1.7 | 400 |
| UI chrome | Inter (sans-serif) | 14–16px | 1.5 | 400–500 |
| Code | Fira Code (monospace) | 14px | 1.6 | 400 |
Layout
The document canvas is deliberately constrained to keep line lengths in the optimal 60–80 character reading range:- 800px document max-width on standard displays
- 900px on wide displays (≥ 1440px)
- 56px fixed top bar height
- 4px base spacing unit throughout the entire layout grid
Color Palette
Caret uses exactly two accent colors. No purple AI identity — AI features share the same orange as the user caret so they feel native, not bolted on.Blue — accent-main
#0066CC (light) / #3B99FC (dark). Primary UI color for buttons, links, and interactive chrome. Reminiscent of trusted document tools but refined.Orange — accent-caret
#FF4500 (light) / #FF6B35 (dark). The signature brand color. Originally just the blinking cursor; now extended to all AI features because AI is the new normal.localStorage as caret-theme and defaults to the user’s system preference (prefers-color-scheme).
Editor UI Components
The editor page assembles several coordinated UI components:EditorToolbar
Full-width formatting bar anchored above the document canvas, centered over the editing area. When the AI panel is open, the toolbar reflows with right padding equal to the panel width to keep it centered over the writing area.
SelectionMenu
Contextual floating menu that appears on text selection, providing quick access to formatting and AI actions.
DocumentTabs
Tab strip managed by the Zustand tabs store, allowing you to hold multiple documents open simultaneously and switch between them without losing your place.
EditorStatusBar
Persistent bottom bar showing live character, word, and paragraph counts alongside the autosave state indicator and collaboration presence strip.
Autosave and Version History
Caret saves your work automatically so you never have to think about it.Edit detection
Every change to the document triggers a debounced save timer (1 second after the last keystroke).
Content snapshot
When the timer fires, the editor exports both
content_json (Tiptap/ProseMirror JSON) and content_text (plain text) and persists them via the Document Service API.Embedding index
After a successful save, the document text is sent to the AI service to update the workspace RAG index — keeping AI context fresh without any manual action.
document_versions table, giving you a full content history for rollback when needed.
Focus Mode
Focus mode is the Swiss Focus principle in action: peripheral chrome fades away so nothing competes with the document itself.- Trigger: 2 seconds after the last cursor movement or scroll activity
- Effect: All peripheral UI elements (toolbars, sidebars, status bar) fade to 20% opacity over a 200ms ease-out transition
- Preserved: The document canvas, the orange caret, and essential editing controls remain fully visible
- Return: Hovering over any peripheral UI element immediately restores full opacity
useFocusMode hook in EditorPage.
Keyboard Shortcuts
AI Ghost Text
The editor supports inline ghost text suggestions from the AI assistant. Ghost suggestions are rendered directly in the document canvas at the current cursor position with muted (text-ghost) coloring and pointer-events: none so they don’t interfere with typing.
Ghost text can be:
- Accepted — the suggestion is applied as a Tiptap transaction and enters the document
- Rejected — the ghost text is dismissed with no change to the document
Internationalization
Caret’s UI is fully translated. The editor surface and all chrome respect the active locale:| Locale | Language |
|---|---|
en-US | English (default) |
es | Spanish |
fr | French |
de | German |
pt | Portuguese |
localStorage as caret-language and auto-detected from the browser locale on first visit. Translations live in locale JSON files under src/locales/.
Accessibility
Accessibility standards
Accessibility standards
Caret targets WCAG AA compliance throughout the editor:
- Contrast: 4.5:1 minimum for normal text, 3:1 for large text
- Focus indicators: 3px ring at
accent-main40% opacity on all interactive controls - Keyboard navigation: all critical actions are reachable without a mouse
- Screen reader support: autosave state and AI streaming regions use
aria-live="polite" - Reduced motion: all decorative animations are gated behind
useReducedMotion() - Reading support: Merriweather’s generous letter-spacing and 1.7 line height benefit users with dyslexia