BlockSuite: An open-source Notion-like editor with multiplayer support | Hacker News Reader

BlockSuite: An open-source Notion-like editor with multiplayer support

blocksuite.affine.pro

243 pointslewisjoe99 comments

Does anyone else feel that the whole entire-canvas-is-editable-by-default approach of Notion and similar tools is an extremely annoying antipattern?

I want to be able to open a document in read-only mode. Otherwise, while just navigating through pages or reading content, it's far too easy to accidentally add text to a block by pressing anything on the keyboard, or move things around with an accidental drag of the mouse.

I've been reprimanded several times for errant edits to company wiki pages because of this...

I think you can lock a page to prevent editing on Notion, but I'm not sure if that's something only the owner of the document can do. A dedicated read-only mode would be useful though.

If the company doesn’t want you editing pages, they should be locking them down. If the pages are left open I feel that it is safe to assume the right to edit. And I’d argue that until my boss absolutely hated me.

https://www.notion.so/help/sharing-and-permissions

It's totally reasonable for an FAQ page that is editable by all developers and intended for everyone to contribute troubleshooting tips.

The problem occurs when someone accidentally drags things around, or has the wrong window open when typing in text and you end up with "ls" and "exit" scattered randomly throughout the doc.

I have never once in my life intentionally dragged text. Unintentionally several times, and each time wondering what kind of deranged person designed this misfeature.

.. okay it’s mostly a misfeature because it’s the exact same input gesture as selecting text, but you have to remember that there is text selected / ensure that no text has been inadvertently selected.

Another case where making the user remember things can cause a problem is hybrid cars, where the driver needs to know the state of the hybrid battery because the responsiveness of the brakes and acceleration change depending on it.

> has the wrong window open when typing in text and you end up with "ls" and "exit" scattered randomly throughout the doc.

the same thing would happen in word/google docs/etc

> If the pages are left open I feel that it is safe to assume the right to edit

Yes, but not accidentally. You should press an [Edit] button which would take you to another URL to edit the page.

First time I had a job that used Confluence as an idle tick i would just tick-untick-tick-untick the checkboxes on documents. I never realised that a) i was actually editing and saving the page, and b) it would send an email to the owner for every single tick/untick edit.

That surprised me when using GitHub too.

that's hilarious, how did you eventually find out?

He ticked off the wrong people.

ROFL

LMAO

I, too, have earned the hate of a few dev teams not understanding the Confluence view of the world. I have bought numerous beers in hopes of patching things over.

No, it's an editor, not a immutable website for consumption. The whole goal of them is that you can switch fast between editing and the rendered result. In that sense they are like word processors. But yes, adding an option for locking the document can be important, and usually they have them. I mean it's not even hard to implement. But probably not something people are mindful about.

I mean, an immutable website for consumption is exactly what most people want. I want to differentiate content editing and content viewing much the same way in software development you edit source code which is then built into an immutable read-only artifact.

Is it really such a foreign concept that people want a dedicated editing-focused mode whose source is published into the final wiki page for viewing? Is this not how basically all tools worked pre-Notion?

> I mean, an immutable website for consumption is exactly what most people want.

Do they? Then export your documents to an immutable website. That's why those options exist. Personally I don't want that. I want to edit my content fast and the hybrid-solution doesn't bother me. So we are talking here about a conflict of interest, not an anti-pattern. And solutions for this already exist, maybe they should just advertised more prominently?

> I want to differentiate content editing and content viewing much the same way in software development you edit source code which is then built into an immutable read-only artifact.

I don't read the compiled artifact, I use it, which is very different from what we are talking here. A more equal example would be reading code on github or reading in a code editor.

Many tools that predate Notion open pages in "edit" mode: Microsoft Word, Apple Pages, Google Docs, Etherpad, Dropbox Paper, TextEdit, Nodepad.exe...

We want to serve people who've used apps like those with their preferred writing experience.

but those required clicking on save to actually make a change.

Microsoft Word no longer does it, at least not for a typical experience - that is, opening a file you sourced from elsewhere (Internet, or your company's Exchange server, or e-mail attachment, or ...). Word, Excel, and PowerPoint will all open the document in "Protected View", indicated by an ugly yellow bar above the document with an [Enable Editing] button in the middle. Sure, it's done for security reasons, but for actual user experience, it's almost equivalent to opening all files in read-only mode by default.

This would be fine except for the fact that all changes are instantly committed in realtime, which is such an incredible usability antipattern.

If Notion had to be everything-editable-by-default, make it so that changes need to be explicitly committed and saved, much the same way one would do with Git. Otherwise it becomes impossible to track down these kinds of accidental mutations to the document, much less even realize that they have occurred.

Also, pointing to existing tools with glaring usability problems is not a justification for creating yet another tool with those same usability problems, amplified.

> I want to differentiate content editing and content viewing much the same way in software development you edit source code which is then built into an immutable read-only artifact.

On that note, I'm increasingly considering making my Emacs open all files read-only by default. When coding, I'm usually viewing many more individual documents than I end up actually editing - and multiple times a day, I end up accidentally typing (and then immediately deleting - muscle memory, this) a character into some file I was reading - and causing a spike in CPU usage, as the Language Server tries to reprocess the change. $deity forbid I do this in a widely-used header file - if I'm not quick with undo, LSP will churn through dozens of translation units before it realizes the edits were reverted.

This is not a big deal - usually just the cooling fans spinning up for a few seconds, and the editor (or whole system) getting slightly less responsive. It's just that the "slightly less responsive" part is really jarring.

Word processors typically a view-only mode (and often a suggest/comment mode as well.)

I find it irritating at times but nowhere near as infuriating as traveling to the top of a large block to click edit. I'd happily accept a less permeable barrier into edit mode (like ctrl-click?) but it needs to still support the instant edits for these apps to be tools primarily instead of document readers.

I'm sure there's a very nice UX convention for this waiting to be discovered through some creative prototyping and user testing.

Spitballing bad ideas somewhere in the ball park of what could be prototyped: - Editing locked by default and locked whenever a clear non editing action occurs. Editing unlocked by right swipe, double click, enter key or something similar. Editing unlocked by looking at the text cursor.

Absolutely. When I’m using Notion I feel like I have to be hyperaware of how I interact with the page as to not unintentionally edit something.

A little editor/reader toggle button would go a long way here.

Most developers think in abstract terms all the time. We can easily see the variables take shape and create our intended reality.

But for a lot of people that never do that, that's hard, the more closer edit mode is to reality to easier it is to understand what it will look like and the less brainpower it takes the creator. But yeah in some cases with notion the difference between read and edit mode is not significantly indicated.

I agree, I think for shared docs easy edit-ability/instant-autosave is an antipattern that encourages less-thoughtful editing and hurts their purpose as a long-term store of knowledge. The places I've worked that have really leaned into that part of Notion (vs just like Notion as a nativeish-app/snappier Wiki) were all overly ADHD in their approach to planning and work in general, too.

There's a certain sort of worker that really leans into that as their version of "easy async collaboration" but is actually just putting the burden on the recipients to make sense of the author's journey and thought process, instead of putting more effort into more-infrequent-but-more-curated updates.

I confess to having never used Notion, but if you want a horrorshow experience with "everyone can edit by default", check out Mural some time.

It seems like there's a lot of recent interest and effort in open-source or self-hosted Notion-like/markdown-with-widgets applications and platforms. AppFlowy (https://github.com/AppFlowy-IO/AppFlowy) comes to mind; I attended one of their monthly "town hall" meetings a few months back, and looks like they're rapidly increasing in popularity. I think there was another similar project like this on HN front page last week, IIRC.

This makes me happy, because I switched to Obsidian primarily for local-first file storage in a platform-agnostic format. I've learned to love many things about Obsidian and am writing a few plugins myself, but there are still several Notion-esq functionalities I wish I had, and I find myself handing off between Obsidian and other webapps for certain effort, like team project management.

I used to get far more excited to explore new projects like BlockSuite, and I really appreciate their documentation, but I find it hard to justify allocating time to reviewing and trying out new tools when I still have much more improve on with my Obsidian usage; this is especially true of newer projects where I'm unsure of their shelf life.

To assuage my internal conflict I remind myself that I think plaintext is fundamentally the right choice for much knowledge collection, and I'm proud to say that if the internet shut down, I'd retain a significant growing fraction of my personal data.

It would be interesting to have your perspective, as an Obsidian user, on Logseq(https://logseq.com/). I say this, as like you - I moved towards this for local-first file storage, where content can be edited on any device with any editor and where I have more control over my data.

I did try obsidian briefly, but eventually gravitated towards Notion for knowledge and project management - but found that the bulk of the content I put into this would eventually go stale/unused simply because content was not linked and would instead be held in a table, within a project/area full of other pages of notes. I then found myself on Logseq for the reasons mentioned prior.

I'm using and enjoying Logseq but I don't think I am getting as much out of backreferences as other people. I try to keep projects under a single page and make additions to that page. I'm curious how you are using it, if you have time to share? I am always hoping to steal some ideas that improve my usage for note tools.

I switched to Logseq from Obsidian and like it a lot. The PDF annotation features and ability to use Org Mode are what won me over.

AppFlowy looks nice. I get a project management tool vice from it. I have been using Zim Desktop Wiki for many years now, for pretty much the same reasons you mention, and I never had the idea "hey I need a kanban board in here". Why would I use AppFlowy for note-taking? What do you use it for?

How does this compare to outline?

https://github.com/outline/outline

Does Outline have mobile apps? The name makes it hard to search and find anything relevant

Sadly they rely on PWA for Android. PWAs work but has their own set of issues.

Setting it up is a little bit complicated.

I wish they have a offline electron app.

I too use Obsidian for my personal things that feel too important to not always have up to date local copies of. It works well. Haven’t yet found anything I’m missing compared to Notion though.

The approach here is a bit novel i.e treat each block as a separate editor instance (contenteditable) and somehow wire-up cursor movements to behave as if it's one big editable area.

But it comes with its downsides as well. For example cross block selection doesn't work.

If the entire page is one big editable area, then it becomes difficult to embed complex blocks like "kanban views" and calendar.

I guess we should think beyond contenteditable at this point and separate rendering layer from input layer[1] - sort of like how Google Docs has built its editor.

But writing a rich text editor is not just a text-editing problem. It essentially needs you to build a layout engine itself (like webkit) that knows how/when to recalculate and draw the affected parts (render objects) when the rich-text changes. Why? because baking in tables and image-wraps and other complex resizable blocks affect other elements around/after it.

Bottomline: we need a custom built layout engine + text renderer + input handler(that respects accessiblity) + selection handler to build an absolutely powerful rich-text editor. I'd like to start a open source project in this direction.

[1] https://twitter.com/jitl/status/1649761057953415174

Notion used this strategy until January 2021, when we rolled over to one-big-ContentEditable. I actually tried the tactic Affine is using, that is implementing drag-to-select gesture yourself and forcing that selection on the browser, but I hit a bunch of roadblocks on iOS and Android that made me abandon it and go with big-ContentEditable.

Curious about the issues you faced on mobile!

At Slite I was part of the mobile team, and the editor is using Slate. So to make it work in React Native we had to go for a WebView (similar to what Notion uses), with all the downside it can bring..

I tickled with the possibilty to do a native adapter of Slate, but the fact that it's based on a content editable, makes it complicated to adapt in React Native..

I have the feeling that block approach might fit better a more native integration on mobile. It seems similar to what Craft does, isn't it ?

Mostly Android input being a hellscape, and wrangling React inside ContentEditable posing weird synchronization challenges with input method editors.

On the flip side, with individual contenteditables, you can be more confident you're not accidentally editing a block you didn't mean to.

Fyi, I'm building an open source block-based editor @ https://www.blocknotejs.org that uses one large contenteditable and doesn't have those downsides you mention. It's built on top of Prosemirror.

Would be interesting to see projects going beyond contenteditable for sure!

Thank you all for your attention to BlockSuite, the comprehensive project behind the amazing AFFiNE open-source notetaking app. BlockSuite aims to provide a progressive solution for building collaborative applications.

It includes a block-based framework for composing rich content editors and an out-of-the-box block editor tailored for the AFFiNE knowledge base. With block-based editing, text editing and state management are handled block-by-block, supported by CRDT technology for distributed collaboration.

BlockSuite also offers framework agnostic rendering for scalability and flexibility. For more information about BlockSuite and the AFFiNE project, we welcome you to visit https://affine.pro/ where you can also try it in action.

I want to test it as an alternative to LogSeq, but mostly just for fun, because with LogSeq I am for the first time truly content with such a tool.

I'm in the same boat, but I'd be thrilled if logseq introduced a "multiplayer" feature. Though a centralized (browser-based) version of logseq would need to be done first, and the project would need some changes. I tried to do this and didn't get far because the File API it uses relies on the server being on localhost.

For now logseq struggles enough with only my changes :-)

The in page add database holds amazing promise, how can I reference a record that I create in the database? Lets say I have a block with a database [User|Title] and I want to refer to a value TasksDb[user=yonz].title. or something.

We had the pleasure of hosting one of the co-founders at our latest local first meetup https://lofi.software, feel free to checkout the recording https://www.youtube.com/live/Z0nzsxhoToo?feature=share The team has put in a lot of background effort to allow for a seamless https://affine.pro app using blocksuite

Wow, I love this. I'm currently building an open source editor that has a lot of overlap with BlockSuite[1]. In Chisel, blocks are also the fundamental building block (pun intended). There are flavored blocks, and it also has a local-first approach, using service workers to make things fast. Chisel has a different focus since it's meant for writing fiction, but plenty of things seem the same.

My code is pretty slapdash, as I have been playing with what I actually want from this editor. BlockSuite's implementation looks much more polished. I've been meaning to refactor, and this might be the time to start!

[1] https://chiseleditor.com

Multiplayer? Is this a game?

How extendable is this? Can I add my own blocks? And is this a commercial project with open core, or a truely open source-project?

> Multiplayer? Is this a game?

Many document editors describe the “collaborative Google-docs like model” of multiple people working on the same document and seeing everyone’s updates in real time as “multiplayer”

First time I see this as far as I'm aware. Usually it's collaborative editing. Bit misleading.

Dunno what to tell you. It’s a term used (not super commonly, but not infrequently either) in the space.

https://www.google.com/search?q=%22multiplayer%22+document+e...

I don’t think it’s misleading, given the existing usage.

Misusage pre-existing does not make that existing usage not an abuse. Language is both prescriptive and descriptive - someone prescribing the wrong word is still wrong, as it fails to be accurately descriptive.

Okay, but the word is in active use in this space for this exact meaning.

Yours is basically an argument against domain specific language that doesn’t agree with common language.

Do you refer to the human using your software as a "user" or "player?" The term "multiplayer" is correct if you refer to them as a "player" but if instead you refer to them as a "user" then "multiuser" is correct.

> Okay, but the word is in active use in this space for this exact meaning.

Word misuse proliferates because those using terms incorrectly are not corrected. Instead of doubling down, there should be a course correction. I recommend using this as an opportunity to highlight the unprofessionalism of your competitors.

>Do you refer to the human using your software as a "user" or "player?"

But "multiuser" already has an existing connotation that is different that "multiplayer". Multiplayer indicates a stronger "real-time, everyone sees the exact same thing", while "multiuser" is a weaker term. "Multiplayer" is used specifically _because_ the experience is supposed to be a parallel to the place where the term originated: video games.

The idea of a "multiplayer" document editing experience is all users are _occupying_ the same space (and often can even see each other).

> I recommend using this as an opportunity to highlight the unprofessionalism of your competitors.

I'm not in the space. I'm just aware of the space. I don't find the behavior of people in the space to be unprofessional.

Thank you for attempting to "correct" my behavior.

"Unlike our competitors, we're pedantic to the point of rejecting industry-common colloquialisms. Do you think note taking is a game? It is not. This is serious business. Fuck whimsy."

If the rest of the world is using a word a certain way, they are right and you are wrong and no amount of whinging about it is going to change that.

And yet language is fluid, constantly changing. New words are made up, existing words are misused enough to have new definitions encompassing what the cultural normative usage is.

The term has been around for a while.

I think there's a subtle distinction between "collaborative editing" and "multi-player". With the latter normally implying that there are real-time visual cues as to where the other users are, what they are doing, distinguishing styles, etc. More like what you get from a game. Within front-end it seems to be well understood.

Figma may have popularized its use in this context https://www.figma.com/blog/multiplayer-editing-in-figma/ (2016) and they've continued to use the term.

Multi-user.

Maybe it's just me, but I don't like composing or editing in Notion. It has some lovely other data aware view and link functionality, but I find myself fighting the block vs content structure frequently. For example, the edit interface really wants links in their own blocks vs links in the middle of some text being composed. If I want to write a lot of content in quickly, I trigger meta controls too often.

  > BlockSuite (pronounced "block sweet" )

Is there any other way that "BlockSuite" would be pronounced?

block soot possibly?

(Not a native speaker.)

Many words are pronounced in a skewed way in non-native english speaking demographics. I've heard almost everyone I meet saying Software-'Soot' instead of 'sweet', 'Adobee' as 'Adob', 'Orcut' as 'Orcoot', and 'alarm' as 'alaram'. When I asked them if it does not come out the way it is supposed to be when they are reading it, it actually 'didn't sounded like that in our head.'

I'm from India. I went to a school (started by a British-Indian family) where the students speaks so many dialects, that English was the only common denominator and I remember a lot of emphasis was given on pronunciation and the like. Getting the right lyrics of English western songs was one of the common pastime.

I think I'm a fairly proficient English speaker. I know it should be pronounced sweet but I instinctively default to suit.

Yes, this is exactly the reason why.

Any chance this might interact with Block Protocol in any way? https://blockprotocol.org/

The obvious immediate benefit to this would be native editing of Wordpress blocks for your website. But if this became standardized and usable both locally and on the web, it could open up all sorts of interesting use cases.

Sorry for the off-topic question: what is the editor used to create these type of sketches? I see it everywhere recently and I've even used it myself but can't remember the name.

https://blocksuite.affine.pro/assets/block-based-editing.57b...

https://excalidraw.com/

Thank you!

There’s also https://d2lang.com with sketch mode, but excalidraw works too.

The documentation is rock solid. I'm interested to know what is powering BlockSuite's documentation?

The docs are open source, so I looked it up. It seems to be built with https://vitepress.dev/

Material + Markdown + mcdocstrings is my current favorite for documenting a code repo. It auto creates nice code docs from doc-strings, and also renders math in those doc-strings. And of course I can add nice looking custom doc pages too.

So I’m curious how this compares with vitePress, which does look really nice.

Can anyone recommend a notion-like editor that is end-to-end encrypted by default and respects my privacy?

You could always check out AnyType: https://anytype.io/

Open-Source, E2E encrypted, offline first, syncs to all your devices via IPFS so no centralized server, etc.

No usernames or email addresses either.

Is that really open source?

I can't find it's source code on GitHub.

Ah, good point, sorry, it's just released in Public Beta this month, and opening the source code is Coming Soon™

https://blog.anytype.io/our-open-philosophy/

Seems that they will take the proprietary source available approach instead.

I don't think that is the same thing as "open source".

https://community.anytype.io/t/which-license-would-anytype-c...

No it's definitely going to be proper open-source: https://community.anytype.io/t/sprint-review-58-59-60/9754?u...

Turns out they picked a source-available license.

https://github.com/anyproto/anytype-ts/blob/main/LICENSE.md

https://skiff.com/pages

Looks pretty cool. I noticed a few issues when playing with the Playground like if you do a slash command and select one of the items such as entering "to" and then selecting "Today" it shows the date with "to" as the prefix. Overall a cool project though!

For me, the issue on the playground is that neither backspace nor delete did anything.

That seems like either a severe bug or limitation.

Just get good and don't make any mistakes obviously, what are you some sort of noob?

Same for me on Firefox, though Chromium and Safari seem to work

As others mentioned this might be down to browser. It's currently targeted for Chrome.

It's for this reason we recently switched to desktop clients for the parent project, AFFiNE. To create a more standard experience for all users.

As BlockSuite development is currently targeted for AFFiNE, but we hope to resolve many of these browser issues in the future.

I wish it had a "markdown mode". E.g. where the features of the editor are flagged as markdown compatible and only those features would be enabled. It would then open markdown files and save back to markdown files

That's an interesting idea - sort of like Word and compatibility mode? But with clearer communication on what's MD supported and not?

https://github.com/toeverything/blocksuite/blob/master/LICEN... MPL 2.0

It feels like theres so many of these fancy text editing solutions out there right now, would be great if there was a good comparison of features and pros/cons vs other solutions.

..how else would Block suite be pronounced...?

You would be surprised - Block Suit has been particularly common

Reply on news.ycombinator.com