Quick Start

The @blocksuite/presets package contains the prebuilt editors and opt-in additional UI components. Its canary versions are released daily based on the master branch, which is also used in production in AFFiNE. To work with the BlockSuite document model, You may also need to install @blocksuite/store explicitly:

pnpm install \
  @blocksuite/presets@canary \
  @blocksuite/store@canary

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

import "./styles.css";

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

Open Sandbox

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

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

As the next step, you can choose to:

• Explore how BlockSuite break down editors into different component types. Taking a look at the list of BlockSuite components may also be helpful.
• Try collaborative editing following the steps.
• Alternatively, learn about basic concepts in BlockSuite framework that are used throughout the development of editors.

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