Product sample · Documents
Notewise
A block editor: slash commands, nested blocks, drag reorder, coalesced undo and clean Markdown import/export. The block tree is a real data structure, not contenteditable soup.
8 typesblocks
62tests
0deps
Markdownexport
The problem
Contenteditable is not an editor.
Writing tools live or die on structure. Browsers give you a contenteditable div and a pile of edge cases; everything else, nesting, reordering, undo that feels right, a Markdown round-trip, has to be designed.
Notewise models the document as a tree of typed blocks and renders it, so every operation is explicit and testable.
What we built
A block tree you can test.
- Eight block types with insert, split, merge, move and indent operations over a tree.
- Slash menu with keyboard navigation, drag handles and Tab/Shift-Tab nesting.
- Undo/redo that coalesces typing into steps instead of one character at a time.
- Markdown parser and serializer that round-trip the supported blocks.
Architecture
How it is put together
ui: sidebar · editor · slash menu · markdown panel src/: blocks (tree ops) · markdown codec · history · stats persistence: versioned localStorage tests: tree edits, markdown round-trip, undo semantics
Stack
TypeScriptVanilla JSCSS
Security and money
- Blocks are immutable-ish records addressed by id; operations return a new tree for undo snapshots.
- Typing coalesces on a timer so undo reverses a phrase, not a keystroke.
- Markdown is the export boundary, with unsupported inline emphasis left literal rather than guessed.
- Persistence is versioned so a schema change does not destroy a user's document.
Screens
Product surfaces
Similar work
Building something in this category?
We can walk you through the architecture, the payment integration and the failure cases on a call, including the parts that were hard.