Documentation
How to use DocuEdit
Everything the editor can do, where to find it, and how to run it yourself.
Getting started
Open the editor and start typing. There’s no account and nothing to install.
Your document saves automatically in this browser about a second after you stop typing. It isn’t uploaded anywhere, so it stays on this device and in this browser only. Clearing your browsing data deletes it, so export a copy of anything you want to keep.
To start over, use the Clear content button at the end of the toolbar. It clears the document, header and footer, and the message that appears has an Undo button.
Writing and formatting
The toolbar covers the formatting you’d expect from a word processor:
- Paragraph styles and headings (H1–H4), which also build the Contents sidebar.
- Bold, italic, underline, superscript and subscript.
- Font family, font size, line spacing and alignment.
- Text color and highlight color.
- Links, block quotes, inline code and code blocks.
- Indent and outdent, and the format painter to copy formatting.
Use Tools → Search to find and replace text.
Pages and layout
The document is laid out on A4 pages. Text moves to the next page automatically when a page is full, and nothing runs into the margins, header or footer.
- Page break: Insert → Page Break. Everything after the break starts on a new page.
- Margins: drag the blue markers on the ruler for the left and right margins, or use File → Page Setup to set all four in inches.
- Header and footer: Insert → Header or Insert → Footer. Click a header or footer to edit it; the change appears on every page. Press Esc to return to the document.
- Page numbers: Insert → Page Numbers, then pick top or bottom and left, center or right.
Lists
Start a bulleted or numbered list from the toolbar. Press Tab to move an item one level in and Shift+Tab to move it back out. Markers change automatically by level (● ○ ■ and 1. a. i.).
- Bullet and numbering styles: the arrow next to each list button opens a library of markers, such as squares, arrows, check marks, letters or Roman numerals.
- Multilevel lists: the multilevel button applies a style to the whole list, such as 1. a. i., I. A. 1., or legal numbering (1. 1.1. 1.1.1.).
Equations
Choose Insert → Equation or the Σ button. Type LaTeX, or build the equation from the structure, symbol and example buttons; a live preview shows the result. Press Ctrl+Enter to insert.
Choose Inline to place the equation within a sentence, or Display to give it its own centered line. Click an equation in the document to edit or delete it.
\frac{a}{b} fraction
x^{2} x_{i} superscript, subscript
\sqrt{x} square root
\sum_{i=1}^{n} sum
\int_{a}^{b} integralTables, images and contents
- Tables: Insert → Insert Table. Use Tools → Table to add or remove rows and columns, merge or split cells, and toggle header rows. Drag column borders to resize.
- Images: Insert → Image, or paste or drag an image into the page. Drag the handles to resize.
- Table of contents: Insert → Table of Contents adds a clickable list of your headings to the document. The Contents sidebar shows the same headings.
Exporting
Everything is in the File menu:
| Format | What you get |
|---|---|
| A4 pages exactly as on screen, including headers, footers and page numbers. | |
| Word | An editable .doc file with your margins, page breaks, headers, footers and equations. |
| Markdown | Headings, lists (including nested ones), links and equations as $…$. |
| Text | Plain text only. |
Keyboard shortcuts
On a Mac, use Cmd instead of Ctrl.
| Ctrl+B | Bold |
| Ctrl+I | Italic |
| Ctrl+U | Underline |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| Ctrl+Shift+8 | Bulleted list |
| Ctrl+Shift+7 | Numbered list |
| Tab | Indent a list item |
| Shift+Tab | Outdent a list item |
| Esc | Leave the header or footer |
| Ctrl+Shift+F | Turn focus mode on or off |
For developers
DocuEdit Pro is open source and built with Next.js, React, Tailwind CSS and Tiptap. To run it locally:
npm install
npm run dev # http://localhost:3000
npm test # unit testsThe editor lives in components/editor. Custom Tiptap extensions such as pagination, page breaks, list styles and equations are registered in the extension list in rich-editor.tsx. Add your own extension there to enable it.
See CONTRIBUTING.md before opening a pull request.