Skip to content

Quick Start

For a swift start with BlockSuite, you can either kick off with ready-made examples for popular frameworks, or simply install the core packages to integrate it into your project.

INFO

If this is your first time using BlockSuite, referring to the overview section may be helpful.

Bootstrap Project

BlockSuite works with all common frameworks, you can start from these examples that basically builds a TodoMVC-like note app based on BlockSuite.

FrameworkLinkMaintaining
TypeScript LogoVanillavanilla-indexeddb
Next LogoNextreact-basic-next
React LogoReactreact-basic
Vue LogoVuevue-basic
Angular LogoAngularangular-basic
Preact LogoPreactpreact-basic
Svelte LogoSveltesvelte-basic
Solid LogoSolidsolid-basic

Init From Scratch

To use BlockSuite in your existing project, simply install these core packages:

sh
yarn install \
  @blocksuite/presets@canary \
  @blocksuite/blocks@canary \
  @blocksuite/store@canary

Key takeaways in the snippet above:

  • The @blocksuite/presets package contains the prebuilt editors and opt-in additional UI components.
  • To work with the BlockSuite document model and first-party blocks, the @blocksuite/store and @blocksuite/blocks packages are required.
  • The BlockSuite canary versions are released daily based on the master branch, which is also used in production in AFFiNE.

Then you can use the prebuilt PageEditor out of the box, with an initialized doc instance attached as its document model:

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

The PageEditor here is a standard web component that can also be reused with <page-editor> HTML tag. Another EdgelessEditor also works similarly - simply attach the editor with a doc and you are all set.

For the doc.getBlockByFlavour and doc.updateBlock APIs used here, please see the introduction about block tree basics for further details.

As the next step, you can choose to:

Note that BlockSuite is still under rapid development. For any questions or feedback, feel free to let us know!