DocuSphere’s editor is built on Tiptap and synced in real time through Liveblocks. Every collaborator on a document shares the same live view of the content. The toolbar runs across the top of the editor and gives you quick access to text formatting, lists, images, links, tables, comments, and page layout controls.
Text formatting
These controls change how selected text looks.
Basic marks
| Format | Keyboard shortcut | How to apply |
|---|
| Bold | ⌘B | Select text, click the B button or press the shortcut |
| Italic | ⌘I | Select text, click the I button or press the shortcut |
| Underline | ⌘U | Select text, click the U button or press the shortcut |
| Strikethrough | ⌘S | Select text, click the S̶ button or press the shortcut |
Font family
Click the font name dropdown in the toolbar to switch the typeface for selected text. The following fonts are available:
- Arial
- Times New Roman
- Verdana
- Georgia
- Courier New
Font size
The font size control sits between the heading dropdown and the bold/italic/underline buttons. You can:
- Click the − button to decrease the size by 1.
- Click the + button to increase the size by 1.
- Click the number itself to type a specific size, then press Enter or click away to apply it.
The default size is 16 px.
Text color and highlight
Text color — Click the A button (with a colored underline) to open a color picker. Select any color to apply it to the selected text.
Highlight color — Click the highlighter icon to open a separate color picker for the text background. Highlights support multiple colors in the same document.
Both pickers use the SketchPicker interface, which lets you choose from a spectrum, enter a hex value, or use recent colors.
Click the Remove formatting button (eraser icon) to strip all marks — bold, italic, color, highlight, and so on — from the selected text. This is also available at Format > Clear formatting.
Structure and layout
Headings
Use the heading dropdown (defaults to “Normal text”) to apply a heading level to the current paragraph:
- Normal text
- Heading 1 (32 px)
- Heading 2 (24 px)
- Heading 3 (20 px)
- Heading 4 (18 px)
- Heading 5 (16 px)
Lists
Click the list icon in the toolbar to open the list menu:
- Bullet list — an unordered list with bullet points.
- Ordered list — a numbered list.
Click the same list type again to turn the list off.
Task list
Click the checkbox icon (List Todo) to convert selected lines into a task list. Each item gets a checkbox you can tick to mark it complete. Task list items support nesting.
Text alignment
Click the alignment icon to choose how text is aligned within its paragraph:
- Align Left
- Align Center
- Align Right
- Align Justify
Alignment applies to the whole paragraph, not just a selection.
Line height
Click the line-height icon to set the spacing between lines. The available options are:
| Option | CSS value |
|---|
| Default | normal |
| Single | 1 |
| 1.15 | 1.15 |
| 1.5 | 1.5 |
| Double | 2 |
Undo and redo history is managed by Liveblocks, not the browser. This means all collaborators in a document share the same history — an undo by any user affects the shared document state.
Links
Click the link icon in the toolbar to open a small URL input panel. Type or paste a URL and click Apply to attach it as a hyperlink to the selected text. Re-open the link panel on linked text to edit the URL.
Images
Click the image icon to insert a picture. You have two options:
- Upload — opens a file picker so you can select an image from your device.
- Paste image URL — opens a dialog where you type or paste a direct URL to an image, then click Insert.
Tables
Tables are inserted from the menu bar under Insert > Table. Choose a size from the sub-menu:
Once inserted, tables are resizable — drag column or row borders to adjust dimensions.
Click the comment icon (speech bubble with a plus) to add an inline Liveblocks comment anchored to the selected text. Comments appear as highlights in the document and are visible to all collaborators. Use the Inbox icon in the top-right corner of the editor to view and respond to comment threads.
Page layout
Page ruler
A ruler runs across the top of the document page. It has two blue caret (▼) markers — one for the left margin and one for the right margin — that you drag to set the page width.
- Drag a marker to move that margin inward or outward.
- Double-click a marker to reset that margin to its default position (56 px).
Margin positions are stored in Liveblocks Storage, so all collaborators see the same margins in real time.
Spell check
Click the spell check icon in the toolbar to toggle browser-level spell checking on or off for the document. When enabled, misspelled words are underlined by your browser.
Print
Click the printer icon in the toolbar or use File > Print (⌘P) to open your browser’s print dialog. Margins and page layout are respected in the printed output.