TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: BlockNote – a “Notion-style” block-based text editor

15 pointsby YousefEDover 2 years ago
Hi HN! BlockNote (demo @ <a href="https:&#x2F;&#x2F;blocknote-main.vercel.app" rel="nofollow">https:&#x2F;&#x2F;blocknote-main.vercel.app</a>) 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.<p>I&#x27;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&#x27;s still not a great Open Source text editor component on par with something Notion&#x27;s editor, which is why I got started with this.<p>BlockNote builds on top of Prosemirror [3] and TipTap [4] (two great libraries to build text editors for the web &#x2F; work with ContentEditable and its quirks), but these libraries are pretty bare-bones (&quot;headless&quot;). While there&#x27;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!<p>[1] Follow along at <a href="https:&#x2F;&#x2F;www.typecell.org" rel="nofollow">https:&#x2F;&#x2F;www.typecell.org</a><p>[2] See this HackerNews discussion on Matrix-CRDT: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29978659" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29978659</a><p>[3] <a href="https:&#x2F;&#x2F;prosemirror.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;prosemirror.net&#x2F;</a><p>[4] <a href="https:&#x2F;&#x2F;tiptap.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tiptap.dev&#x2F;</a>

5 comments

adigau31over 2 years ago
Hey YousefED, have you looked at what Liveblocks has done in their example here: <a href="https:&#x2F;&#x2F;liveblocks.io&#x2F;examples&#x2F;block-text-editor-advanced&#x2F;nextjs" rel="nofollow">https:&#x2F;&#x2F;liveblocks.io&#x2F;examples&#x2F;block-text-editor-advanced&#x2F;ne...</a><p>It looks a lot to what you&#x27;ve done, but I really like the collaborative aspect. I see you&#x27;ve used tiptap.dev, do they provide a good multiplayer experience?
评论 #32776594 未加载
mhmttosunover 2 years ago
I really appreciate your efforts. There are many text editor but most of them lack some features critical for detail writing.<p>Full featured image, video, embed, math, table, symboll support will put BlockNote in a good position.
评论 #32766865 未加载
评论 #32765469 未加载
Rovoskaover 2 years ago
If this can add notion&#x27;s &quot;database&quot;, but also add the capability for simple graphs, I&#x27;d be in love
antidnanover 2 years ago
Very cool! Thanks for sharing.<p>The notion style inline autocomplete dialog is becoming standard for text editors and I love it :)
steventeyover 2 years ago
This is so freaking beautiful!! Absolutely love the UX and animation effects!!