8 ms·
Show HN: BlockNote – a “Notion-style” block-based text editor
Hi HN! BlockNote (demo @ https://blocknote-main.vercel.app https://blocknote-main.vercel.app) is my shot at creating an extensible, block-based editor (similar to Notion, Coda, etc.). Featuring different block types, animations (try changing block types, indenting, etc), menus, placeholders, collaboration and more you expect from a good editor.
I'm on a journey to build a decentralized, live-programmeable and collaborative block-based editor [1] that syncs over Matrix [2], and unfortunately found that there's still not a great Open Source text editor component on par with something Notion's editor, which is why I got started with this.
BlockNote builds on top of Prosemirror [3] and TipTap [4] (two great libraries to build text editors for the web / work with ContentEditable and its quirks), but these libraries are pretty bare-bones ("headless"). While there's still some ground to cover, I hope BlockNote makes it easier to get a better out-of-the-box UX and am looking forward to your feedback!
[1] Follow along at https://www.typecell.org https://www.typecell.org
[2] See this HackerNews discussion on Matrix-CRDT: https://news.ycombinator.com/item?id=29978659 https://news.ycombinator.com/item?id=29978659
[3] https://prosemirror.net/ https://prosemirror.net/
[4] https://tiptap.dev/ https://tiptap.dev/
- mhmttosun 4y agoI really appreciate your efforts. There are many text editor but most of them lack some features critical for detail writing. Full featured image, video, embed, math, table, symboll support will put BlockNote in a good position.
- adigau31 4y agoI don't think I could ever use a Notion-like product without their database/table feature. I'm addicted to it now. And toggles too. I feel like toggles are a way for detail oriented people to detail everything they feel they should, but at the same time deliver a document that anyone can read haha
- YousefED 4y agoToggles are on the roadmap to add! They are definitely a basic kind of block that should be built-in. Databases/tables are a whole different ball game of course. I’d like to focus on building an open source, reusable text/block editor on par with Notion’s editor, not to build a clone of their entire product :)
- YousefED 4y agoThanks! Agree those components are important. Some of them are already available for the Prosemirror ecosystem, so it should be straightforward to add them. Focus so far for BlockNote has been to get the “block” system right (including nesting, drag and drop, etc) and the basic UX elements (placeholders, menus, etc). Now I think we can continue working on more block types!
- adigau31 4y agoHey YousefED, have you looked at what Liveblocks has done in their example here: https://liveblocks.io/examples/block-text-editor-advanced/nextjs https://liveblocks.io/examples/block-text-editor-advanced/ne... It looks a lot to what you've done, but I really like the collaborative aspect. I see you've used tiptap.dev, do they provide a good multiplayer experience?
- YousefED 4y agoHi! I think the Liveblocks demo is quite impressive as well! It looks pretty smooth. One of the main things I'm missing is the ability to nest (indent) blocks similarly to how Notion / BlockNote allows this. This was quite a bit of work to get right in BlockNote. BlockNote's live collaboration is powered by Yjs, or (y-prosemirror to be exact). Highly recommend checking it out!
- steventey 4y agoThis is so freaking beautiful!! Absolutely love the UX and animation effects!!
- antidnan 4y agoVery cool! Thanks for sharing. The notion style inline autocomplete dialog is becoming standard for text editors and I love it :)
- Rovoska 4y agoIf this can add notion's "database", but also add the capability for simple graphs, I'd be in love