The journey from AFFiNE to BlockSuite

[ShortCipher5]

The Story of AFFiNE

When we first started development on AFFiNE we knew we wanted to build more than an editor, we wanted to build an experience. And with the Pre-Alpha releases we proved that it could be possible to optimize your workflow and have a feature rich knowledge base that not only was focused on privacy and offline, but also offered multiplayer and collaborative experiences without compromise.

Without being too vain, some of the technical achievements are really quite extraordinary, even if they may seem quite trivial for most users. Take the ability to switch seamlessly from writing in Paper Mode to drawing in Edgeless Mode, or to easily view your content as a Kanban. And our users continued to provide us with lots of feedback and suggestions to help improve AFFiNE further.
However, we found that developing on the existing codebase was becoming difficult. We'd built something that was a showcase of what could be achieved, but it wasn't done in a particularly stable manner. And stability is essential for a product such as AFFiNE, a minimum requirement for it to be a true solution and product.

That's why over several months we started again, essentially from scratching - building AFFiNE from the bottom up. And as we did this, we came across something super interesting, and that's where BlockSuite comes in...

The Birth of BlockSuite

When it came to refactoring AFFiNE our focus was on creating a strong foundation for future development. We wanted something that would be stable and allow for continuous development in the future. With a strong focus on this, we realized that what we were doing was revolutionizing what could be achieved on the web. We had defined an incredibly convenient framework for developing collaborative applications. We had created BlockSuite!

Blocks, everywhere...
In BlockSuite, we can model every piece of editable content as a block. This allows for greater freedom over the data, along with the ability to more seamlessly transform it. So, while you may first create a text block and enter your content, you aren't limited - keep your one true source of data and transform this data into a Kanban by converting to a Kanban block.

Power of a block
So not only do blocks allow you to keep your one true source of data, but they also allow BlockSuite to offer some great functionality. Being offline-first means that functionality and data can be retained offline, but also that your changes (along with any other changes from other users) can be seamlessly merged conflict-free when you next go online. Fully-featured offline support without compromise on multiplayer and collaboration features.

Stable selection and interaction through all blocks
Even if everything is a block and there are multiple blocks in a document, this does not limit your ability to edit and interact with them. Each block has a contenteditable attribute, but unlike other editors, our unique approach allows you to interact with multiple blocks at the same time. This means stable selection through multiple contenteditable elements - a technological achievement that we believe has first been developed and realized by us. With the ability to select, copy and paste through multiple blocks and contenteditable areas.

More than just a whiteboard
When you hear the term whiteboard, the first thing that comes to mind may be a classroom. We realize the popularity of this term in a business workspace when it comes to applications too, but we've given our whiteboard a name - Edgeless Mode. The idea of having an infinite canvas, a creative place that you can do with as you wish, showing your data and interacting with it. Edgeless Mode does not only remove the boundaries of the canvas, but also removes the boundaries of how you can use your data. And as we mentioned, this is provided as a Web Component without any external canvas framework.

Solid history functionality
When you consider that everything is a block, and then include the different modes such as Paper Mode and Edgeless Mode, the complexity of use cases increases greatly. So to have such strong and reliable history functionality is no small technical feat. Combining all your interactions - no matter which block you edit, no matter whether you interact in Paper Mode or Edgeless Mode - are writing text or moving objects - everything is stored and collected in our history service. Which offers users easy hassle-free functionality when it comes to the undo and redo of any operation.

Web Component Containers
Another key part to consider is that now our containers have been rewritten as Web Components. While this is newer technology, there is good support in modern browsers. Not only does this allow for the ability to freely embed BlockSuite and its own components on the web, but it also means embedding BlockSuite - and enabling all the features that come with it - is just as easy. As a Web Component it doesn't matter if you use React, Vue, Angular, JS, or something else... BlockSuite can be used almost anywhere.