Editor Overview
The clarife editor is a block-based content editor built on Tiptap. Each piece of content - a paragraph, heading, screenshot, code snippet, or table - lives in its own block. You can reorder blocks by dragging, delete them, and mix different content types freely.
Editor Layout
The editor screen consists of three main areas:
| Area | Description |
|---|---|
| Toolbar (top) | Document title, save status indicator, template selector, share/export/video buttons, back navigation |
| Block canvas (center) | The main editing area where you add and arrange content blocks |
| Block controls (left of each block) | Drag handle and delete button, visible on hover |
Available Block Types
clarife supports six block types. Click the + button between blocks or at the bottom of the document to add a new one.
| Block | Description | Shortcut |
|---|---|---|
| Paragraph | Standard text with inline formatting (bold, italic, links) | Default block |
| Heading | Section headers in three levels (H1, H2, H3) | - |
| Code | Syntax-highlighted code snippets with 20 language options | - |
| Table | Structured data in rows and columns | - |
| Screenshot | Images with optional annotations and enhancement | - |
| Divider | Visual separator between sections | - |
Adding Blocks
- Click the add button - Hover between any two blocks to reveal the + button, or scroll to the bottom of the document.
- Choose block type - Select from the block type menu: text, heading, screenshot, code, table, or divider.
- Enter content - Start typing or uploading content depending on the block type.
Reordering Blocks
Every block has a drag handle (the six-dot grip icon) on its left side, visible when you hover over the block. Click and hold the grip, then drag the block to a new position. A colored line indicates where the block will be placed when you release.
Deleting Blocks
Click the trash icon next to the drag handle to remove a block. This action is immediate - there is no confirmation dialog.
⚠️ Warning: Deleting a block cannot be undone. If you accidentally remove content, use your browser's undo shortcut (Cmd+Z / Ctrl+Z) immediately - it may restore the block depending on the operation.
Auto-Save
The editor auto-saves your work as you type. The save status is shown in the top toolbar:
- Saving... - changes are being sent to the server
- Unsaved changes - local edits not yet saved (will save shortly)
- Save failed - an error occurred; check your connection and try again
Templates
Click the Template button in the toolbar to apply a pre-built document structure. Templates insert a set of blocks (headings, text placeholders, screenshot slots) that you can then fill in with your own content.
ℹ️ Info: Applying a template replaces the current document content. Use it on new or empty documents.
Keyboard Shortcuts
| Action | macOS | Windows/Linux |
|---|---|---|
| Bold | Cmd+B | Ctrl+B |
| Italic | Cmd+I | Ctrl+I |
| Undo | Cmd+Z | Ctrl+Z |
| Redo | Cmd+Shift+Z | Ctrl+Shift+Z |
| Paste image | Cmd+V | Ctrl+V |
Next Steps
- Text Blocks - Paragraphs, headings, lists, and dividers.
- Screenshots - Upload, paste, and manage images.
- Annotations - Arrows, shapes, text overlays, and more.
Can I use Markdown syntax in the editor?
The editor supports basic inline Markdown shortcuts - for example, typing **text** converts to bold, *text* to italic, ~~text~~ to strikethrough, and `code` to inline code. The - or * shortcut (bullet list), 1. (ordered list), and ``` (code block) also work. Headings are separate blocks - there is no # shortcut to create them. The editor is primarily a visual block editor, not a raw Markdown editor.
Is there a limit to how many blocks a document can have?
There is no hard limit on the number of blocks. Very large documents (100+ blocks with many screenshots) may affect editor performance and export times.
Can I collaborate with others in real-time?
Real-time collaboration is not currently supported. You can share documents via links and control access with passwords, email gates, or domain allowlists.
Does the editor work on mobile devices?
The editor is optimized for desktop browsers. While it loads on tablets and phones, the full editing experience (drag-and-drop, annotations, enhancer) works best on desktop.