Getting Started With Mantine

Mantine is an open-source collection of React components.

npm install @blocknote/core @blocknote/react @blocknote/mantine

To use BlockNote with Mantine, you can import BlockNoteView from @blocknote/mantine and the stylesheet from @blocknote/mantine/style.css.

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Usage within a Mantine app

By default, the BlockNoteView component from @blocknote/mantine will be wrapped in a MantineProvider context. However, if you're already using Mantine for your application UI, this context will already be provided.

Therefore, @blocknote/mantine also includes a BlockNoteViewNoProvider component which expects to be rendered in an existing MantineProvider context and does not include its own. It takes the same props as the regular BlockNoteView.

Getting Started With Mantine

Usage within a Mantine app

On this page

Learn

Collaborate

Community

Legal

Theme