Quick Start

The @blocksuite/presets package contains the editor built into AFFiNE. Its nightly versions are released daily based on the master branch, and they are always tested on CI. This means that the nightly versions can already be used in real-world projects like AFFiNE at any time:

pnpm i @blocksuite/presets@nightly

pnpm i @blocksuite/presets@nightly

If you want to easily reuse most of the rich-text editing features, you can use the SimpleAffineEditor web component directly (code example here):

import "./styles.css";

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

Open Sandbox

Or equivalently, you can also use the declarative style:

html

<body>
  <simple-affine-editor></simple-affine-editor>
  <script type="module">
    import '@blocksuite/presets';
    import '@blocksuite/presets/themes/affine.css';
  </script>
</body>

<body>
  <simple-affine-editor></simple-affine-editor>
  <script type="module">
    import '@blocksuite/presets';
    import '@blocksuite/presets/themes/affine.css';
  </script>
</body>

However, the SimpleAffineEditor here is just a thin wrapper with dozens of lines that doesn't enable the opt-in collaboration and data persistence features. If you are going to support more complicated real-world use cases (e.g., with customized block models and configured data sources), this would involve the use of more packages. In the following chapters, we will continue to demonstrate their usage and the core concepts involved.

Quick Start ​

Quick Start