opensourceprojects.dev

A broadsheet for software that doesn't ask for your email

AFFiNE: where Notion meets Miro, and blocks live on an edgeless canvas
GitHub RepoImpressions4

Project Description

View on GitHub

AFFiNE: When Notion and Miro Had a Baby, and It Lives on an Infinite Canvas

If you've ever found yourself juggling between a document editor for notes and a whiteboard tool for brainstorming, you know the pain of context switching. You write a plan in Notion, then you draw the architecture in Miro, then you try to link them together and it falls apart. AFFiNE is trying to fix that by merging the two into a single, block-based workspace that lives on an infinite canvas.

The pitch is simple: instead of forcing you to pick between a page and a board, AFFiNE lets you have both. Your blocks can be structured like a document, but they float on a canvas you can pan, zoom, and connect visually. And because it's open source, the whole thing is built with a developer-first mindset.

What It Does

AFFiNE is a local-first, open-source workspace that combines the document editing experience of Notion with the visual flexibility of Miro. At its core, it's a block-based editor, similar to Notion's system, but with a twist: the blocks are not restricted to a linear page layout. They can exist anywhere on an infinite canvas, and you can switch between a document view and a whiteboard view seamlessly.

Think of it as a hybrid. You can write a spec document, pull out a specific block, place it next to a diagram, draw an arrow between them, and then go back to document mode. The underlying data is the same, but the presentation changes. It handles rich text, markdown, and supports real-time collaboration, all while keeping your data local first (with optional sync).

Why It's Cool

The most interesting part isn't just the feature list. It's how it's built and what it enables.

1. Edgeless canvas with a structured core
The "edgeless" mode is not just a random whiteboard. Since the elements are structured blocks, you can do things you can't do in a traditional drawing tool. You can write a bulleted list, drag it over next to a flowchart, and the text remains selectable, searchable, and editable. It's a database with a visual layer, not just pixels.

2. Database and spreadsheet support
If you're a developer, you'll appreciate that AFFiNE isn't just for docs. It has a database feature that feels like a lightweight Airtable. You can create tables, link records, and then visualize those records on the canvas. This makes it great for tracking project tasks, feature requests, or even just planning a sprint.

3. The underlying architecture is clean
The codebase is written in TypeScript and uses a command pattern for state management. That means undo/redo is robust, and the system is designed to be extensible. If you've ever wanted to build custom blocks or plugins for your note-taking tool, the architecture is surprisingly approachable.

4. Local-first and privacy-focused
Your data doesn't have to go to the cloud unless you want it to. This is a huge win for people who care about privacy or who work on sensitive projects. You can run it locally, and the sync is optional (and self-hostable).

How to Try It

You can try it right now without installing anything. Head over to affine.pro and try the live demo. If you want to run it locally, it's a standard Node.js project.

Clone the repo and run:

git clone https://github.com/toeverything/AFFiNE.git
cd AFFiNE
pnpm install
pnpm dev

You'll need Node.js and pnpm installed. If you're familiar with React and Vite, you'll feel right at home. There are also prebuilt desktop apps for Windows, macOS, and Linux available on the releases page if you prefer a native app.

Final Thoughts

AFFiNE is still maturing, but the core concept is solid. It's not trying to be a replacement for every tool in your stack; it's trying to be the one tool that handles the "thinking out loud" phase better. As a developer, I can see myself using this for architecture notes, linking requirements to code snippets, and drawing state diagrams that are actually connected to the text that explains them.

It's open source, it's local-first, and it's solving a real problem. If you're tired of copy-pasting between a doc and a whiteboard, give it a spin. It might just be the missing piece.


Found this interesting? Follow @githubprojects for more open-source discoveries.

Back to Projects
Project ID: 7bf7d99f-9bc8-46e8-85f3-1c78988c9188Last updated: August 2, 2026 at 09:11 AM