Getting Started With Vanilla JS

BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps. However, this does involve writing your own UI elements.

Installing with NPM

To install only the vanilla JS parts of BlockNote with NPM, run:

npm install @blocknote/core

Creating an editor

This is how to create a new BlockNote editor:

import { BlockNoteEditor } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/core/style.css";

const editor = BlockNoteEditor.create();

editor.mount(document.getElementById("root")!); // element to append the editor to

Make sure to import both @blocknote/core/style.css (the editor's styles) and @blocknote/core/fonts/inter.css (the default font).

Now, you'll have a plain BlockNote instance on your page. However, it's missing some menus and other UI elements.

Creating your own UI elements

Because you can't use the built-in React UI Components, you'll need to create and register your own UI elements.

Each UI element is backed by an extension. You can retrieve an extension instance from the editor with editor.getExtension(...), and each one exposes a store that holds its current state (visibility, position, and any element-specific data). The available UI element extensions are:

While it's up to you to decide how you want the elements to be rendered, the store lets you react to state changes so you can update the visibility, position, and contents of your elements:

import { SideMenuExtension } from "@blocknote/core";

const extension = editor.getExtension(SideMenuExtension)!;

// Read the current state at any time:
const state = extension.store.state;

// Subscribe to state changes, e.g. to reposition or show/hide your element:
const unsubscribe = extension.store.subscribe(() => {
  const state = extension.store.state;

  // ...update your UI element based on `state`
});

Let's look at how you could add the Side Menu to your editor. The example below mounts a plain editor and builds a custom Side Menu from scratch, using the extension's store to position it and its blockDragStart/blockDragEnd methods to handle dragging: