How do you let someone format a note and open it again?
Start with the formatting the note needs. Choose what your app will save, then close and reopen the note to check that the words and formatting come back together.
Which formatting should a first notes screen offer?
Try a heading, two list items and a link. Add another control when you know what a reader or writer needs it for. A smaller toolbar gives you fewer features to carry into a future edit or export.
A rich text editor lets people format writing while they see the result. Your app still decides whose note it is, where to keep it and what to show when saving fails.
What should come back when the note reopens?
Keep a complete copy in the format your editor can reopen. Structured data describes parts such as headings and list items. HTML marks up those parts for the web. An app may keep one format for editing and produce another for display.
Check both the editing view and the view another reader would get. If you expect to switch editors later, compare a sample import while keeping the original.
Have the server check that the submitted note matches the document format you accept. If your viewer displays HTML written by users, clean it with an HTML sanitizer first so it keeps allowed formatting and removes unsafe content.
Compare tools
Scroll the table sideways to read every column.
| Tool | What you add to the appThe editor controls and setup you choose. | What you save to reopenThe format that can keep the whole document. | What to check before moving notesThe formatting and files you need to verify. | What affects costThe library license or hosted plan you need to check. |
|---|---|---|---|---|
| Tiptap | Choose extensions and add controls, using your own or Tiptap’s components. | Save editor JSON or HTML and load it back into the editor. | Keep the original and check that the destination understands the formatting. | MIT-licensed core. Managed features have separate plans. |
| Quill | Configure the toolbar and supported formats. | Save the complete Delta. A single change cannot reopen the whole note. | Export HTML when needed and check what the new editor preserves. | BSD-3-Clause library. Your app supplies storage. |
| TinyMCE | Configure the toolbar and choose cloud or self-hosted delivery. | Store and reload the editor’s HTML. | Preserve referenced uploads and check how the new editor displays them. | Cloud counts editor loads. Self-hosting requires a suitable license configuration. |
| CKEditor | An editor with a toolbar you configure for features such as headings, lists and links. | Save HTML with the app and keep referenced files accessible. | Load a representative note in the destination. Premium Word export sends content to CKEditor’s converter by default. | Self-hosted GPL if eligible. Free commercial hosted option has a monthly editor-load allowance. |
| Lexical | A toolkit with optional editing features. Build the controls and interface your app needs. | Keep a Lexical JSON snapshot and the code for any custom content types. | Check that HTML or Markdown conversion carries the formatting you need. | MIT-licensed library. Budget for building and maintaining the editor and storage. |
| BlockNote | A block editor with a ready-made interface. Choose the interface package for your project. | Save native block JSON and keep linked files accessible. | Check nesting and custom blocks in exported HTML or Markdown. | MPL 2.0 core. Some document exports use separately licensed XL packages. |
| ProseMirror | Editing modules for documents with rules about what content goes where. | Save the document JSON and keep the schema version that understands it. | Map custom sections to the receiving format and bring linked files separately. | MIT-licensed core modules. Plan for building controls and maintaining document rules. |
| Slate | A toolkit to build your own React editor controls and content behavior. | Store the JSON value and load it when the writer returns. | Write conversion rules for custom items and check whether links survive. | MIT-licensed project described as beta. Budget for integration and upgrade checks. |
| Editor.js | A supplied block interface. Add the editing tools for the blocks you want. | Keep block JSON and the configuration keys used to identify each block type. | Map each block type to the destination. Move actual uploaded files separately. | Apache 2.0 core. Check installed tools’ own terms and setup. |
| Milkdown | Use the supplied Crepe interface or assemble an editor from plugins. | Save Markdown and keep referenced files separately. | Check that the destination reads the Markdown features your chosen plugins use. | MIT-licensed packages. Your app owns storage and integration. |
When do notes need more than a saved document?
An image can live in a separate file even when you see it inside a note. Keep the file and check that the people who can read the note can also open that file. If people need to edit together, decide who can change the note and what happens when two edits arrive at once.
Start with a single writer unless working together is part of the task. Ask how shared editing is hosted and whether you can still export the document and its files.
How can you rehearse saving without connecting any app?
Sketch a fictional note named Packing list. Use no real data, account or storage.
- Write the expected noteDraw a heading and two list items. Mark one item bold and give the second item a link.
- Draw the save and reopenSketch a save that puts the complete note in a test record. Start a new page and draw the note loading from that record. Check words and formatting separately.
- Keep a copy for a changeDraw how you would open the note in a separate viewer. If a heading or link disappears, keep the saved original and check the export before switching formats.