HN Explorer

Show HN: BlockNote – a “Notion-style” block-based text editor (github.com)

15 points by YousefED ↗ HN
Hi HN! BlockNote (demo @ 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

[2] See this HackerNews discussion on Matrix-CRDT: https://news.ycombinator.com/item?id=29978659

[3] https://prosemirror.net/

[4] https://tiptap.dev/

9 comments

[ 1.8 ms ] story [ 32.9 ms ] thread
mhmttosun
I 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
I 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
Toggles 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
Thanks! 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
Hey YousefED, have you looked at what Liveblocks has done in their example here: 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
Hi! 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
This is so freaking beautiful!! Absolutely love the UX and animation effects!!
antidnan
Very cool! Thanks for sharing.

The notion style inline autocomplete dialog is becoming standard for text editors and I love it :)

Rovoska
If this can add notion's "database", but also add the capability for simple graphs, I'd be in love