#9: TypeScript - AFFiNE, Yjs, BlockSuite and Jotai
A next gen knowledge base, CRDTs, a block-based editor and a minimalistic React state management library
Welcome to Behind the Mutex! Our weekly newsletter summarizes notable activity in open-source, new and growing projects and releases.
In Case You Missed It
Explore the Coolify codebase in our latest review:
The previous issue of our weekly newsletter:
Open Source Landscape
Behind the Mutex picks a few categories and explores new and popular projects and features there.
AFFiNE: https://github.com/toeverything/AFFiNE
Looking for a free replacement for Notion? Or Miro? Or Monday? How about all of them by a single solution? AFFiNE is a next generation knowledge base that fuses writing, drawing and planning in a single product. Exciting, right? But this is only a part of the story. Equally importantly, the tool is:
Built in public.
Privacy-focused. Users can take full control of their data and store it locally.
Collaboration-oriented. Users can sync their data between their devices and other collaborators.
Offline-first. Conflict-free merging keeps users’ data in sync when their devices are back online.
Similarly to Notion, AFFiNE offers workspaces, pages and blocks that users can organize however they want. One of the outstanding features is that pages support two workflows:
The Page mode. Blocks are stacked vertically, Notion-like.
The Edgeless mode. Blocks appear on a canvas, where users can manipulate their blocks, connect them, and draw.
AFFiNE also provides a container image for self-hosting which might be really interesting for teams who don’t want to rely on any 3rd-party Cloud hosting.
Yjs: https://github.com/yjs/yjs
Building collaborative software? Looking for a conflict-free replicated data types (CRDTs) implementation? Yjs offers a powerful abstraction on top of its CRDTs called shared data types which can be manipulated concurrently. These types are similar to common data types like Map and Array. They can be changed, fire events when changes happen, and automatically merge without conflicts. Some of the library’s highlights:
Network agnostic. No assumptions about the underlying network technology.
Supports many existing rich text editors.
Offline editing.
Version snapshots and undo/redo.
Supports sharing awareness information such as presence and cursor localtions.
Scales well with an unlimited number of users and is well suited for even large documents.
BlockSuite: https://github.com/toeverything/blocksuite
BlockSuite is a block-based framework for composing rich content editors, as well as an out-of-the-box block editor tailored for the AFFiNE knowledge base. The project aims to provide a progressive solution for building collaborative applications.
The framework comes with a solid set of features:
Block-based editing. Rich content gets broken down into discrete
contenteditableblocks, unlike many traditional monolithic rich text editors.Real-time collaboration. CRDTs support is built into the framework.
UI framework agnostic. Editors are implemented using the Web Components API and can be easily embedded with no vendor-lock risks.
Incremental state sync. Thanks to the underlying usage of Yjs, state updates are serialized into standardized binaries, enabling efficient data synchronization over various network protocols.
Hybrid infinite canvas. A high performance canvas-based renderer is also provided, fulfilling needs for whiteboard functionalities.
Jotai: https://github.com/pmndrs/jotai
Jotai takes an atomic approach to global React state management with a model inspired by Recoil. The library allows building state by combining atoms. DOM renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React contexts and eliminates the need for memoization. Here’s a look at its features:
Minimal core API (2kb). The library exposes only a few exports from the main
jotaibundle:atom,useAtom,StoreandProvider.No string keys (compared to Recoil).
Many utilities and integrations, including Storage, SSR, Location and much more.
Support of popular frameworks such as Next.JS, Remix, Gatsby and React Native.
Improved developer experience by leveraging React Fast Refresh.
If you have any feedback or would like to see certain open-sources projects highlighted in our upcoming summaries and reviews, please feel free to comment, send an email or DM the author on Twitter @dalazx.
Until next time,
Behind the Mutex.