diff --git a/README.md b/README.md
index 13c8961cdc..e41828d79e 100644
--- a/README.md
+++ b/README.md
@@ -34,11 +34,11 @@ Play with the editor @ [https://playground.blocknotejs.org/](https://playground.
 [![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)
 
 ```typescript
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 function App() {
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     onEditorContentChange: (editor) => {
       // Log the document to console on every update
       console.log(editor.getJSON());
diff --git a/docs/api/og.tsx b/docs/api/og.tsx.bak
similarity index 99%
rename from docs/api/og.tsx
rename to docs/api/og.tsx.bak
index b7794f6e1b..dd02f0b647 100644
--- a/docs/api/og.tsx
+++ b/docs/api/og.tsx.bak
@@ -1,12 +1,11 @@
 import { ImageResponse } from "@vercel/og";
-import React from "react";
 
 export const config = {
   runtime: "edge",
 };
 
 const font = fetch(
-  new URL("../docs/public/fonts/Gilroy-Regular.ttf", import.meta.url)
+  new URL("../../assets/fonts/Gilroy-Regular.ttf", import.meta.url),
 ).then((res) => res.arrayBuffer());
 
 export default async function handler(request: { url: string }) {
diff --git a/docs/public/fonts/Gilroy-Bold.ttf b/docs/assets/fonts/Gilroy-Bold.ttf
similarity index 100%
rename from docs/public/fonts/Gilroy-Bold.ttf
rename to docs/assets/fonts/Gilroy-Bold.ttf
diff --git a/docs/public/fonts/Gilroy-ExtraBold.ttf b/docs/assets/fonts/Gilroy-ExtraBold.ttf
similarity index 100%
rename from docs/public/fonts/Gilroy-ExtraBold.ttf
rename to docs/assets/fonts/Gilroy-ExtraBold.ttf
diff --git a/docs/public/fonts/Gilroy-Medium.ttf b/docs/assets/fonts/Gilroy-Medium.ttf
similarity index 100%
rename from docs/public/fonts/Gilroy-Medium.ttf
rename to docs/assets/fonts/Gilroy-Medium.ttf
diff --git a/docs/public/fonts/Gilroy-Regular.ttf b/docs/assets/fonts/Gilroy-Regular.ttf
similarity index 100%
rename from docs/public/fonts/Gilroy-Regular.ttf
rename to docs/assets/fonts/Gilroy-Regular.ttf
diff --git a/docs/public/fonts/Gilroy-SemiBold.ttf b/docs/assets/fonts/Gilroy-SemiBold.ttf
similarity index 100%
rename from docs/public/fonts/Gilroy-SemiBold.ttf
rename to docs/assets/fonts/Gilroy-SemiBold.ttf
diff --git a/docs/public/fonts/gilroy-bold.woff2 b/docs/assets/fonts/gilroy-bold.woff2
similarity index 100%
rename from docs/public/fonts/gilroy-bold.woff2
rename to docs/assets/fonts/gilroy-bold.woff2
diff --git a/docs/public/fonts/gilroy-extrabold.woff2 b/docs/assets/fonts/gilroy-extrabold.woff2
similarity index 100%
rename from docs/public/fonts/gilroy-extrabold.woff2
rename to docs/assets/fonts/gilroy-extrabold.woff2
diff --git a/docs/public/fonts/gilroy-medium.woff2 b/docs/assets/fonts/gilroy-medium.woff2
similarity index 100%
rename from docs/public/fonts/gilroy-medium.woff2
rename to docs/assets/fonts/gilroy-medium.woff2
diff --git a/docs/public/fonts/gilroy-regular.woff2 b/docs/assets/fonts/gilroy-regular.woff2
similarity index 100%
rename from docs/public/fonts/gilroy-regular.woff2
rename to docs/assets/fonts/gilroy-regular.woff2
diff --git a/docs/public/fonts/gilroy-semibold.woff2 b/docs/assets/fonts/gilroy-semibold.woff2
similarity index 100%
rename from docs/public/fonts/gilroy-semibold.woff2
rename to docs/assets/fonts/gilroy-semibold.woff2
diff --git a/docs/components/pages/landing/hero/Demo.tsx b/docs/components/pages/landing/hero/Demo.tsx
index 6d7a6d472c..c2ad2fff55 100644
--- a/docs/components/pages/landing/hero/Demo.tsx
+++ b/docs/components/pages/landing/hero/Demo.tsx
@@ -1,5 +1,5 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useMemo } from "react";
 import YPartyKitProvider from "y-partykit/provider";
@@ -53,11 +53,7 @@ function getUTCDateYYYYMMDD() {
   return `${year}${formattedMonth}${formattedDay}`;
 }
 
-export function ReactBlockNote(props: {
-  theme: "light" | "dark";
-}) {
-
-
+export function ReactBlockNote(props: { theme: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
     console.log("create");
     const doc = new Y.Doc();
@@ -70,7 +66,7 @@ export function ReactBlockNote(props: {
     return [doc, provider];
   }, []);
 
-  const editor = useBlockNote(
+  const editor = useCreateBlockNote(
     {
       collaboration: {
         provider,
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index a07f955480..21fb90daa6 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -20,19 +20,20 @@ const withAnalyzer = analyzer({ enabled: false });
 
 const nextConfig = withAnalyzer(
   withNextra({
+    // transpilePackages: ["@blocknote/example-react-custom-styles"],
     images: {
       remotePatterns: [
         {
-          protocol: 'https',
-          hostname: 'avatars.githubusercontent.com',
-          port: '',
-          pathname: '/u/**',
+          protocol: "https",
+          hostname: "avatars.githubusercontent.com",
+          port: "",
+          pathname: "/u/**",
         },
         {
-          protocol: 'https',
-          hostname: 'github.com',
-          port: '',
-          pathname: '/**',
+          protocol: "https",
+          hostname: "github.com",
+          port: "",
+          pathname: "/**",
         },
       ],
     },
@@ -55,14 +56,16 @@ const nextConfig = withAnalyzer(
             vendor: {
               test: (module) => {
                 // console.log(module.resource);
-                if (module.resource?.includes("blocknote") || module.resource?.includes("mantine")) {
-
+                if (
+                  module.resource?.includes("blocknote") ||
+                  module.resource?.includes("mantine")
+                ) {
                   return true;
                 }
                 return false;
               },
-              name: 'blocknotechunk',
-              chunks: 'all',
+              name: "blocknotechunk",
+              chunks: "all",
             },
           },
         };
@@ -77,7 +80,7 @@ const nextConfig = withAnalyzer(
         // "@blocknote/react": path.resolve(__dirname, "../packages/react/src/"),
       };
     },
-  })
+  }),
 );
 
 export default nextConfig;
diff --git a/docs/package.json b/docs/package.json
index 6b4d3ecdc3..8ec05f7036 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "docs:build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -12,7 +12,7 @@
     "@blocknote/core": "*",
     "@blocknote/react": "*",
     "@headlessui/react": "^1.7.18",
-    "@mantine/core": "^7.4.2",
+    "@mantine/core": "^7.5.0",
     "@next/bundle-analyzer": "^14.1.0",
     "@vercel/og": "^0.6.2",
     "classnames": "2.3.2",
diff --git a/docs/pages/docs/_meta.json b/docs/pages/docs/_meta.json
index 532c9e4ed2..9d5049f9ce 100644
--- a/docs/pages/docs/_meta.json
+++ b/docs/pages/docs/_meta.json
@@ -1,8 +1,9 @@
 {
-
   "index": "Introduction",
-  "quickstart":"",
+  "quickstart": "Quickstart",
+  "editor-basics": "Editor Basics",
   "editor-api": "Editor API",
+  "styling-theming": "Styling & Theming",
   "ui-components": "UI Components",
   "custom-schemas": "Custom Schemas",
   "advanced": "Advanced",
diff --git a/docs/pages/docs/advanced/nextjs.mdx b/docs/pages/docs/advanced/nextjs.mdx
index 8e0bbc3119..8b20b3d13f 100644
--- a/docs/pages/docs/advanced/nextjs.mdx
+++ b/docs/pages/docs/advanced/nextjs.mdx
@@ -13,13 +13,13 @@ Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getti
 
 ```typescript jsx
 "use client"; // this registers <Editor> as a Client Component
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 // Our <Editor> component we can reuse later
 export default function Editor() {
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
diff --git a/docs/pages/docs/advanced/real-time-collaboration.mdx b/docs/pages/docs/advanced/real-time-collaboration.mdx
index f51641b727..d2559acc02 100644
--- a/docs/pages/docs/advanced/real-time-collaboration.mdx
+++ b/docs/pages/docs/advanced/real-time-collaboration.mdx
@@ -9,7 +9,11 @@ path: /docs/real-time-collaboration
 
 Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs):
 
-<img style={{maxWidth: "300px", border: "1px solid gray"}} src="/img/features/collaboration.gif" alt="text editing collaboration" />
+<img
+  style={{ maxWidth: "300px", border: "1px solid gray" }}
+  src="/img/features/collaboration.gif"
+  alt="text editing collaboration"
+/>
 
 _Try the live demo on the [homepage](https://www.blocknotejs.org)_
 
@@ -23,7 +27,7 @@ import { WebrtcProvider } from "y-webrtc";
 const doc = new Y.Doc();
 
 const provider = new WebrtcProvider("my-document-id", doc); // setup a yjs provider (explained below)
-const editor = useBlockNote({
+const editor = useCreateBlockNote({
   // ...
   collaboration: {
     // The Yjs Provider responsible for transporting updates:
@@ -61,9 +65,14 @@ Liveblocks provides a hosted back-end for Yjs which allows you to download and s
 npx create-liveblocks-app@latest --example nextjs-yjs-blocknote-advanced
 ```
 
-<video autoplay loop src="/img/screenshots/liveblocks_blocknote_example.mp4" aria-label="BlockNote example using Liveblocks Yjs, showing collaboration and DevTools" />
+<video
+  autoPlay
+  loop
+  src="/img/screenshots/liveblocks_blocknote_example.mp4"
+  aria-label="BlockNote example using Liveblocks Yjs, showing collaboration and DevTools"
+/>
 
-You can also try the same example in a [live demo](https://liveblocks.io/examples/collaborative-text-editor-advanced/nextjs-yjs-blocknote-advanced). To start with Liveblocks and BlockNote make sure to follow their [getting started guide](https://liveblocks.io/docs/get-started/yjs-blocknote-react). 
+You can also try the same example in a [live demo](https://liveblocks.io/examples/collaborative-text-editor-advanced/nextjs-yjs-blocknote-advanced). To start with Liveblocks and BlockNote make sure to follow their [getting started guide](https://liveblocks.io/docs/get-started/yjs-blocknote-react).
 
 ## Partykit
 
@@ -77,163 +86,94 @@ const provider = new YPartyKitProvider(
   "blocknote-dev.yousefed.partykit.dev",
   // use a unique name as a "room" for your application:
   "your-project-name",
-  doc
+  doc,
 );
 ```
 
 To learn how to set up your own development / production servers, check out the [PartyKit docs](https://github.com/partykit/partykit) and the [BlockNote + Partykit example](https://github.com/partykit/partykit/tree/main/examples/blocknote).
 
-[//]: # (# Live demo)
-
-[//]: # ()
-[//]: # (Below, two editors are connected to each other. Note that anything you type is shared live with other visitors of this webpage, so be friendly ;&#41;)
-
-[//]: # ()
-[//]: # (::: sandbox {template=react-ts})
-
-[//]: # ()
-[//]: # (```typescript-vue /App.tsx)
-
-[//]: # (import { BlockNoteEditor } from "@blocknote/core";)
-
-[//]: # (import { BlockNoteView, useBlockNote } from "@blocknote/react";)
-
-[//]: # (import YPartyKitProvider from "y-partykit/provider";)
-
-[//]: # (import * as Y from "yjs";)
-
-[//]: # (import "@blocknote/react/style.css";)
-
-[//]: # ()
-[//]: # (const doc = new Y.Doc&#40;&#41;;)
-
-[//]: # (const provider = new YPartyKitProvider&#40;)
-
-[//]: # (  "blocknote-dev.yousefed.partykit.dev",)
-
-[//]: # (  // use a unique name as a "room" for your application:)
-
-[//]: # (  "docs-demo",)
-
-[//]: # (  doc)
-
-[//]: # (&#41;;)
-
-[//]: # ()
-[//]: # (export default function App&#40;&#41; {)
-
-[//]: # (  // Creates a new editor instance.)
-
-[//]: # (  const editor: BlockNoteEditor | null = useBlockNote&#40;{)
-
-[//]: # (    collaboration: {)
-
-[//]: # (      provider,)
-
-[//]: # (      fragment: doc.getXmlFragment&#40;"document-store"&#41;,)
-
-[//]: # (      user: {)
-
-[//]: # (        name: "User 1",)
-
-[//]: # (        color: "#ff0000",)
-
-[//]: # (      },)
-
-[//]: # (    },)
-
-[//]: # (  }&#41;;)
-
-[//]: # ()
-[//]: # (  // Renders the editor instance using a React component.)
-
-[//]: # (  return <BlockNoteView editor={editor} theme={"{{ getTheme&#40;isDark&#41; }}"} />;)
-
-[//]: # (})
-
-[//]: # (```)
-
-[//]: # ()
-[//]: # (```css-vue /styles.css [hidden])
-
-[//]: # ({{ getStyles&#40;isDark&#41; }})
-
-[//]: # (```)
-
-[//]: # ()
-[//]: # (:::)
-
-[//]: # ()
-[//]: # (::: sandbox {template=react-ts})
-
-[//]: # ()
-[//]: # (```typescript-vue /App.tsx)
-
-[//]: # (import { BlockNoteEditor } from "@blocknote/core";)
-
-[//]: # (import { BlockNoteView, useBlockNote } from "@blocknote/react";)
-
-[//]: # (import YPartyKitProvider from "y-partykit/provider";)
-
-[//]: # (import * as Y from "yjs";)
-
-[//]: # (import "@blocknote/react/style.css";)
-
-[//]: # ()
-[//]: # (const doc = new Y.Doc&#40;&#41;;)
-
-[//]: # (const provider = new YPartyKitProvider&#40;)
-
-[//]: # (  "blocknote-dev.yousefed.partykit.dev",)
-
-[//]: # (  // use a unique name as a "room" for your application:)
-
-[//]: # (  "docs-demo",)
-
-[//]: # (  doc)
-
-[//]: # (&#41;;)
-
-[//]: # ()
-[//]: # (export default function App&#40;&#41; {)
-
-[//]: # (  // Creates a new editor instance.)
-
-[//]: # (  const editor: BlockNoteEditor | null = useBlockNote&#40;{)
-
-[//]: # (    collaboration: {)
-
-[//]: # (      provider,)
-
-[//]: # (      fragment: doc.getXmlFragment&#40;"document-store"&#41;,)
-
-[//]: # (      user: {)
-
-[//]: # (        name: "User 2",)
-
-[//]: # (        color: "#00ff00",)
-
-[//]: # (      },)
-
-[//]: # (    },)
-
-[//]: # (  }&#41;;)
-
-[//]: # ()
-[//]: # (  // Renders the editor instance using a React component.)
-
-[//]: # (  return <BlockNoteView editor={editor} theme={"{{ getTheme&#40;isDark&#41; }}"} />;)
-
-[//]: # (})
-
-[//]: # (```)
-
-[//]: # ()
-[//]: # (```css-vue /styles.css [hidden])
-
-[//]: # ({{ getStyles&#40;isDark&#41; }})
-
-[//]: # (```)
-
-[//]: # ()
-[//]: # (:::)
+[//]: # "# Live demo"
+[//]: #
+[//]: # "Below, two editors are connected to each other. Note that anything you type is shared live with other visitors of this webpage, so be friendly ;)"
+[//]: #
+[//]: # "::: sandbox {template=react-ts}"
+[//]: #
+[//]: # "```typescript-vue /App.tsx"
+[//]: # 'import { BlockNoteEditor } from "@blocknote/core";'
+[//]: # 'import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";'
+[//]: # 'import YPartyKitProvider from "y-partykit/provider";'
+[//]: # 'import * as Y from "yjs";'
+[//]: # 'import "@blocknote/react/style.css";'
+[//]: #
+[//]: # "const doc = new Y.Doc();"
+[//]: # "const provider = new YPartyKitProvider("
+[//]: # '  "blocknote-dev.yousefed.partykit.dev",'
+[//]: # '  // use a unique name as a "room" for your application:'
+[//]: # '  "docs-demo",'
+[//]: # "  doc"
+[//]: # ");"
+[//]: #
+[//]: # "export default function App() {"
+[//]: # "  // Creates a new editor instance."
+[//]: # "  const editor: BlockNoteEditor | null = useBlockNote({"
+[//]: # "    collaboration: {"
+[//]: # "      provider,"
+[//]: # '      fragment: doc.getXmlFragment("document-store"),'
+[//]: # "      user: {"
+[//]: # '        name: "User 1",'
+[//]: # '        color: "#ff0000",'
+[//]: # "      },"
+[//]: # "    },"
+[//]: # "  });"
+[//]: #
+[//]: # "  // Renders the editor instance using a React component."
+[//]: # '  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;'
+[//]: # "}"
+[//]: # "```"
+[//]: #
+[//]: # "```css-vue /styles.css [hidden]"
+[//]: # "{{ getStyles(isDark) }}"
+[//]: # "```"
+[//]: #
+[//]: # ":::"
+[//]: #
+[//]: # "::: sandbox {template=react-ts}"
+[//]: #
+[//]: # "```typescript-vue /App.tsx"
+[//]: # 'import { BlockNoteEditor } from "@blocknote/core";'
+[//]: # 'import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";'
+[//]: # 'import YPartyKitProvider from "y-partykit/provider";'
+[//]: # 'import * as Y from "yjs";'
+[//]: # 'import "@blocknote/react/style.css";'
+[//]: #
+[//]: # "const doc = new Y.Doc();"
+[//]: # "const provider = new YPartyKitProvider("
+[//]: # '  "blocknote-dev.yousefed.partykit.dev",'
+[//]: # '  // use a unique name as a "room" for your application:'
+[//]: # '  "docs-demo",'
+[//]: # "  doc"
+[//]: # ");"
+[//]: #
+[//]: # "export default function App() {"
+[//]: # "  // Creates a new editor instance."
+[//]: # "  const editor: BlockNoteEditor | null = useBlockNote({"
+[//]: # "    collaboration: {"
+[//]: # "      provider,"
+[//]: # '      fragment: doc.getXmlFragment("document-store"),'
+[//]: # "      user: {"
+[//]: # '        name: "User 2",'
+[//]: # '        color: "#00ff00",'
+[//]: # "      },"
+[//]: # "    },"
+[//]: # "  });"
+[//]: #
+[//]: # "  // Renders the editor instance using a React component."
+[//]: # '  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;'
+[//]: # "}"
+[//]: # "```"
+[//]: #
+[//]: # "```css-vue /styles.css [hidden]"
+[//]: # "{{ getStyles(isDark) }}"
+[//]: # "```"
+[//]: #
+[//]: # ":::"
diff --git a/docs/pages/docs/advanced/vanilla-js.mdx b/docs/pages/docs/advanced/vanilla-js.mdx
index a1ff7ed2f7..0921d07b11 100644
--- a/docs/pages/docs/advanced/vanilla-js.mdx
+++ b/docs/pages/docs/advanced/vanilla-js.mdx
@@ -1,6 +1,6 @@
 ---
 title: Usage Without React (Vanilla JS)
-description: BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps. It comes with built-in UI elements that are designed for React.
+description: 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.
 imageTitle: Usage Without React (Vanilla JS)
 path: /docs/vanilla-js
 ---
@@ -9,58 +9,117 @@ import { Callout } from "nextra/components";
 
 # Usage Without React (Vanilla JS)
 
-BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps. It comes with built-in UI elements that are designed for React.
-
-It is also possible to use BlockNote without using React; for example in "Vanilla JS" applications or if you prefer to use a different framework. However, this does involve writing your own UI elements.
+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.
 
 <Callout type={"warning"}>
-    We recommend using BlockNote with React so you can use the built-in UI components. This document will explain how you can use BlockNote without React, and write your own components, but this is not recommended as you'll lose the easy-to-use built-in components. The API for non-React applications is also likely to change.
+  We recommend using BlockNote with React so you can use the built-in UI
+  components. This document will explain how you can use BlockNote without
+  React, and write your own components, but this is not recommended as you'll
+  lose the great out-of-the-box experience that BlockNote offers.
 </Callout>
 
-## Installing
+## Installing with NPM
+
+To install only the vanilla JS parts of BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run:
 
-Instead of `@blocknote/react`, you'll need to install and use `@blocknote/core`.
+```console
+npm install @blocknote/core
+```
 
 ## Creating an editor
 
 This is how to create a new BlockNote editor:
 
-``` typescript
+```typescript
 import { BlockNoteEditor } from "@blocknote/core";
 
-const editor = BlockNoteEditor.create({
-  element: document.getElementById("root")!, // element to append the editor to
-  onUpdate: ({ editor }) => {
-    console.log(editor.getJSON());
-  }
-});
+const editor = BlockNoteEditor.create();
+
+editor.mount(document.getElementById("root")); // element to append the editor to
 ```
 
-Now, you'll have a plain BlockNote instance on your page. However, it's missing some menu's and other UI elements.
+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 we can't use the built-in React elements, you'll need to create and register your own UI elements for the following BlockNote components:
+Because you can't use the built-in React [UI Components](/docs/quickstart), you'll need to create and register your own UI elements.
 
-- Slash menu
-- Formatting toolbar
-- Side menu (block handle)
-- Hyperlink menu
+While it's up to you to decide how you want the elements to be rendered, BlockNote provides methods for updating the visibility, position, and state of your elements:
 
-You can do this by passing custom component factories as `uiFactories`, e.g.:
+```typescript
+type UIElement =
+  | "formattingToolbar"
+  | "hyperlinkToolbar"
+  | "imageToolbar"
+  | "sideMenu"
+  | "suggestionMenu"
+  | "tableHandles"
+
+const uiElement: UIElement = ...;
+
+editor[uiElement].onUpdate((uiElementState: ...) => {
+  ...;
+})
+```
+
+Let's look at how you could add the [Side Menu]() to your editor:
+
+```typescript
+import { BlockNoteEditor } from "@blocknote/core";
 
-``` typescript
 const editor = BlockNoteEditor.create({
   element: document.getElementById("root")!,
-  uiFactories: {
-    formattingToolbarFactory: customFormattingToolbarFactory,
-    hyperlinkToolbarFactory: customHyperlinkToolbarFactory,
-    slashMenuFactory: customSlashMenuFactory,
-    blockSideMenuFactory: customBlockSideMenuFactory,
-  }
 });
-```
 
-## Example
+export function createButton(text: string, onClick?: () => void) {
+  const element = document.createElement("a");
+  element.href = "#";
+  element.text = text;
+  element.style.margin = "10px";
+
+  if (onClick) {
+    element.addEventListener("click", (e) => {
+      onClick();
+      e.preventDefault();
+    });
+  }
+
+  return element;
+}
+
+let element: HTMLElement;
+
+editor.sideMenu.onUpdate((sideMenuState) => {
+  if (!element) {
+    element = document.createElement("div");
+    element.style.background = "gray";
+    element.style.position = "absolute";
+    element.style.padding = "10px";
+    element.style.opacity = "0.8";
+    const addBtn = createButton("+", () => {
+      editor.sideMenu.addBlock();
+    });
+    element.appendChild(addBtn);
+
+    const dragBtn = createButton("::", () => {});
+
+    dragBtn.addEventListener("dragstart", editor.sideMenu.blockDragStart);
+    dragBtn.addEventListener("dragend", editor.sideMenu.blockDragEnd);
+    dragBtn.draggable = true;
+    element.style.display = "none";
+    element.appendChild(dragBtn);
 
-For an example of a how to set up your custom UI factories, see the [Vanilla JS example](https://github.com/TypeCellOS/BlockNote/blob/main/examples/vanilla/) in the repository.
+    document.getElementById("root")!.appendChild(element);
+  }
+
+  if (sideMenuState.show) {
+    element.style.display = "block";
+
+    element.style.top = sideMenuState.referencePos.top + "px";
+    element.style.left =
+      sideMenuState.referencePos.x - element.offsetWidth + "px";
+  } else {
+    element.style.display = "none";
+  }
+});
+```
diff --git a/docs/pages/docs/custom-schemas.mdx b/docs/pages/docs/custom-schemas.mdx
new file mode 100644
index 0000000000..b83c34a1a6
--- /dev/null
+++ b/docs/pages/docs/custom-schemas.mdx
@@ -0,0 +1,99 @@
+---
+title: Custom Schemas
+description: Learn how to create custom schemas for your BlockNote editor
+---
+
+# Custom Schemas (advanced)
+
+By default, BlockNote documents support different kind of blocks, inline content and text styles (see [default schema](/docs/editor-basics/default-schema)).
+However, you can extend BlockNote and create custom schemas to support your own blocks, inline content and text styles.
+
+## Custom Blocks
+
+Blocks are the main elements of a document, such as paragraphs, headings, lists, etc.
+
+- [Learn how to create custom blocks for your BlockNote editor](/docs/custom-schemas/blocks)
+
+## Custom Inline Content
+
+Inline Content are elements that can be inserted inside a text block, such as links, mentions, tags, etc.
+
+- [Learn how to create custom Inline Content for your BlockNote editor](/docs/custom-schemas/inline-content)
+
+## Custom Styles
+
+Text Styles are properties that can be applied to a piece of text, such as bold, italic, underline, etc.
+
+- [Learn how to add custom Styles to your BlockNote editor](/docs/custom-schemas/styles)
+
+## Creating your own schema
+
+Once you have defined your custom blocks (see the links above), inline content or styles, you can create a schema and pass this to the initialization of the editor.
+
+```typescript
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    // enable the default blocks if desired
+    ...defaultBlockSpecs,
+
+    // Add your own custom blocks:
+    // customBlock: CustomBlock,
+  },
+  inlineContentSpecs: {
+    // enable the default inline content if desired
+    ...defaultInlineContentSpecs,
+
+    // Add your own custom inline content:
+    // customInlineContent: CustomInlineContent,
+  },
+  styleSpecs: {
+    // enable the default styles if desired
+    ...defaultStyleSpecs,
+
+    // Add your own custom styles:
+    // customStyle: CustomStyle
+  },
+});
+```
+
+You can then pass this to the instantiation of your BlockNoteEditor (`BlockNoteEditor.create` or `useCreateBlockNote`):
+
+```typescript
+const editor = useCreateBlockNote({
+  schema,
+});
+```
+
+## Usage with TypeScript
+
+In contrast to most other editors, BlockNote has been designed for full TypeScript compatibility. This means you can get full type safety and autocompletion _even when using a custom schema_.
+
+By default, the methods, hooks, and types exposed by the API assume you're using the default, built-in schema. If you're using a custom schema, there are 3 ways to get full type safety:
+
+### Methods that accept an optional `schema` parameter
+
+Some methods, like the `useBlockNoteEditor` hook, take an optional `schema?: BlockNoteSchema` parameter. If you're using a custom schema, you should pass it here to make sure the return type is correctly typed.
+
+### Manual typing of types
+
+If you're using types like `BlockNoteEditor`, `Block`, `PartialBlock` directly, you can get the correctly typed variants like this:
+
+```typescript
+type MyBlock = Block<
+  typeof schema.blockSchema,
+  typeof schema.inlineContentSchema,
+  typeof schema.styleSchema
+>;
+```
+
+Or even simpler, use the shorthands exposed by the schema:
+
+```typescript
+type MyBlockNoteEditor = typeof schema.BlockNoteEditor;
+type MyBlock = typeof schema.Block;
+type MyPartialBlock = typeof schema.PartialBlock;
+```
+
+### Automatically override all default types (experimental)
+
+Alternatively, the easiest way to get full type safety without any additional work is to override all default types with your custom schema, by using a custom type definition file. See this [example blocknote.d.ts](https://github.com/TypeCellOS/BlockNote/blob/main/examples/06-custom-schema/react-custom-styles/blocknote.d.ts.example). This is an experimental feature - we would love to hear your feedback on this approach.
diff --git a/docs/pages/docs/custom-schemas/custom-blocks.mdx b/docs/pages/docs/custom-schemas/custom-blocks.mdx
index b475ae9f1b..b247d5cb90 100644
--- a/docs/pages/docs/custom-schemas/custom-blocks.mdx
+++ b/docs/pages/docs/custom-schemas/custom-blocks.mdx
@@ -1,59 +1,28 @@
-import { Callout } from "nextra/components";
 import { Example } from "@/components/example";
 
 ## Custom Block Types
 
-In addition to the default block types that BlockNote offers, you can also make your own custom blocks. Take a look at the demo below, in which we add a custom alert block to a BlockNote editor, as well as a custom [Slash Menu Item](/docs/slash-menu#custom-items) to insert it.
+In addition to the default block types that BlockNote offers, you can also make your own custom blocks using React components. Take a look at the demo below, in which we add a custom alert block to a BlockNote editor, as well as a custom [Slash Menu Item](/docs/ui-components/suggestion-menus#changing-slash-menu-items) to insert it.
 
 <Example name="custom-schema/alert-block" />
 
-<Callout type={"info"}>While custom blocks open a lot of doors for what you can do with BlockNote, we're still working on the API and there are a few limitations for the kinds of blocks you can create. We'd love to hear your feedback on GitHub or in our Discord community!</Callout>
-
 ### Creating a Custom Block Type
 
-To define a custom block type, we use the `createReactBlockSpec` function, for which you can see the definition below:
+Use the `createReactBlockSpec` function to create a custom block type. This function takes two arguments:
 
 ```typescript
-type PropSchema<
-  PrimitiveType extends "boolean" | "number" | "string"
-> = Record<
-  string,
-  {
-    default: PrimitiveType;
-    values?: PrimitiveType[];
-  };
->
-
 function createReactBlockSpec(
-  blockConfig: {
-    type: string;
-    propSchema: PropSchema<"boolean" | "number" | "string">;
-    content: "inline" | "none"
-  },
-  blockImplementation: {
-    render: React.FC<{
-      block: Block;
-      editor: BlockNoteEditor;
-      contentRef: (node: HTMLElement | null) => void;
-    }>,
-    toExternalHTML?: React.FC<{
-      block: Block;
-      editor: BlockNoteEditor;
-      contentRef: (node: HTMLElement | null) => void;
-    }>,
-    parse?: (
-      element: HTMLElement
-    ) => PartialBlock["props"] | undefined;
-  }
-): BlockType;
+  blockConfig: CustomBlockConfig,
+  blockImplementation: ReactCustomBlockImplementation,
+);
 ```
 
-Let's look at our custom alert block from the demo, and go over each field in-depth to explain how it works:
+Let's look at our custom alert block from the demo, and go over each field to explain how it works:
 
 ```typescript
 const Alert = createReactBlockSpec(
   {
-    type: "alert" as const,
+    type: "alert",
     propSchema: {
       textAlignment: defaultProps.textAlignment,
       textColor: defaultProps.textColor,
@@ -61,7 +30,7 @@ const Alert = createReactBlockSpec(
         default: "warning",
         values: ["warning", "error", "info", "success"],
       },
-    } as const,
+    },
     content: "inline",
   },
   {
@@ -72,77 +41,108 @@ const Alert = createReactBlockSpec(
 );
 ```
 
-You can see that `createReactBlockSpec` takes two object arguments:
+#### Block Config (`CustomBlockConfig`)
 
-#### `blockConfig`
+The Block Config describes the shape of your custom blocks. Use it to specify the type, properties (props) and content your custom blocks should support:
 
-This defines the block's type, properties, and content type. It allows BlockNote to know how to handle manipulating the block internally and provide typing.
+```typescript
+type CustomBlockConfig = {
+  type: string;
+  content: "inline" | "none";
+  readonly propSchema: PropSchema;
+};
+```
 
 **`type`**
 
-Defines the name of the block, in this case, `alert`.
+Defines the identifier of the custom block.
 
 **`content`**
 
-As we saw in [Block Objects](/docs/blocks#block-objects), blocks can contain editable rich text which is represented as [Inline Content](/docs/inline-content). The `content` field allows your custom block to contain an editable rich-text field. Since we want to be able to type in our alert, we set it to `"inline"`.
+`inline` if your custom block should support rich text content, `none` if not.
+
+_In the alert demo, we want the user to be able to type text in our alert, so we set it to `"inline"`._
 
 **`propSchema`**
 
-This is an object which defines the props that the block should have. In this case, we want the block to have a `type` prop for the type of alert that we want (warning/error/info/success), so we add a `type` key. We also want basic styling options, so we add text alignment and text color from the [Default Block Properties](/docs/block-types#default-block-properties), using `defaultProps`. The value of each key is an object with a mandatory `default` field and an optional `values` field:
+The `PropSchema` specifies the props that the block supports. Block props (properties) are data stored with your Block in the document, and can be used to customize its appearance or behavior.
+
+```typescript
+type PropSchema<
+  PrimitiveType extends "boolean" | "number" | "string"
+> = Record<
+  string,
+  {
+    default: PrimitiveType;
+    values?: PrimitiveType[];
+  }
+>
+```
+
+`[key: string]` is the name of the prop, and the value is an object with two fields:
+
+- `default`: Specifies the prop's default value
 
-`default:` Stores the prop's default value, in this case `"warning"` for the default alert type.
+- `values` (optional): Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`
 
-`values:` Stores an array of strings that the prop can take. If `values` is not defined, BlockNote assumes the prop can be any string, so we want to make sure it can only take our 4 alert types.
+_In the alert demo, we add a `type` prop for the type of alert that we want (warning / error / info / success). We also want basic styling options, so we add text alignment and text color from the [Default Block Properties](/docs/block-types#default-block-properties)._
 
-#### `blockImplementation`
+#### Block Implementation (`ReactCustomBlockImplementation`)
 
-This defines how the block should be rendered in the editor, and how it should be parsed from and converted to HTML.
+The Block Implementation defines how the block should be rendered in the editor, and how it should be parsed from and converted to HTML.
+
+```typescript
+type ReactCustomBlockImplementation = {
+  render: React.FC<{
+    block: Block;
+    editor: BlockNoteEditor;
+    contentRef?: (node: HTMLElement | null) => void;
+  }>;
+  toExternalHTML?: React.FC<{
+    block: Block;
+    editor: BlockNoteEditor;
+    contentRef?: (node: HTMLElement | null) => void;
+  }>;
+  parse?: (element: HTMLElement) => PartialBlock["props"] | undefined;
+};
+```
 
 **`render`**
 
-This is a React component which defines how your custom block should be rendered in the editor, and takes three props:
+This is your React component which defines how your custom block should be rendered in the editor, and takes three React props:
 
-`block:` The block that should be rendered. This will always have the same type, props, and content as defined in the block's config.
+`block:` The block that should be rendered. Its type and props will match the type and PropSchema defined in the Block Config.
 
 `editor:` The BlockNote editor instance that the block is in.
 
-`contentRef:` A React `ref` that marks which element in your block is editable, This is only useful if your block config contains `content: "inline"`.
+`contentRef:` A React `ref` you can use to mark which element in your block is editable, this is only available if your block config contains `content: "inline"`.
+
+**`toExternalHTML`** (optional)
 
-**`toExternalHTML`**
+This component is used whenever the block is being exported to HTML for use outside BlockNote, for example when copying it to the clipboard. If it's not defined, BlockNote will just use `render` for the HTML conversion.
 
-This is identical in definition as `render`, but is used whenever the block is being exported to HTML for use outside BlockNote, namely when copying it to the clipboard. If it's not defined, BlockNote will just use `render` for the HTML conversion.
+_Note that your component passed to `toExternalHTML` is rendered and serialized in a separate React root, which means you can't use hooks that rely on React Contexts._
 
-**`parse`**
+**`parse`** (optional)
 
-This is a function that allows you to define which HTML elements should be parsed into your block when importing HTML from outside BlockNote, namely when pasting it from the clipboard. If the element should be parsed into your custom block, you should return the props that the block should be given. Otherwise, return `undefined`.
+The `parse` function defines how to parse HTML content into your block, for example when pasting contents from the clipboard. If the element should be parsed into your custom block, you return the props that the block should be given. Otherwise, return `undefined`.
 
 `element`: The HTML element that's being parsed.
 
 ### Adding Custom Blocks to the Editor
 
-Now, we need to tell BlockNote to use our font paragraph block by passing it to the editor in the `blockSpecs` option. Let's again look at the alert block from the demo as an example:
+Finally, create a BlockNoteSchema using the definition of your custom blocks:
 
 ```typescript
-// Our block specs, which contain the configs and implementations for blocks
-// that we want our editor to use.
-const blockSpecsWithAlert = {
-  // Adds all default blocks.
-  ...defaultBlockSpecs,
-  // Adds the font paragraph.
-  alert: Alert,
-};
-
-...
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    // enable the default blocks if desired
+    ...defaultBlockSpecs,
 
-// Creates a new editor instance.
-const editor = useBlockNote({
-  // Tells BlockNote which blocks to use.
-  blockSpecs: blockSpecsWithAlert,
+    // Add your own custom blocks:
+    alert: Alert,
+  },
 });
 ```
 
-Since we still want the editor to use the [Built-In Block Types](/docs/block-types#built-in-block-types), we add `defaultBlockSpecs` too. The key which we use for the alert block should also be the same string we use for its type. Make sure that this is always the case for your own custom blocks.
-
-The remaining code in this demo is for adding the alert block to the [Block Type Dropdown](/docs/formatting-toolbar#changing-the-block-type-dropdown) and [Slash Menu](/docs/slash-menu#custom-slash-menu-item-list), see those pages for more information.
-
-And we're done! You now know how to create custom blocks and add them to the editor. Head to [Manipulating Blocks](/docs/manipulating-blocks) to see what you can do with them in the editor.
+You can then instantiate your editor with this custom schema, as explained on the [Custom Schemas](/docs/custom-schemas) page.
diff --git a/docs/pages/docs/custom-schemas/custom-inline-content.mdx b/docs/pages/docs/custom-schemas/custom-inline-content.mdx
new file mode 100644
index 0000000000..5a30778be9
--- /dev/null
+++ b/docs/pages/docs/custom-schemas/custom-inline-content.mdx
@@ -0,0 +1,126 @@
+import { Example } from "@/components/example";
+
+## Custom Inline Content Types
+
+In addition to the default inline content types that BlockNote offers, you can also make your own custom inline content using React components. Take a look at the demo below, in which we add a custom mention tag to a BlockNote editor, as well as a custom [Suggestion Menu](/docs/ui-components/suggestion-menus#creating-suggestion-menus) to insert it.
+
+<Example name="ui-components/suggestion-menus-mentions" />
+
+### Creating a Custom Inline Content Type
+
+Use the `createReactInlineContentSpec` function to create a custom inline content type. This function takes two arguments:
+
+```typescript
+function createReactInlineContentSpec(
+  blockConfig: CustomInlineContentConfig,
+  blockImplementation: ReactInlineContentImplementation,
+);
+```
+
+Let's look at our custom mentions tag from the demo, and go over each field to explain how it works:
+
+```typescript
+const Mention = createReactInlineContentSpec(
+  {
+    type: "mention",
+    propSchema: {
+      user: {
+        default: "Unknown",
+      },
+    },
+    content: "none",
+  } as const,
+  {
+    render: (props) => (
+      ...
+    ),
+  }
+);
+```
+
+#### Inline Content Config (`CustomInlineContentConfig`)
+
+The Inline Content Config describes the shape of your custom inline content. Use it to specify the type, properties (props) and content your custom inline content should support:
+
+```typescript
+type CustomInlineContentConfig = {
+  type: string;
+  content: "styled" | "none";
+  readonly propSchema: PropSchema;
+};
+```
+
+**`type`**
+
+Defines the identifier of the custom inline content.
+
+**`content`**
+
+`styled` if your custom inline content should support [styled text content](/docs/editor-api/block-content#styled-text), `none` if not.
+
+_In the mentions demo, we want each mention to be a single, non-editable element, so we set it to `"none"`._
+
+**`propSchema`**
+
+The `PropSchema` specifies the props that the inline content supports. Inline content props (properties) are data stored with your inline content in the document, and can be used to customize its appearance or behavior.
+
+```typescript
+type PropSchema<
+  PrimitiveType extends "boolean" | "number" | "string"
+> = Record<
+  string,
+  {
+    default: PrimitiveType;
+    values?: PrimitiveType[];
+  }
+>
+```
+
+`[key: string]` is the name of the prop, and the value is an object with two fields:
+
+- `default`: Specifies the prop's default value
+
+- `values` (optional): Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`
+
+_In the mentions demo, we add a `user` prop for the user that's being mentioned._
+
+#### Inline Content Implementation (`ReactCustomInlineContentImplementation`)
+
+The Inline Content Implementation defines how the inline content should be rendered to HTML.
+
+```typescript
+type ReactCustomInlineContentImplementation = {
+  render: React.FC<{
+    inlineContent: InlineContent;
+    contentRef?: (node: HTMLElement | null) => void;
+  }>;
+};
+```
+
+**`render`**
+
+This is your React component which defines how your custom inline content should be rendered, and takes three React props:
+
+`inlineContent:` The inline content that should be rendered. Its type and props will match the type and PropSchema defined in the Inline Content Config.
+
+`contentRef:` A React `ref` you can use to mark which element in your inline content is editable, this is only available if your inline content config contains `content: "styled"`.
+
+_Note that since inline content is, by definition, inline, your component should also return an HTML inline element._
+
+### Adding Custom Inline Content to the Editor
+
+Finally, create a BlockNoteSchema using the definition of your custom inline content:
+
+```typescript
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    // enable the default inline content if desired
+    ...defaultInlineContentSpecs,
+
+    // Add your own custom inline content:
+    mention: Mention,
+  },
+});
+```
+
+You can then instantiate your editor with this custom schema, as explained on the [Custom Schemas](/docs/custom-schemas) page.
diff --git a/docs/pages/docs/custom-schemas/custom-styles.mdx b/docs/pages/docs/custom-schemas/custom-styles.mdx
new file mode 100644
index 0000000000..729d6415ce
--- /dev/null
+++ b/docs/pages/docs/custom-schemas/custom-styles.mdx
@@ -0,0 +1,96 @@
+import { Example } from "@/components/example";
+
+## Custom Style Types
+
+In addition to the default style types that BlockNote offers, you can also make your own custom styles using React components. Take a look at the demo below, in which we add a custom font style to a BlockNote editor, as well as a custom [Formatting Toolbar button](/docs/ui-components/formatting-toolbar) to set it.
+
+<Example name="custom-schema/font-style" />
+
+### Creating a Custom Style Type
+
+Use the `createReactStyleSpec` function to create a custom style type. This function takes two arguments:
+
+```typescript
+function createReactStyleSpec(
+  styleConfig: CustomStyleConfig,
+  styleImplementation: ReactStyleImplementation,
+);
+```
+
+Let's look at our custom font style from the demo, and go over each field to explain how it works:
+
+```typescript
+export const Font = createReactStyleSpec(
+  {
+    type: "font",
+    propSchema: "string",
+  },
+  {
+    render: (props) => (
+      <span style={{ fontFamily: props.value }} ref={props.contentRef} />
+    ),
+  }
+);
+```
+
+#### Style Config (`CustomStyleConfig`)
+
+The Style Config describes the shape of your custom style. Use it to specify the type, and whether the style should take a string value:
+
+```typescript
+type CustomStyleConfig = {
+  type: string;
+  readonly propSchema: "boolean" | "string";
+};
+```
+
+**`type`**
+
+Defines the identifier of the custom style.
+
+**`propSchema`**
+
+The `PropSchema` specifies whether the style can only be toggled (`"boolean"`), or whether it can take a string value (`"string"`). Having a string value is useful for e.g. setting a color on the style.
+
+_In the font style demo, we set this to `"string"` so we can store the font family._
+
+#### Style Implementation (`ReactCustomStyleImplementation`)
+
+The Style Implementation defines how the style should be rendered to HTML.
+
+```typescript
+type ReactCustomStyleImplementation = {
+  render: React.FC<{
+    value?: string;
+    contentRef: (node: HTMLElement | null) => void;
+  }>;
+};
+```
+
+**`render`**
+
+This is your React component which defines how your custom style should be rendered, and takes two React props:
+
+`value:` The string value of the style, this is only available if your style config contains `propSchema: "string"`.
+
+`contentRef:` A React `ref` to mark the editable element.
+
+_Note that in contrast to Custom Blocks and Inline Content, the `render` function of Custom Styles cannot access React Context or other state. They should be plain React functions analogous to the example._
+
+### Adding Custom Style to the Editor
+
+Finally, create a BlockNoteSchema using the definition of your custom style:
+
+```typescript
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    // enable the default styles if desired
+    ...defaultStyleSpecs,
+
+    // Add your own custom style:
+    font: Font,
+  },
+});
+```
+
+You can then instantiate your editor with this custom schema, as explained on the [Custom Schemas](/docs/custom-schemas) page.
diff --git a/docs/pages/docs/editor-api.mdx b/docs/pages/docs/editor-api.mdx
index b6fc4c620b..45cd273b96 100644
--- a/docs/pages/docs/editor-api.mdx
+++ b/docs/pages/docs/editor-api.mdx
@@ -1 +1,9 @@
-hello
\ No newline at end of file
+# Editor API
+
+BlockNote exposes an API to interact with the editor and its contents from code.
+These methods are directly available on the `BlockNoteEditor` object you created when instantiating your editor.
+
+- [Manipulating Blocks](/docs/editor-api/manipulating-blocks.md) explains how to read / update Blocks in the document.
+- [Manipulating Inline Content](/docs/editor-api/manipulating-inline-content.md) explains how to update / read data from selected text.
+- [Cursors & Selections](/docs/editor-api/cursor-selections) explains methods related to cursor positions and selections.
+- [Markdown & HTML](/docs/converting-blocks) explains how to convert the document to and from Markdown and HTML.
diff --git a/docs/pages/docs/editor-api/_meta.json b/docs/pages/docs/editor-api/_meta.json
index 325393d7bb..7d69575259 100644
--- a/docs/pages/docs/editor-api/_meta.json
+++ b/docs/pages/docs/editor-api/_meta.json
@@ -1,9 +1,6 @@
 {
-  "editor":"",
-  "blocks": "",
-  "default-blocks":"",
   "manipulating-blocks":"",
-  "block-content":"",
+  "manipulating-inline-content":"",
   "cursor-selections":"",
   "converting-blocks":""
 }
diff --git a/docs/pages/docs/editor-api/block-content.mdx b/docs/pages/docs/editor-api/block-content.mdx
deleted file mode 100644
index 45fa95ade0..0000000000
--- a/docs/pages/docs/editor-api/block-content.mdx
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Block Content
-description: TODO
-imageTitle: Block Content
-path: /docs/block-content
----
-
-TODO: where should this page be? and / or do we need API changes? (matthew has some thoughts on this)
-
-# Block Content
-
-The `content` field of a `Block` describes the content of the block. For all blocks except tables, this field is an array of `InlineContent` objects and describes the rich text content typed inside the block.
-
-In the example below, you can see how a sentence like "Hello __there__, [BlockNote](https://www.blocknotejs.org)" is represented as an array of `InlineContent` objects:
-
-TODO: DEMO
-
-
-## `InlineContent` Types
-
-`InlineContent` can be styled text (rich text), a link, or a mention:
-
-### Styled Text
-
-`StyledText` is a type of `InlineContent` used to display pieces of text with styles:
-
-```typescript
-type StyledText = {
-  type: "text";
-  text: string;
-  styles: Styles;
-};
-```
-
-`text:` The displayed text.
-
-`styles:` The styles that are applied to the text.
-
-**Styles Object**
-
-`StyledText` supports a variety of styles, including bold, underline, and text color, which are represented using a `Styles` object:
-
-```typescript
-type Styles = Partial<{
-  bold: true;
-  italic: true;
-  underline: true;
-  strikethrough: true;
-  textColor: string;
-  backgroundColor: string;
-}>;
-```
-
-### Links
-
-`Link` objects represent links to a URL:
-
-```typescript
-type Link = {
-  type: "link";
-  content: StyledText[];
-  href: string;
-};
-```
-
-`content:` The styled text used to display the link.
-
-`href:` The URL that opens when clicking the link.
-
-### Mentions
-
-TODO
-
-### Custom `InlineContent` and `Styles`
-
-You can create your own types of `InlineContent` and `Styles` using React. Skip to the Advanced "custom schemas" section to learn more about extending the editor. (TODO: link)
-
-## TableContent
-
-Most blocks use an array of `InlineContent` objects to describe their content, but tables are slightly different. Table blocks have `TableContent` as their content, in which each row contains an array of cells, that
-
-
-```typescript
-type TableContent = {
-  type: "tableContent";
-  rows: {
-    cells: InlineContent[][];
-  }[];
-};
-```
-
-## Editor Functions
-
-TODO: where should this be?
-
-While `InlineContent` objects are used to describe a block's content, they can be cumbersome to work with directly. Therefore, BlockNote exposes functions which make it easier to edit block contents.
-
-### Accessing Styles
-
-You can get the styles at the current [Text Cursor Position](/docs/cursor-selections#text-cursor) using the following function:
-
-```typescript
-getActiveStyles(): Styles;
-
-// Usage
-const styles = editor.getActiveStyles();
-```
-
-If a [Selection](/docs/cursor-selections#selections) is active, this function returns the active styles at the end of the selection.
-
-### Adding Styles
-
-You can add styles to the currently selected text using the following function:
-
-```typescript
-addStyles(styles: Styles): void;
-
-// Usage
-editor.addStyles({ textColor: "red" });
-```
-
-### Removing Styles
-
-You can remove styles from the currently selected text using the following function:
-
-```typescript
-removeStyles(styles: Styles): void;
-
-// Usage
-editor.removeStyles({ bold: true });
-```
-
-### Toggling Styles
-
-You can toggle styles on the currently selected text using the following function:
-
-```typescript
-toggleStyles(styles: Styles): void;
-
-// Usage
-editor.toggleStyles({ bold: true, italic: true });
-```
-
-### Accessing Selected Text
-
-You can get the currently selected text using the following function:
-
-```typescript
-getSelectedText(): string;
-
-// Usage
-const text = editor.getSelectedText();
-```
-
-### Accessing Selected Link
-
-You can get the URL of the link in the current selection the following function:
-
-```typescript
-getSelectedLink(): string | undefined;
-
-// Usage
-const linkUrl = editor.getSelectedLink();
-```
-
-If there are multiple links in the selection, this function only returns the last one's URL. If there are no links, returns `undefined`.
-
-### Creating a Link
-
-You can create a new link using the following function:
-
-```typescript
-createLink(url: string, text?: string): void;
-
-// Usage
-editor.createLink("https://www.blocknotejs.org/", "BlockNote");
-```
-
-If a [Selection](/docs/cursor-selections#selections) is active, the new link will replace the currently selected content.
diff --git a/docs/pages/docs/editor-api/blocks.mdx b/docs/pages/docs/editor-api/blocks.mdx
deleted file mode 100644
index ba9846bea5..0000000000
--- a/docs/pages/docs/editor-api/blocks.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Introduction to Blocks
-description: So, you've set up a BlockNote editor and your users can start writing content, organized in blocks. What are blocks exactly, and how do we access the blocks from code?
-imageTitle: Introduction to Blocks
----
-
-import { Example } from "@/components/example";
-
-[ ] Maybe move outside of "Editor API" or create separate "Editor basics" page?
-
-# Introduction to Blocks
-
-So, you've set up a BlockNote editor and your users can start writing content, organized in blocks. What are blocks exactly, and how do we access the blocks from code?
-
-## Editor Functions
-
-The `editor` returned from `useBlockNote` exposes functions to access and update blocks.
-We'll go through the full API later, but let's start with a simple example that shows the document (a list of blocks) in JSON.
-Play around with the editor to see how blocks are represented in JSON.
-
-<Example name="basic/block-objects" />
-
-## Block Objects
-
-So, BlockNote is centered around the idea of blocks. A block - like a heading, paragraph, or list item - contains a piece of content and optionally nested blocks:
-
-<img src="/img/screenshots/block_structure.png" alt="image" style={{width: "100%"}} />
-
-In code, the `Block` type is used to describe any given block in the editor:
-
-```typescript
-type Block = {
-  id: string;
-  type: string; // the block type, e.g. 'paragraph', 'heading'
-  props: Record<string, any>; // exact props depends on the Block type
-  content: InlineContent[] | TableContent;
-  children: Block[];
-};
-
-```
-
-
-
-
-
-`id:` The block's ID. Multiple blocks cannot share a single ID, and a block will keep the same ID from when it's created until it's removed.
-
-`type:` The block's type, such as a paragraph, heading, or list item. For an overview of built-in block types, see [Built-In Block Types](/docs/block-types#built-in-block-types).
-
-`props:` The block's properties, which are stored in a set of key/value pairs and specify how the block looks and behaves. Different block types have different props - see [Block Types & Properties](/docs/block-types) for more.
-
-`content:` The block's rich text content, represented as an array of `InlineContent` objects. This does not include content from any nested blocks. [Table](/docs/block-types#table) blocks are slightly different, as they contain `TableContent`, where each table cell is represented as an array of `InlineContent` objects. For more information on `InlineContent` and `TableContent` objects, visit [Inline Content](/docs/inline-content).
-
-`children:` Any blocks nested inside the block. The nested blocks are also represented using `Block` objects.
diff --git a/docs/pages/docs/editor-api/converting-blocks.mdx b/docs/pages/docs/editor-api/converting-blocks.mdx
index ce4fea298c..26f4b9fc95 100644
--- a/docs/pages/docs/editor-api/converting-blocks.mdx
+++ b/docs/pages/docs/editor-api/converting-blocks.mdx
@@ -10,15 +10,13 @@ import { Callout } from "nextra/components";
 
 # Markdown & HTML
 
-TODO: use hooks in examples
-TODO: use examples with content
-
 It's possible to export or import Blocks to and from Markdown and HTML.
 
 <Callout type={"warning"}>
     The functions to import/export to and from Markdown/HTML are considered "lossy"; some information might be dropped when you export Blocks to those formats.
 
-    To serialize Blocks to a non-lossy format (for example, to store the contents of the editor in your backend), simply export the built-in Block format using `JSON.stringify(editor.topLevelBlocks)`.
+    To serialize Blocks to a non-lossy format (for example, to store the contents of the editor in your backend), simply export the built-in Block format using `JSON.stringify(editor.document)`.
+
 </Callout>
 
 ## Markdown
diff --git a/docs/pages/docs/editor-api/cursor-selections.mdx b/docs/pages/docs/editor-api/cursor-selections.mdx
index 571a9b6e74..83f3429308 100644
--- a/docs/pages/docs/editor-api/cursor-selections.mdx
+++ b/docs/pages/docs/editor-api/cursor-selections.mdx
@@ -5,6 +5,7 @@ imageTitle: Cursor & Selections
 path: /docs/cursor-selections
 ---
 
+
 import { Example } from "@/components/example";
 
 # Cursor & Selections
@@ -59,7 +60,7 @@ setTextCursorPosition(
 editor.setTextCursorPosition(targetBlock, placement);
 ```
 
-`targetBlock:` The [identifier](/docs/manipulating-blocks#block-identifiers) of an existing block that the text cursor should be moved to.
+`targetBlock:` The [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) of an existing block that the text cursor should be moved to.
 
 `placement:` Whether the text cursor should be placed at the start or end of the block.
 
diff --git a/docs/pages/docs/editor-api/default-blocks.mdx b/docs/pages/docs/editor-api/default-blocks.mdx
deleted file mode 100644
index 024f858bca..0000000000
--- a/docs/pages/docs/editor-api/default-blocks.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: Default Blocks
-description: Overview of all default block types and their properties in BlockNote.
-imageTitle: Default Blocks
----
-
-import { Example } from "@/components/example";
-
-# Default blocks
-
-TBD: move to a separate "reference" section?
-
-BlockNote includes a number of built-in block types. The demo editor below displays all of them:
-
-TODO: demo
-
-## Reference
-
-Here's an overview of all default blocks and the properties they support:
-
-### Paragraph
-
-**Appearance**
-
-<img src="/img/screenshots/paragraph_type.png" alt="image" style={{height: "29px"}} />
-
-**Type & Props**
-
-```typescript
-type ParagraphBlock = {
-  id: string;
-  type: "paragraph";
-  props: DefaultProps;
-  content: InlineContent[];
-  children: Block[];
-};
-```
-
-### Heading
-
-**Appearance**
-
-<img src="/img/screenshots/heading_type.png" alt="image" style={{height: "77px"}} />
-
-**Type & Props**
-
-```typescript
-type HeadingBlock = {
-  id: string;
-  type: "heading";
-  props: {
-    level: 1 | 2 | 3 = 1;
-  } & DefaultProps;
-  content: InlineContent[];
-  children: Block[];
-};
-```
-
-`level:` The heading level, representing a title (`level: 1`), heading (`level: 2`), and subheading (`level: 3`).
-
-### Bullet List Item
-
-**Appearance**
-
-<img src="/img/screenshots/bullet_list_item_type.png" alt="image" style={{height: "29px"}} />
-
-**Type & Props**
-
-```typescript
-type BulletListItemBlock = {
-  id: string;
-  type: "bulletListItem";
-  props: DefaultProps;
-  content: InlineContent[];
-  children: Block[];
-};
-```
-
-### Numbered List Item
-
-**Appearance**
-
-<img src="/img/screenshots/numbered_list_item_type.png" alt="image" style={{height: "29px"}} />
-
-**Type & Props**
-
-```typescript
-type NumberedListItemBlock = {
-  id: string;
-  type: "numberedListItem";
-  props: DefaultProps;
-  content: InlineContent[];
-  children: Block[];
-};
-```
-
-### Image
-
-**Appearance**
-
-<img src="/img/screenshots/image_type.png" alt="image" style={{width: "100%"}} />
-
-**Type & Props**
-
-```typescript
-type ImageBlock = {
-  id: string;
-  type: "image";
-  props: {
-    url: string = "";
-    caption: string = "";
-    width: number = 512;
-  } & Omit<DefaultProps, "textAlignment">;
-  content: InlineContent[];
-  children: Block[];
-};
-```
-
-`url:` The image URL.
-
-`caption:` The image caption.
-
-`width:` The image width in pixels.
-
-### Table
-
-**Appearance**
-
-<img src="/img/screenshots/table_type.png" alt="image" style={{width: "70%"}} />
-
-**Type & Props**
-
-```typescript
-type TableBlock = {
-  id: string;
-  type: "table";
-  props: DefaultProps;
-  content: TableContent[];
-  children: Block[];
-};
-```
-
-## Default Block Properties
-
-While each type of block can have its own set of properties, there are some properties that all built-in block types have by default, which you can find in the definition for `DefaultProps`:
-
-```typescript
-type DefaultProps = {
-  backgroundColor: string = "default";
-  textColor: string = "default";
-  textAlignment: "left" | "center" | "right" | "justify" = "left";
-};
-```
-
-`backgroundColor:` The background color of the block, which also applies to nested blocks.
-
-`textColor:` The text color of the block, which also applies to nested blocks.
-
-`textAlignment:` The text alignment of the block.
-
-## Creating your own blocks
-
-You can create your own custom blocks using React. Skip to the Advanced "custom schemas" section to learn more about extending the editor. (TODO: link)
\ No newline at end of file
diff --git a/docs/pages/docs/editor-api/editor.mdx b/docs/pages/docs/editor-api/editor.mdx
deleted file mode 100644
index 01be64610a..0000000000
--- a/docs/pages/docs/editor-api/editor.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Editor Setup
-description: While you can get started with BlockNote in minutes, it's likely that you'll want to customize its features and functionality to better suit your app.
-imageTitle: Customizing the Editor
-path: /docs/editor
----
-
-TODO:
-[x] review API
-[x] what needs to be part of useBlockNote vs the component? 
-[ ] document instantiation / useBlockNote
-[ ] expose / document hooks
-[ ] document events
-[ ] explain controlled / uncontrolled
-[ ] Maybe move outside of "Editor API"?
-
-# Editor Setup
-
-While you can get started with BlockNote in minutes, it's likely that you'll
-want to customize its features and functionality to better suit your app.
-
-## Editor Options
-
-There are a number of options that you can pass to `useBlockNote()`, which you
-can use to customize the editor. You can find the full list of these below:
-
-```typescript
-export type BlockNoteEditorOptions = Partial<{
-  initialContent: PartialBlock[];
-  domAttributes: Record<string, string>;
-  slashMenuItems: ReactSlashMenuItem[];
-  defaultStyles: boolean;
-  uploadFile: (file: File) => Promise<string>;
-  collaboration: CollaborationOptions;
-  blockSpecs: BlockSpecs;
-  inlineContentSpecs: InlineContentSpecs;
-  styleSpecs: StyleSpecs;
-}>;
-```
-
-`initialContent:` The content that should be in the editor when it's created, represented as an array of [partial block objects](/docs/manipulating-blocks#partial-blocks).
-
-`domAttributes:` An object containing HTML attributes that should be added to various DOM elements in the editor. See [Adding DOM Attributes](/docs/theming#adding-dom-attributes) for more.
-
-`slashMenuItems:` The commands that are listed in the editor's [Slash Menu](/docs/slash-menu). If this option isn't defined, a default list of commands is loaded.
-
-`defaultStyles`: Whether to use the default font and reset the styles of `<p>`, `<li>`, `<h1>`, etc. elements that are used in BlockNote. Defaults to true if undefined.
-
-`uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the [Image Toolbar](/docs/image-toolbar).
-
-`collaboration`: Options for enabling real-time collaboration. See [Collaboration](/docs/collaboration) for more info.
-
-`blockSpecs` (_advanced_): _advanced_ Specifications for Custom Blocks. See [Block Specs](/docs/block-specs) more info. 
-
-`inlineContentSpecs` (_advanced_): Specifications for Custom Inline Content. See [Inline Content Specs](/docs/inline-content-specs) for more info.
-
-`styleSpecs` (_advanced_): Specifications for Custom Styles. See [Style Specs](/docs/style-specs) for more info.
-
-
-## `useBlockNote`
-
-## `BlockNoteView`
-
-- editable
-- events
-
-
-### Removing UI Elements
- 
-TODO: probably just explain the props of BlockNoteView
-
-In the following example, we remove the Side Menu from the editor. This is done by adding all `Positioner` components as children of `BlockNoteView`, for each UI element except the Side Menu:
-
-<Example name="ui-components/ui-elements-remove" />
-
-Each further `Positioner` component you remove will remove its corresponding UI element from the editor. If you only want to keep the editor itself, add only an empty fragment (`<></>`) to `BlockNoteView`'s children.
-
diff --git a/docs/pages/docs/editor-api/manipulating-blocks.mdx b/docs/pages/docs/editor-api/manipulating-blocks.mdx
index 3b72676d1b..24b0dd63fa 100644
--- a/docs/pages/docs/editor-api/manipulating-blocks.mdx
+++ b/docs/pages/docs/editor-api/manipulating-blocks.mdx
@@ -9,18 +9,17 @@ path: /docs/manipulating-blocks
 
 Below, we explain the methods on `editor` you can use to read Blocks from the editor, and how to create / remove / update Blocks:
 
-- topLevelBlocks
-- getBlock
-- forEachBlock
-- insertBlocks
-- updateBlock
-- removeBlocks
-- replaceBlocks
-- canNestBlock
-- nestBlock
-- canUnnestBlock
-
-(TODO: link)
+- [`get document`](/docs/editor-api/manipulating-blocks#getting-the-document)
+- [`getBlock`](/docs/editor-api/manipulating-blocks#getting-a-specific-block)
+- [`forEachBlock`](/docs/editor-api/manipulating-blocks#traversing-all-blocks)
+- [`insertBlocks`](/docs/editor-api/manipulating-blocks#inserting-new-blocks)
+- [`updateBlock`](/docs/editor-api/manipulating-blocks#updating-blocks)
+- [`removeBlocks`](/docs/editor-api/manipulating-blocks#removing-blocks)
+- [`replaceBlocks`](/docs/editor-api/manipulating-blocks#replacing-blocks)
+- [`canNestBlock`](/docs/editor-api/manipulating-blocks#nesting-blocks)
+- [`nestBlock`](/docs/editor-api/manipulating-blocks#nesting-blocks)
+- [`canUnnestBlock`](/docs/editor-api/manipulating-blocks#un-nesting-blocks)
+- [`unnestBlock`](/docs/editor-api/manipulating-blocks#un-nesting-blocks)
 
 ## Common types
 
@@ -28,7 +27,7 @@ Before we dive into the methods, let's discuss some common types used in paramet
 
 ### Block Identifiers
 
-The methods to access, insert, update, remove, or replace blocks, can require a `BlockIdentifier` as reference to an existing block in the document. 
+The methods to access, insert, update, remove, or replace blocks, can require a `BlockIdentifier` as reference to an existing block in the document.
 This is either a `string` representing the block ID, or a `Block` object from which the ID is taken:
 
 ```typescript
@@ -37,7 +36,7 @@ type BlockIdentifier = string | Block;
 
 ### Partial Blocks
 
-When retrieving blocks from the editor, you always receive complete `Block` objects. 
+When retrieving blocks from the editor, you always receive complete `Block` objects.
 For updating or creating blocks, you don't need to pass all properties and you can use a `PartialBlock` type instead:
 
 ```typescript
@@ -52,25 +51,24 @@ type PartialBlock = {
 
 `PartialBlock` objects are almost the same as regular `Block` objects, but with all members optional and partial `props`. This makes updating or creating simpler blocks much easier. We'll see this below.
 
-
 ## Accessing Blocks
 
 There are a few different ways to retrieve Blocks from the editor:
 
-### Getting All Top-Level Blocks
+### Getting the Document
 
-Retrieve a snapshot of all top-level (non-nested) blocks in the editor using the following call:
+Retrieve a snapshot of the document (all top-level, non-nested blocks) in the editor using the following call:
 
 ```typescript
-topLevelBlocks: Block[];
+document: Block[];
 
 // Usage
-const blocks = editor.topLevelBlocks;
+const blocks = editor.document;
 ```
 
 `returns:` The document; a snapshot of all top-level (non-nested) blocks in the editor.
 
-We  already used this for the demo in [Getting Familiar with Block Objects](/docs/blocks#demo-getting-familiar-with-block-objects), to show the JSON representation of blocks below the editor.
+We already used this for the [Editor Content in JSON](/docs/editor-basics/content-structure#editor-content-in-json) demo.
 
 ### Getting a Specific Block
 
@@ -83,7 +81,7 @@ getBlock(blockIdentifier: BlockIdentifier): Block | undefined;
 const block = editor.getBlock(blockIdentifier);
 ```
 
-`blockIdentifier:` The [identifier](#block-identifiers) of an existing block that should be retrieved.
+`blockIdentifier:` The [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) of an existing block that should be retrieved.
 
 `returns:` The block that matches the identifier, or `undefined` if no matching block was found.
 
@@ -107,7 +105,7 @@ editor.forEachBlock((block) => {...});
 
 ### Getting the hovered / selected Block
 
-See [Cursor & Selections](/docs/cursor-selections) to learn how to retrieve the block a user is interacting with.
+See [Cursor & Selections](/docs/editor-api/cursor-selections) to learn how to retrieve the block a user is interacting with.
 
 ## Inserting New Blocks
 
@@ -124,13 +122,13 @@ insertBlocks(
 editor.insertBlocks([{type: "paragraph", text: "Hello World"}], referenceBlock, placement)
 ```
 
-`blocksToInsert:` An array of [partial blocks](#partial-blocks) that should be inserted.
+`blocksToInsert:` An array of [partial blocks](/docs/editor-api/manipulating-blocks#partial-blocks) that should be inserted.
 
-`referenceBlock:` An [identifier](#block-identifiers) for an existing block, at which the new blocks should be inserted.
+`referenceBlock:` An [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) for an existing block, at which the new blocks should be inserted.
 
 `placement:` Whether the blocks should be inserted just before, just after, or nested inside the `referenceBlock`. Inserts the blocks at the start of the existing block's children if `"nested"` is used.
 
-If a block's `id` is undefined, BlockNote generates one automatically. 
+If a block's `id` is undefined, BlockNote generates one automatically.
 
 The method throws an error if the reference block could not be found.
 
@@ -148,11 +146,11 @@ updateBlock(
 editor.updateBlock(blockToUpdate, { type: "paragraph" });
 ```
 
-`blockToUpdate:` The [identifier](#block-identifiers) of an existing block that should be updated.
+`blockToUpdate:` The [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) of an existing block that should be updated.
 
-`update:` A [partial block](#partial-blocks) which defines how the existing block should be changed.
+`update:` A [partial blocks](/docs/editor-api/manipulating-blocks#partial-blocks) which defines how the existing block should be changed.
 
-Since `blockToUpdate` is a `PartialBlock` object, some fields might not be defined. These undefined fields are kept as-is from the existing block. 
+Since `blockToUpdate` is a `PartialBlock` object, some fields might not be defined. These undefined fields are kept as-is from the existing block.
 
 Throws an error if the block to update could not be found.
 
@@ -169,7 +167,7 @@ removeBlocks(
 editor.removeBlocks(blocksToRemove)
 ```
 
-`blocksToRemove:` An array of [identifiers](#block-identifiers) for existing blocks that should be removed.
+`blocksToRemove:` An array of [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) for existing blocks that should be removed.
 
 Throws an error if any of the blocks could not be found.
 
@@ -187,23 +185,23 @@ replaceBlocks(
 editor.replaceBlocks(blocksToRemove, blocksToInsert)
 ```
 
-`blocksToRemove:` An array of [identifiers](#block-identifiers) for existing blocks that should be replaced.
+`blocksToRemove:` An array of [identifier](/docs/editor-api/manipulating-blocks#block-identifiers) for existing blocks that should be replaced.
 
-`blocksToInsert:` An array of [partial blocks](#partial-blocks) that the existing ones should be replaced with.
+`blocksToInsert:` An array of [partial blocks](/docs/editor-api/manipulating-blocks#partial-blocks) that the existing ones should be replaced with.
 
-If the blocks that should be removed are not adjacent or are at different nesting levels, `blocksToInsert` will be inserted at the position of the first block in `blocksToRemove`. 
+If the blocks that should be removed are not adjacent or are at different nesting levels, `blocksToInsert` will be inserted at the position of the first block in `blocksToRemove`.
 
 Throws an error if any of the blocks to remove could not be found.
 
 ## Nesting & Un-nesting Blocks
 
-BlockNote also provides functions to nest & un-nest the block containing the [Text Cursor](/docs/cursor-selections#text-cursor).
+BlockNote also provides functions to nest & un-nest the block containing the [Text Cursor](/docs/editor-api/cursor-selections#text-cursor).
 
 ### Nesting Blocks
 
-TODO: this API seems different as it doesn't require a block id. should we make it possible to pass an identifier?
+{/* TODO: this API seems different as it doesn't require a block id. should we make it possible to pass an identifier? */}
 
-Use `canNestBlock` to check whether the block containing the [Text Cursor](/docs/cursor-selections#text-cursor) can be nested (i.e. if there is a block above it at the same nesting level):
+Use `canNestBlock` to check whether the block containing the [Text Cursor](/docs/editor-api/cursor-selections#text-cursor) can be nested (i.e. if there is a block above it at the same nesting level):
 
 ```typescript
 canNestBlock(): boolean;
@@ -223,7 +221,7 @@ editor.nestBlock();
 
 ### Un-nesting Blocks
 
-Use `canUnnestBlock` to check whether the block containing the [Text Cursor](/docs/cursor-selections#text-cursor) can be un-nested (i.e. if it's nested in another block):
+Use `canUnnestBlock` to check whether the block containing the [Text Cursor](/docs/editor-api/cursor-selections#text-cursor) can be un-nested (i.e. if it's nested in another block):
 
 ```typescript
 canUnnestBlock(): boolean;
@@ -239,4 +237,4 @@ unnestBlock(): void;
 
 // Usage
 editor.unnestBlock();
-```
\ No newline at end of file
+```
diff --git a/docs/pages/docs/editor-api/manipulating-inline-content.mdx b/docs/pages/docs/editor-api/manipulating-inline-content.mdx
new file mode 100644
index 0000000000..0f90561e11
--- /dev/null
+++ b/docs/pages/docs/editor-api/manipulating-inline-content.mdx
@@ -0,0 +1,93 @@
+---
+title: Manipulating Inline Content
+description: TODO
+imageTitle: Manipulating Inline Content
+path: /docs/block-content
+---
+
+# Manipulating Inline Content
+
+`BlockNoteEditor` exposes a number of functions to interact with the currently selected content.
+
+## Accessing Styles
+
+You can get the styles at the current [Text Cursor Position](/docs/editor-api/cursor-selections#text-cursor) using the following function:
+
+```typescript
+getActiveStyles(): Styles;
+
+// Usage
+const styles = editor.getActiveStyles();
+```
+
+If a [Selection](/docs/editor-api/cursor-selections#selections) is active, this function returns the active styles at the end of the selection.
+
+## Adding Styles
+
+You can add styles to the currently selected text using the following function:
+
+```typescript
+addStyles(styles: Styles): void;
+
+// Usage
+editor.addStyles({ textColor: "red" });
+```
+
+## Removing Styles
+
+You can remove styles from the currently selected text using the following function:
+
+```typescript
+removeStyles(styles: Styles): void;
+
+// Usage
+editor.removeStyles({ bold: true });
+```
+
+## Toggling Styles
+
+You can toggle styles on the currently selected text using the following function:
+
+```typescript
+toggleStyles(styles: Styles): void;
+
+// Usage
+editor.toggleStyles({ bold: true, italic: true });
+```
+
+## Accessing Selected Text
+
+You can get the currently selected text using the following function:
+
+```typescript
+getSelectedText(): string;
+
+// Usage
+const text = editor.getSelectedText();
+```
+
+## Accessing Selected Link
+
+You can get the URL of the link in the current selection the following function:
+
+```typescript
+getSelectedLink(): string | undefined;
+
+// Usage
+const linkUrl = editor.getSelectedLink();
+```
+
+If there are multiple links in the selection, this function only returns the last one's URL. If there are no links, returns `undefined`.
+
+## Creating a Link
+
+You can create a new link using the following function:
+
+```typescript
+createLink(url: string, text?: string): void;
+
+// Usage
+editor.createLink("https://www.blocknotejs.org/", "BlockNote");
+```
+
+If a [Selection](/docs/editor-api/cursor-selections#selections) is active, the new link will replace the currently selected content.
diff --git a/docs/pages/docs/editor-basics.mdx b/docs/pages/docs/editor-basics.mdx
new file mode 100644
index 0000000000..08889d9421
--- /dev/null
+++ b/docs/pages/docs/editor-basics.mdx
@@ -0,0 +1,5 @@
+# Editor basics
+
+In this section, we first explore the [methods to setup your editor](/docs/editor-basics/setup).
+Then, we'll dive into the structure of documents, Blocks and rich text content in BlockNote ([document structure](/docs/editor-basics/document-structure)).
+We'll also go over the blocks and content types that are part of BlockNote's [default built-in schema](/docs/editor-basics/default-schema).
diff --git a/docs/pages/docs/editor-basics/_meta.json b/docs/pages/docs/editor-basics/_meta.json
new file mode 100644
index 0000000000..56345dccb5
--- /dev/null
+++ b/docs/pages/docs/editor-basics/_meta.json
@@ -0,0 +1,5 @@
+{
+  "setup": "Editor Setup",
+  "document-structure": "Document Structure",
+  "default-schema": "Default Schema"
+}
diff --git a/docs/pages/docs/editor-basics/default-schema.mdx b/docs/pages/docs/editor-basics/default-schema.mdx
new file mode 100644
index 0000000000..4f2cebf656
--- /dev/null
+++ b/docs/pages/docs/editor-basics/default-schema.mdx
@@ -0,0 +1,191 @@
+---
+title: Default Content Types
+description: BlockNote supports a variety on built-in block and inline content types that are included in the editor by default.
+imageTitle: Default Content Types
+---
+
+import { Example } from "@/components/example";
+
+# Default Content Types
+
+BlockNote supports a number of built-in blocks, inline content types, and styles that are included in the editor by default. This is called the Default Schema. To create your own content types, see [Custom Schemas](/docs/custom-schemas).
+
+## Default Blocks
+
+Quickly explore the default blocks in this demo:
+
+<Example name="basic/all-blocks" />
+
+### Reference
+
+Let's look more in-depth at the default blocks and the properties they support:
+
+#### Paragraph
+
+**Type & Props**
+
+```typescript
+type ParagraphBlock = {
+  id: string;
+  type: "paragraph";
+  props: DefaultProps;
+  content: InlineContent[];
+  children: Block[];
+};
+```
+
+#### Heading
+
+**Type & Props**
+
+```typescript
+type HeadingBlock = {
+  id: string;
+  type: "heading";
+  props: {
+    level: 1 | 2 | 3 = 1;
+  } & DefaultProps;
+  content: InlineContent[];
+  children: Block[];
+};
+```
+
+`level:` The heading level, representing a title (`level: 1`), heading (`level: 2`), and subheading (`level: 3`).
+
+#### Bullet List Item
+
+**Type & Props**
+
+```typescript
+type BulletListItemBlock = {
+  id: string;
+  type: "bulletListItem";
+  props: DefaultProps;
+  content: InlineContent[];
+  children: Block[];
+};
+```
+
+#### Numbered List Item
+
+**Type & Props**
+
+```typescript
+type NumberedListItemBlock = {
+  id: string;
+  type: "numberedListItem";
+  props: DefaultProps;
+  content: InlineContent[];
+  children: Block[];
+};
+```
+
+#### Image
+
+**Type & Props**
+
+```typescript
+type ImageBlock = {
+  id: string;
+  type: "image";
+  props: {
+    url: string = "";
+    caption: string = "";
+    width: number = 512;
+  } & DefaultProps;
+  content: undefined;
+  children: Block[];
+};
+```
+
+`url:` The image URL.
+
+`caption:` The image caption.
+
+`width:` The image width in pixels.
+
+#### Table
+
+**Type & Props**
+
+```typescript
+type TableBlock = {
+  id: string;
+  type: "table";
+  props: DefaultProps;
+  content: TableContent[];
+  children: Block[];
+};
+```
+
+### Default Block Properties
+
+There are some default block props that BlockNote uses for the built-in blocks:
+
+```typescript
+type DefaultProps = {
+  backgroundColor: string = "default";
+  textColor: string = "default";
+  textAlignment: "left" | "center" | "right" | "justify" = "left";
+};
+```
+
+`backgroundColor:` The background color of the block, which also applies to nested blocks.
+
+`textColor:` The text color of the block, which also applies to nested blocks.
+
+`textAlignment:` The text alignment of the block.
+
+## Default Inline Content
+
+By default, `InlineContent` (the content of text blocks like paragraphs) in BlockNote can either be a `StyledText` or a `Link` object. Inspect them in the editor below:
+
+<Example name="basic/all-inline-content" />
+
+### Reference
+
+Here's an overview of all default inline content and the properties they support:
+
+#### Styled Text
+
+`StyledText` is a type of `InlineContent` used to display pieces of text with styles:
+
+```typescript
+type StyledText = {
+  type: "text";
+  text: string;
+  styles: Styles;
+};
+```
+
+#### Link
+
+`Link` objects represent links to a URL:
+
+```typescript
+type Link = {
+  type: "link";
+  content: StyledText[];
+  href: string;
+};
+```
+
+## Default Styles
+
+The default text formatting options in BlockNote are represented by the `Styles` in the default schema:
+
+```typescript
+type Styles = {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  textColor: string;
+  backgroundColor: string;
+};
+```
+
+## Creating New Block or Inline Content Types
+
+You can also extend your editor and create your own Blocks, Inline Content or Styles using React.
+Skip to [Custom Schemas (advanced)](/docs/custom-schemas) to learn how to do this.
diff --git a/docs/pages/docs/editor-basics/document-structure.mdx b/docs/pages/docs/editor-basics/document-structure.mdx
new file mode 100644
index 0000000000..1cc95a1682
--- /dev/null
+++ b/docs/pages/docs/editor-basics/document-structure.mdx
@@ -0,0 +1,103 @@
+---
+description: Learn how documents (the content of the rich text editor) are structured to make the most out of BlockNote.
+---
+
+import { Example } from "@/components/example";
+
+# Document Structure
+
+Learn how documents (the content of the rich text editor) are structured to make the most out of BlockNote.
+
+## Blocks
+
+Each BlockNote document is made up of a list of blocks.
+A block is a piece of content like a paragraph, heading, list item or image. Blocks can be dragged around by users in the editor. A block contains a piece of content and optionally nested (child) blocks:
+
+<img
+  src="/img/screenshots/block_structure.png"
+  alt="image"
+  style={{ width: "100%", marginTop: "1em" }}
+/>
+
+### Block Objects
+
+The `Block` type is used to describe any given block in the editor:
+
+```typescript
+type Block = {
+  id: string;
+  type: string;
+  props: Record<string, boolean | number | string>;
+  content: InlineContent[] | TableContent | undefined;
+  children: Block[];
+};
+```
+
+`id:` The block's ID. Multiple blocks cannot share a single ID, and a block will keep the same ID from when it's created until it's removed.
+
+`type:` The block's type, such as a paragraph, heading, or list item. For an overview of built-in block types, see [Default Blocks](/docs/editor-basics/default-content-types#default-blocks).
+
+`props:` The block's properties, which is a set of key/value pairs that further specify how the block looks and behaves. Different block types have different props - see [Default Blocks](/docs/editor-basics/default-content-types#default-blocks) for more.
+
+`content:` The block's rich text content, usually represented as an array of `InlineContent` objects. This does not include content from any nested blocks. Read on to [Inline Content](/docs/editor-basics/content-structure#inline-content) for more on this.
+
+`children:` Any blocks nested inside the block. The nested blocks are also represented using `Block` objects.
+
+### Editor Content in JSON
+
+The demo below shows the editor contents (document) in JSON. It's basically an array of `Block` objects that updates as you type in the editor:
+
+<Example name="basic/block-objects" />
+
+## Inline Content
+
+The `content` field of a block contains the rich-text content of a block. This is defined as an array of `InlineContent` objects. Inline content can either be styled text or a link (or a custom inline content type if you customize the editor schema).
+
+### Inline Content Objects
+
+The `InlineContent` type is used to describe a piece of inline content:
+
+```typescript
+type Link = {
+  type: "link";
+  content: StyledText[];
+  href: string;
+};
+
+type StyledText = {
+  type: "text";
+  text: string;
+  styles: Styles;
+};
+
+type InlineContent = Link | StyledText;
+```
+
+The `styles` property is explained below.
+
+### Other types of Block Content
+
+While most blocks use an array of `InlineContent` objects to describe their content (e.g.: paragraphs, headings, list items). Some blocks, like [images](/docs/editor-basics/default-content-types#image), don't contain any rich text content, so their `content` fields will be `undefined`.
+
+[Tables](/docs/editor-basics/default-content-types#table) are also different, as they contain `TableContent`. Here, each table cell is represented as an array of `InlineContent` objects:
+
+```typescript
+type TableContent = {
+  type: "tableContent";
+  rows: {
+    cells: InlineContent[][];
+  }[];
+};
+```
+
+## Styles and rich text
+
+The `styles` property of `StyledText` objects is used to describe the rich text styles (e.g.: bold, italic, color) or other attributes of a piece of text. It's a set of key / value pairs that specify the styles applied to the text.
+
+See the [Default Schema](/docs/editor-basics/default-schema) to learn which styles are included in BlockNote by default.
+
+## Demo: Block Content
+
+In the demo below, you can explore how the block content and styles are represented in JSON by outputting only the `content` field of each top level block.
+
+<Example name="basic/inline-content-objects" />
diff --git a/docs/pages/docs/editor-basics/setup.mdx b/docs/pages/docs/editor-basics/setup.mdx
new file mode 100644
index 0000000000..05a926253d
--- /dev/null
+++ b/docs/pages/docs/editor-basics/setup.mdx
@@ -0,0 +1,135 @@
+---
+description: Learn how to setup your BlockNote editor using the `useCreateBlockNote` hook and the ``BlockNoteView` component.
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# Editor Setup
+
+You can customize your editor when you instantiate it. Let's take a closer looks at the basic methods and components to set up your BlockNote editor.
+
+## `useCreateBlockNote` hook
+
+Create a new `BlockNoteEditor` by calling the `useCreateBlockNote` hook. This instantiates a new editor and its required state. You can later interact with the editor using the Editor API and pass it to the `BlockNoteView` component.
+
+```ts
+function useCreateBlockNote(
+  options?: BlockNoteEditorOptions,
+  deps?: React.DependencyList = [],
+): BlockNoteEditor;
+
+type BlockNoteEditorOptions = {
+  initialContent?: PartialBlock[];
+  domAttributes?: Record<string, string>;
+  defaultStyles?: boolean;
+  uploadFile?: (file: File) => Promise<string>;
+  collaboration?: CollaborationOptions;
+  schema?: BlockNoteSchema;
+};
+```
+
+The hook takes two optional parameters:
+
+**options:** An object containing options for the editor:
+
+`initialContent:` The content that should be in the editor when it's created, represented as an array of [partial block objects](/docs/manipulating-blocks#partial-blocks).
+
+`domAttributes:` An object containing HTML attributes that should be added to various DOM elements in the editor. See [Adding DOM Attributes](/docs/theming#adding-dom-attributes) for more.
+
+`defaultStyles`: Whether to use the default font and reset the styles of `<p>`, `<li>`, `<h1>`, etc. elements that are used in BlockNote. Defaults to true if undefined.
+
+`uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the [Image Toolbar](/docs/image-toolbar). TODO
+
+`collaboration`: Options for enabling real-time collaboration. See [Collaboration](/docs/collaboration) for more info.
+
+`schema` (_advanced_): The editor schema if you want to extend your editor with custom blocks, styles, or inline content [Custom Schemas](/docs/custom-schemas).
+
+**deps:** Dependency array that's internally passed to `useMemo`. A new editor will only be created when this array changes.
+
+<Callout type="info" emoji={"💡"}>
+  <strong>Manually creating the editor (`BlockNoteEditor.create`)</strong>
+  <p>
+    The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around
+    the `BlockNoteEditor.create` method. You can use this method directly if you
+    want to control the editor lifecycle manually. For example, we do this in
+    the [Saving & Loading example](/examples/basic/saving-loading) to delay the
+    editor creation until some content has been fetched from an external data
+    source.
+  </p>
+</Callout>
+
+## Rendering the Editor with `<BlockNoteView>`
+
+Use the `<BlockNoteView>` component to render the `BlockNoteEditor` instance you just created:
+
+```tsx
+const editor = useCreateBlockNote();
+
+return <BlockNoteView editor={editor} />;
+```
+
+### Props
+
+There are a number of additional props you can pass to `BlockNoteView`. You can find the full list of these below:
+
+```typescript
+export type BlockNoteViewProps = {
+  editor: BlockNoteEditor;
+  editable?: boolean;
+  onSelectionChange?: () => void;
+  onChange?: () => void;
+  theme?:
+    | "light"
+    | "dark"
+    | Theme
+    | {
+        light: Theme;
+        dark: Theme;
+      };
+  formattingToolbar?: boolean;
+  hyperlinkToolbar?: boolean;
+  sideMenu?: boolean;
+  slashMenu?: boolean;
+  imageToolbar?: boolean;
+  tableHandles?: boolean;
+  children?:
+} & HTMLAttributes<HTMLDivElement>;
+```
+
+`editor`: The `BlockNoteEditor` instance to render.
+
+`editable`: Whether the editor should be editable.
+
+`onSelectionChange`: Callback for when the editor selection changes.
+
+`onChange`: Callback for when the editor selection or content changes.
+
+`theme`: The editor's theme, see [Themes](/docs/styling-theming/themes) for more about this.
+
+`formattingToolbar`: Whether the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) should be enabled.
+
+`hyperlinkToolbar`: Whether the Hyperlink Toolbar should be enabled.
+
+`sideMenu`: Whether the [Block Side Menu](/docs/ui-components/side-menu) should be enabled.
+
+`slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
+
+`imageToolbar`: Whether the Image Toolbar should be enabled.
+
+`tableHandles`: Whether the Table Handles should be enabled.
+
+`children`: Pass child elements to the `BlockNoteView` to create or customize toolbars, menus, or other UI components. See [UI Components](/docs/ui-components) for more.
+
+Additional props passed are forwarded to the HTML `div` element BlockNote renders internally.
+
+<Callout type="info" emoji={"💡"}>
+  <strong>Uncontrolled component</strong>
+  <p>
+    Note that the `BlockNoteView` component is an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). 
+    This means you don't pass in the editor content directly as a prop. You can use the `initialContent` option in the `useCreateBlockNote` hook to set the initial content of the editor (similar to the `defaultValue` prop in a regular React `<textarea>`).
+  </p>
+  <p>
+    BlockNote handles the complexities and performance optimizations of managing editor state internally. You can interact with the editor content using the [Editor API](/docs/editor-api).
+  </p>
+</Callout>
diff --git a/docs/pages/docs/glossary.mdx b/docs/pages/docs/glossary.mdx
deleted file mode 100644
index fafdbe06dd..0000000000
--- a/docs/pages/docs/glossary.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Glossary
-description: Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app!
-imageTitle: Quickstart
-path: /docs/quickstart
----
-
-import { Callout } from "nextra/components";
-
-- _Editor_: TBD
-- _Document_: The document a user creates with BlockNote, which is a collection of blocks.
-- _Block_: A single unit of content in a document. Blocks can be text, images, headings, or other types of content. See [TODO]
-- _Block Content_: The content of a block, such as the text in a paragraph or the cells in a table. See [TODO]
-- _Styles_: The styles applied to a piece of rich text (`StyledText`), such as bold or italic text.  See [TODO]
-- _Block Children_: The blocks that are nested inside another block (when the user presses `tab`, for example)
-- _UI Components_: TODO
-- _Cursor_: TODO
-- _Selection_: TODO
diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
index 27a0dcdf2e..c2819c0896 100644
--- a/docs/pages/docs/index.mdx
+++ b/docs/pages/docs/index.mdx
@@ -4,13 +4,7 @@ imageTitle: Introduction to BlockNote
 path: /docs/introduction
 ---
 
-import {Example} from "@/components/example";
-
-TODO:
-- make shorter?
-- add "Main Features"? similar to nextjs
-- Remove example?
-- Add cards to bottom?
+import { Example } from "@/components/example";
 
 # Introduction to BlockNote
 
@@ -18,24 +12,28 @@ TODO:
 
 BlockNote is a block-based rich-text editor for [React](https://reactjs.org/), focused on providing a great out-of-the-box experience with minimal setup.
 
-With BlockNote, we want to make it easy for developers to add a next-generation text editing experience to their app, with a UX that's on-par with industry leaders like Notion or Coda.
-
-Unlike other rich-text editor libraries, BlockNote organizes documents into blocks, giving them a more rigid structure and making it easy to interact with the document from code.
+With BlockNote, we want to make it easy for developers to add a next-generation text editing experience to their app, with a UX that's on-par with industry leaders like Notion, Google Docs or Coda.
 
-Conceptually, you can think of a block as a paragraph, heading, image, or some other individual piece of content. Blocks can have more blocks nested inside of them, and can also be moved by dragging and dropping them inside or around each other.
+Unlike other rich-text editor libraries, BlockNote organizes documents into blocks. This makes it easy for the user to organize their document, and for developers to interact with the document from code.
 
 BlockNote has been created with extensibility in mind. You can customize the document, create custom block types and customize UX elements like menu items. Advanced users can even create their own UI from scratch and use BlockNote with vanilla JavaScript instead of React.
 
+- Jump right into the [quickstart](/docs/quickstart) to get started
+- Learn about [blocks and the editor basics](/docs/editor-basics) and how to interact with the editor using the [editor API](/docs/editor-api)
+- See [UI Components](/docs/ui-components) to customize built-in menus and toolbars and [Styling & Theming](/docs/styling-theming) to customize the look and feel of the editor
+- Further extend the editor with your own Blocks using [Custom Schemas](/docs/custom-schemas) or add [Real-Time Collaboration](/docs/advanced/real-time-collaboration)
+
 ## Why BlockNote?
 
 There are plenty of libraries out there for creating rich-text editors. In fact, BlockNote is built on top of the widely used [ProseMirror](https://prosemirror.net/) and [TipTap](https://tiptap.dev/).
 
-As powerful as they are, these libraries often have quite a steep learning-curve and require you to customize every single detail of your editor, and then you still need to add your own UI elements.
+As powerful as they are, these libraries often have quite a steep learning-curve and require you to customize every single detail of your editor. This can require months of specialized work.
 
 BlockNote instead, offers a great experience with minimal setup, including a ready-made and animated UI.
 
 On top of that, it comes with a modern block-based design. This gives documents more structure, allow for a richer user experience while simultaneously making it easier to customize the editor's functionality.
 
+
 ## Community
 
 We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on [Discord](https://discord.gg/Qc2QTTH5dF) and [GitHub](https://github.com/TypeCellOS/BlockNote).
diff --git a/docs/pages/docs/quickstart.mdx b/docs/pages/docs/quickstart.mdx
index f7a2a00a73..605858e39d 100644
--- a/docs/pages/docs/quickstart.mdx
+++ b/docs/pages/docs/quickstart.mdx
@@ -8,7 +8,6 @@ path: /docs/quickstart
 import { Example } from "@/components/example";
 import { Callout } from "nextra/components";
 
-
 # Quickstart
 
 Getting started with BlockNote is quick and easy. Install the required packages and add the React component to your app.
@@ -23,53 +22,34 @@ npm install @blocknote/core @blocknote/react
 
 ## Creating an Editor
 
-With the `useBlockNote` hook, we can create a new editor instance, then use the`BlockNoteView` component to render it. See below:
-
-```typescript jsx
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+With the `useCreateBlockNote` hook, we can create a new editor instance, then use the`BlockNoteView` component to render it. See below:
 
-function App() {
-  // Creates a new editor instance.
-  const editor = useBlockNote({});
-
-  // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
-}
-```
+<Example name="basic/minimal" />
 
-As well as `BlockNoteView` and `useBlockNote`, we import `@blocknote/react/style.css` to provide default styling for the editor.
+We also import `@blocknote/react/style.css` to add default styling for the editor.
 
 <Callout type="warning" emoji={""}>
   <strong>Next.js usage (or other server-side React frameworks)</strong>
-  <p>Are you using Next.js (`create-next-app`)? Because BlockNote is a client-only component,
-  make sure to disable server-side rendering of BlockNote. [Read our guide on setting
-  up Next.js + BlockNote](/docs/nextjs)</p>
+  <p>
+    Are you using Next.js (`create-next-app`)? Because BlockNote is a
+    client-only component, make sure to disable server-side rendering of
+    BlockNote. [Read our guide on setting up Next.js + BlockNote](/docs/nextjs)
+  </p>
 </Callout>
 
 <Callout type="warning" emoji={""}>
   <strong>Using BlockNote without React</strong>
-  <p>It's also possible to use BlockNote without React, using "vanilla" JavaScript or other frameworks. [Read our guide on using BlockNote without React](/docs/vanilla-js) </p>
+  <p>
+    It's also possible to use BlockNote without React, using "vanilla"
+    JavaScript or other frameworks. [Read our guide on using BlockNote without
+    React](/docs/vanilla-js){" "}
+  </p>
 </Callout>
 
-## Demo: Basic App Using BlockNote
-
-Taking the same code, the live preview below turns it into a super simple, working app:
-
-<Example name="basic/minimal" />
-
 ## Next steps
 
 You now know how to integrate BlockNote into your React app! However, this is just scratching the surface of what you can do with BlockNote.
 
-### Editor API
-
-TODO: Learn about how to interact with the editor, documents and blocks from code.
-
-### UI Components
-
-TODO: BlockNote comes with a default UI. Learn how to customize them, or create your own components.
-
-### Custom schemas
-
-TODO: A document consists of blocks, inline content and styles that the user can edit. Learn how to create your own Custom Blocks, inline content and styles. 
+- Learn about [blocks and the editor basics](/docs/editor-basics) and how to interact with the editor using the [editor API](/docs/editor-api)
+- See [UI Components](/docs/ui-components) to customize built-in menus and toolbars and [Styling & Theming](/docs/styling-theming) to customize the look and feel of the editor
+- Further extend the editor with your own Blocks using [Custom Schemas](/docs/custom-schemas) or add [Real-Time Collaboration](/docs/advanced/real-time-collaboration)
diff --git a/docs/pages/docs/styling-theming.mdx b/docs/pages/docs/styling-theming.mdx
new file mode 100644
index 0000000000..9ea847fe42
--- /dev/null
+++ b/docs/pages/docs/styling-theming.mdx
@@ -0,0 +1,12 @@
+---
+title: Styling & Theming
+description: You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.
+imageTitle: Styling & Theming
+path: /docs/styling-theming
+---
+
+# Styling & Theming
+
+You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with [theme CSS variables](/docs/styling-theming/themes), or apply more complex styles with [additional CSS rules](/docs/styling-theming/overriding-css).
+
+If you want to change, remove, or entirely replace the React components for menus & toolbars, see [UI Components](/docs/ui-components).
diff --git a/docs/pages/docs/styling-theming/_meta.json b/docs/pages/docs/styling-theming/_meta.json
new file mode 100644
index 0000000000..849151839e
--- /dev/null
+++ b/docs/pages/docs/styling-theming/_meta.json
@@ -0,0 +1,5 @@
+{
+  "themes": "Themes",
+  "overriding-css": "Overriding CSS",
+  "adding-dom-attributes": "Adding DOM Attributes"
+}
diff --git a/docs/pages/docs/styling-theming/adding-dom-attributes.mdx b/docs/pages/docs/styling-theming/adding-dom-attributes.mdx
new file mode 100644
index 0000000000..203c1da6a1
--- /dev/null
+++ b/docs/pages/docs/styling-theming/adding-dom-attributes.mdx
@@ -0,0 +1,27 @@
+---
+title: Adding DOM Attributes
+description: BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.
+imageTitle: Styling & Theming
+path: /docs/theming
+---
+
+import { Example } from "@/components/example";
+
+# Adding DOM Attributes
+
+You can set additional HTML attributes on a number of DOM elements inside the editor. There include:
+
+`editor:` The editor itself, excluding menus & toolbars.
+
+`blockContainer:` The main container element for blocks. Contains both the block's content and its nested blocks.
+
+`blockGroup:` The wrapper element for all top-level blocks in the editor and nested blocks.
+
+`blockContent:` The wrapper element for a block's content.
+
+`inlineContent:` The wrapper element for a block's rich-text content.
+
+
+In the demo below, we set a custom class on the `blockContainer` element to add a border to each block:
+
+<Example name="theming/theming-dom-attributes" />
\ No newline at end of file
diff --git a/docs/pages/docs/styling-theming/overriding-css.mdx b/docs/pages/docs/styling-theming/overriding-css.mdx
new file mode 100644
index 0000000000..c0dfd4cd19
--- /dev/null
+++ b/docs/pages/docs/styling-theming/overriding-css.mdx
@@ -0,0 +1,36 @@
+---
+title: Overriding CSS
+description: You can change any styles applied to the editor by setting your own CSS styles.
+imageTitle: Overriding CSS
+path: /docs/styling-theming/overriding-css
+---
+
+import { Example } from "@/components/example";
+
+# Overriding CSS
+
+Within the editor's DOM structure, you'll find many elements have classes with the `bn-` prefix. BlockNote uses these to apply CSS styles to the editor, which you can override with your own. Here are some of the most useful BlockNote classes that you can use for your CSS rules:
+
+`bn-container`: Container element for the editor, as well as all menus and toolbars.
+
+`bn-editor`: Element for only the editor.
+
+`bn-block`: Element for a block, including nested blocks.
+
+`bn-group`: Container element for nested blocks.
+
+`bn-inline-content`: Element for a block's content.
+
+`bn-toolbar`: Element for the formatting & hyperlink toolbars.
+
+`bn-side-menu`: Element for the side menu.
+
+`bn-drag-handle-menu`: Element for the drag handle menu.
+
+`bn-slash-menu`: Element for the slash menu.
+
+Because BlockNote uses [Mantine](https://mantine.dev/) for its UI, you can also write CSS rules using any of the default Mantine component classes. To figure out what CSS selector you need to use to target a specific DOM element, it's easiest to just inspect the DOM tree using your browser's dev tools.
+
+In the demo below, we create additional CSS rules to add some simple styling to the editor, and also make all hovered slash menu items blue:
+
+<Example name="theming/theming-css" />
diff --git a/docs/pages/docs/styling-theming/themes.mdx b/docs/pages/docs/styling-theming/themes.mdx
new file mode 100644
index 0000000000..793a131620
--- /dev/null
+++ b/docs/pages/docs/styling-theming/themes.mdx
@@ -0,0 +1,124 @@
+---
+title: Themes
+description: Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.
+imageTitle: Themes
+path: /docs/styling-theming/theming
+---
+
+import { Example } from "@/components/example";
+
+# Themes
+
+Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font. If you want to set more complex styles on the editor, see [Overriding CSS](TODO).
+
+## Theme CSS Variables
+
+A theme is made up of a set of CSS variables, which can be overwritten to change the editor theme. BlockNote comes with two default themes, one for light and one for dark mode, which are selected based on system preference.
+
+Here are each of the theme CSS variables you can set, with values from the default light theme:
+
+```
+--bn-colors-editor-text: #3f3f3f;
+--bn-colors-editor-background: #ffffff;
+--bn-colors-menu-text: #3f3f3f;
+--bn-colors-menu-background: #ffffff;
+--bn-colors-tooltip-text: #3f3f3f;
+--bn-colors-tooltip-background: #efefef;
+--bn-colors-hovered-text: #3f3f3f;
+--bn-colors-hovered-background: #efefef;
+--bn-colors-selected-text: #ffffff;
+--bn-colors-selected-background: #3f3f3f;
+--bn-colors-disabled-text: #afafaf;
+--bn-colors-disabled-background: #efefef;
+
+--bn-colors-shadow: #cfcfcf;
+--bn-colors-border: #efefef;
+--bn-colors-side-menu: #cfcfcf;
+
+--bn-colors-highlights-gray-text: #9b9a97;
+--bn-colors-highlights-gray-background: #ebeced;
+--bn-colors-highlights-brown-text: #64473a;
+--bn-colors-highlights-brown-background: #e9e5e3;
+--bn-colors-highlights-red-text: #e03e3e;
+--bn-colors-highlights-red-background: #fbe4e4;
+--bn-colors-highlights-orange-text: #d9730d;
+--bn-colors-highlights-orange-background: #f6e9d9;
+--bn-colors-highlights-yellow-text: #dfab01;
+--bn-colors-highlights-yellow-background: #fbf3db;
+--bn-colors-highlights-green-text: #4d6461;
+--bn-colors-highlights-green-background: #ddedea;
+--bn-colors-highlights-blue-text: #0b6e99;
+--bn-colors-highlights-blue-background: #ddebf1;
+--bn-colors-highlights-purple-text: #6940a5;
+--bn-colors-highlights-purple-background: #eae4f2;
+--bn-colors-highlights-pink-text: #ad1a72;
+--bn-colors-highlights-pink-background: #f4dfeb;
+
+--bn-font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans",
+  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+  "Helvetica Neue", sans-serif;
+--bn-border-radius: 6px;
+```
+
+Setting these variables on the `.bn-container[data-color-scheme]` selector will overwrite them for both default light & dark themes. To overwrite variables separately for light & dark themes, use the `.bn-container[data-color-scheme="light"]` and `.bn-container[data-color-scheme="dark"]` selectors.
+
+In the demo below, we set a red theme for the editor which changes based on if light or dark mode is selected (see this in action by changing the website theme in the footer):
+
+<Example name="theming/theming-css-variables" />
+
+## Changing CSS Variables Through Code
+
+You can also set the theme CSS variables using the `theme` prop in [`BlockNoteView`](/docs/editor-basics/setup#rendering-the-editor-with-blocknoteview). Passing a `Theme` object will overwrite CSS variables for both light & dark themes with values from the object:
+
+```ts
+type CombinedColor = Partial<{
+  text: string;
+  background: string;
+}>;
+
+type ColorScheme = Partial<{
+  editor: CombinedColor;
+  menu: CombinedColor;
+  tooltip: CombinedColor;
+  hovered: CombinedColor;
+  selected: CombinedColor;
+  disabled: CombinedColor;
+  shadow: string;
+  border: string;
+  sideMenu: string;
+  highlights: Partial<{
+    gray: CombinedColor;
+    brown: CombinedColor;
+    red: CombinedColor;
+    orange: CombinedColor;
+    yellow: CombinedColor;
+    green: CombinedColor;
+    blue: CombinedColor;
+    purple: CombinedColor;
+    pink: CombinedColor;
+  }>;
+}>;
+
+type Theme = Partial<{
+  colors: ColorScheme;
+  borderRadius: number;
+  fontFamily: string;
+}>;
+```
+
+Alternatively, you can overwrite CSS variables the light & dark theme separately by passing the following object type:
+
+```ts
+type LightAndDarkThemes = {
+  light: Theme;
+  dark: Theme;
+};
+```
+
+In the demo below, we create the same red theme as from the previous demo, but this time we set it using the `theme` prop in `BlockNoteView`:
+
+<Example name="theming/theming-css-variables-code" />
+
+### Forcing Light/Dark Mode
+
+By passing `"light"` or `"dark"` to the `theme` prop instead of a `Theme` object, you can also force BlockNote to always use the light or dark theme.
diff --git a/docs/pages/docs/ui-components.mdx b/docs/pages/docs/ui-components.mdx
new file mode 100644
index 0000000000..135e1c3d8c
--- /dev/null
+++ b/docs/pages/docs/ui-components.mdx
@@ -0,0 +1,16 @@
+---
+title: UI Components
+description: BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized.
+imageTitle: UI Components
+path: /docs/ui-components
+---
+
+# Changing UI Components
+
+BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized:
+
+- [Block Side Menu](/docs/side-menu)
+- [Formatting Toolbar](/docs/formatting-toolbar)
+- [Suggestion Menus](/docs/suggestion-menus)
+  {/* - Hyperlink Toolbar */}
+  {/* - [Image Toolbar](/docs/image-toolbar) */}
diff --git a/docs/pages/docs/ui-components/_meta.json b/docs/pages/docs/ui-components/_meta.json
new file mode 100644
index 0000000000..850fab1a9d
--- /dev/null
+++ b/docs/pages/docs/ui-components/_meta.json
@@ -0,0 +1,13 @@
+{
+  "side-menu": "Block Side Menu",
+  "formatting-toolbar": "Formatting Toolbar",
+  "hyperlink-toolbar": {
+    "title": "Hyperlink Toolbar",
+    "display": "hidden"
+  },
+  "image-toolbar": {
+    "title": "Image Toolbar",
+    "display": "hidden"
+  },
+  "suggestion-menus": "Suggestion Menus"
+}
diff --git a/docs/pages/docs/ui-components/formatting-toolbar.mdx b/docs/pages/docs/ui-components/formatting-toolbar.mdx
index fe0bb64ed8..287159c421 100644
--- a/docs/pages/docs/ui-components/formatting-toolbar.mdx
+++ b/docs/pages/docs/ui-components/formatting-toolbar.mdx
@@ -1,6 +1,6 @@
 ---
 title: Formatting Toolbar
-description: The Formatting Toolbar appears whenever you highlight text in the editor, and is mainly used for styling.
+description: The Formatting Toolbar appears whenever you highlight text in the editor.
 imageTitle: Formatting Toolbar
 path: /docs/formatting-toolbar
 ---
@@ -9,97 +9,41 @@ import { Example } from "@/components/example";
 
 # Formatting Toolbar
 
-The Formatting Toolbar appears whenever you highlight text in the editor, and is mainly used for styling.
+The Formatting Toolbar appears whenever you highlight text in the editor.
 
-<img style={{maxWidth: "600px"}} src="/img/screenshots/formatting_toolbar.png" alt="image" />
-
-## Custom Formatting Toolbar
+<img
+  style={{ maxWidth: "600px" }}
+  src="/img/screenshots/formatting_toolbar.png"
+  alt="image"
+/>
 
-If you want to change the buttons/dropdowns in the Formatting Toolbar, or replace it altogether, you can do that using a React component.
+## Changing the Formatting Toolbar
 
-You can see how this is done in the example below, which has a custom Formatting Toolbar. It contains the same items as the default Formatting Toolbar, with and added blue text/background color and code style button.
+You can change or replace the Formatting Toolbar with your own React component. In the demo below, 2 buttons are added to the default Formatting Toolbar - one to add a blue text/background, and one to toggle code styles.
 
 <Example name="ui-components/formatting-toolbar-buttons" />
 
-`CustomFormattingToolbar` is the component we use to replace the default Formatting Toolbar. You can see it's made up of a bunch of other components that are exported by BlockNote. Read on to [Components](/docs/formatting-toolbar#components) to find out more about these.
-
-After creating `CustomFormattingToolbar`, we tell BlockNote to use it inside `BlockNoteView`. [Changing UI Elements](/docs/ui-elements) has more information about how this is done.
-
-## Changing the Block Type Dropdown
-
-If you create a [custom block](/docs/block-types#custom-block-types) and want to add it to the block type dropdown in the default Formatting Toolbar, you can do that through the `blockTypeDropdownItems` prop of the `DefaultFormattingToolbar` component:
-
-```typescript jsx
-<DefaultFormattingToolbar
-    {...props}
-    blockTypeDropdownItems={[
-        ...defaultBlockTypeDropdownItems,
-        {
-            name: "Image",
-            type: "image",
-            props: {
-                src: "https://via.placeholder.com/1000",
-                alt: "image",
-            },
-            icon: RiImage2Fill,
-            isSelected: (block) => block.type === "image",
-        },
-    ]}
-/>
-```
-
-Find out how to replace the Formatting Toolbar in [Replacing UI Elements](/docs/ui-elements#replacing-ui-elements).
-
-## Components
-
-It might seem daunting to create your own Formatting Toolbar from scratch, which is why BlockNote provides React components that you can use which match the default styling.
-
-### Default Components
-
-BlockNote exports all components used to create the default layout - both the toolbar itself and the items in it. Head to the [default Formatting Toolbar's source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/FormattingToolbar/components/DefaultFormattingToolbar.tsx) to see all the components that you can use.
-
-### Custom Components
-
-BlockNote also provides components that you can use to make your own toolbar items, which also match the default styling:
-
-```typescript
-// Custom dropdown.
-type ToolbarDropdownProps = {
-  // Array representing the items in the dropdown.
-  items: Array<{
-    // Item name/text.
-    text: string;
-    // Icon next to the text.
-    icon?: IconType;
-    // Function to execute on click.
-    onClick?: (e: MouseEvent) => void;
-    // Condition for when the item is selected/active.
-    isSelected?: boolean;
-    // Whether the item should be clickable.
-    isDisabled?: boolean;
-  }>;
-  // Whether the dropdown should be clickable.
-  isDisabled?: boolean;
-};
-const ToolbarDropdown = (props: ToolbarDropdownProps): JSX.Element => ...;
-
-// Custom button.
-type ToolbarButtonProps = {
-  // Main tooltip, which is shown on hover.
-  mainTooltip: string;
-  // Secondary tooltip, usually showing the keyboard shortcut.
-  secondaryTooltip?: string;
-  // Icon for the button.
-  icon?: IconType;
-  // Function to execute on click.
-  onClick?: (e: MouseEvent) => void;
-  // Condition for when the item is selected/active.
-  isSelected?: boolean;
-  // Whether the item should be clickable.
-  isDisabled?: boolean;
-  // Child components, usually just the button text. If no children are 
-  // given, make sure to provide an icon.
-  children?: any;
-};
-export const ToolbarButton = (props: ToolbarButtonProps) => ...;
-```
+We use the `FormattingToolbar` component to create a custom Formatting Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own.
+
+This custom Formatting Toolbar is passed to a `FormattingToolbarController`, which controls its position and visibility (above or below the highlighted text).
+
+Setting `formattingToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Formatting Toolbar.
+
+<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
+    <small>
+        <strong>Tip:</strong> The children you pass to the `FormattingToolbar` component
+        should be default dropdowns/buttons (e.g. `BlockTypeDropdown` & `BasicTextStyleButton`) or custom dropdowns/buttons
+        (`ToolbarDropdown` & `ToolbarButton`). To see all the components you can use, head to the
+        [Formatting Toolbar's source code](link).
+    </small>
+</div>
+
+## Changing Block Type Dropdown Items
+
+TODO: I think this is too specific for this page. We can just describe the components below, and link to an example that makes more sense ("image" doesn't)
+
+The first element in the default Formatting Toolbar is the Block Type Dropdown, and you can change the items in it. The demo makes the Block Type Dropdown work for image blocks by adding an item to it.
+
+<Example name="ui-components/formatting-toolbar-block-type-items" />
+
+Here, we use the `FormattingToolbar` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Block Type Dropdown items using the `blockTypeDropdownItems` prop.
diff --git a/docs/pages/docs/ui-components/hyperlink-toolbar.mdx b/docs/pages/docs/ui-components/hyperlink-toolbar.mdx
new file mode 100644
index 0000000000..a54d990d9a
--- /dev/null
+++ b/docs/pages/docs/ui-components/hyperlink-toolbar.mdx
@@ -0,0 +1,37 @@
+---
+title: Hyperlink Toolbar
+description: The Hyperlink Toolbar appears whenever you hover a link in the editor.
+imageTitle: Hyperlink Toolbar
+path: /docs/hyperlink-toolbar
+---
+
+import { Example } from "@/components/example";
+
+# Hyperlink Toolbar
+
+The Hyperlink Toolbar appears whenever you hover a link in the editor.
+
+TODO Image
+
+[//]: # '<img style={{maxWidth: "600px"}} src="/img/screenshots/hyperlink_toolbar.png" alt="image" />'
+
+## Changing the Hyperlink Toolbar
+
+You can change or replace the Hyperlink Toolbar with your own React component. In the demo below, a button is added to the default Hyperlink Toolbar, which opens a browser alert.
+
+<Example name="ui-components/hyperlink-toolbar-buttons" />
+
+We use the `HyperlinkToolbar` component to create a custom Hyperlink Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own.
+
+This custom Hyperlink Toolbar is passed to a `HyperlinkToolbarController`, which controls its position and visibility (above or below the hovered link).
+
+Setting `hyperlinkToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Hyperlink Toolbar.
+
+<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
+  <small>
+    <strong>Tip:</strong> The children you pass to the `HyperlinkToolbar`
+    component should be default buttons (e.g. TODO) or custom dropdowns/buttons
+    (`ToolbarDropdown` & `ToolbarButton`). To see all the components you can
+    use, head to the [Hyperlink Toolbar's source code](link).
+  </small>
+</div>
diff --git a/docs/pages/docs/ui-components/side-menu.mdx b/docs/pages/docs/ui-components/side-menu.mdx
index f8fde000d0..6a23c1d826 100644
--- a/docs/pages/docs/ui-components/side-menu.mdx
+++ b/docs/pages/docs/ui-components/side-menu.mdx
@@ -1,6 +1,6 @@
 ---
 title: Block Side Menu
-description: The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
+description: The Block Side Menu appears on the left side whenever you hover a block.
 imageTitle: Block Side Menu
 path: /docs/side-menu
 ---
@@ -9,59 +9,56 @@ import { Example } from "@/components/example";
 
 # Block Side Menu
 
-The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
+The Block Side Menu appears on the left side whenever you hover a block. By default, it consists of a `+` button and a drag handle (`⠿`):
 
-<img style={{maxWidth: "500px"}} src="/img/screenshots/side_menu.png" alt="image" />
+<img
+  style={{ maxWidth: "500px" }}
+  src="/img/screenshots/side_menu.png"
+  alt="Side menu"
+/>
 
-You can also click the drag handle (`⠿`) in the Block Side Menu to open the Drag Handle Menu.
+Clicking the drag handle (`⠿`) in the Block Side Menu opens the Drag Handle Menu:
 
-<img style={{maxWidth: "250px"}} src="/img/screenshots/drag_handle_menu.png" alt="image" />
+<img
+  style={{ maxWidth: "250px" }}
+  src="/img/screenshots/drag_handle_menu.png"
+  alt="image"
+/>
 
-## Custom Side Menu
+## Changing the Block Side Menu
 
-If you want to change the items in the Side Menu, or replace it altogether, you can do that using a React component.
-
-You can see how this is done in the example below, which has a custom Side Menu with two items. The first one deletes the selected block, while the second one is a drag handle, which opens a menu on click.
+You can change or replace the Block Side Menu with your own React component. In the demo below, the button to add a new block is replaced with one to remove the hovered block.
 
 <Example name="ui-components/side-menu-buttons" />
 
-`CustomDragHandleMenu` is the component we use to replace the default Side Menu. You can see it's made up of a bunch of other components that are exported by BlockNote. Read on to [Components](/docs/side-menu#components) to find out more about these.
-
-After creating `CustomDragHandleMenu`, we tell BlockNote to use it inside `BlockNoteView`. [Changing UI Elements](/docs/ui-elements) has more information about how this is done.
-
-## Custom Drag Handle Menu
+We use the `SideMenu` component to create a custom Block Side Menu. By specifying its children, we can replace the default buttons in the menu with our own.
 
-If you want to change the items in the Drag Handle Menu, or replace it altogether, you can do that using a React component.
-
-You can see how this is done in the example below, which has a custom Drag Handle Menu. It contains the default items, as well as a custom item which opens an alert.
-
-<Example name="ui-components/side-menu-drag-handle-items" />
+This custom Side Menu is passed to a `SideMenuController`, which controls its position and visibility (on the left side when you hover a block).
 
-`CustomDragHandleMenu` is the component we use to replace the default Drag Handle Menu. You can see it's made up of a bunch of other components that are exported by BlockNote. Read on to [Components](/docs/side-menu#components) to find out more about these.
+Setting `sideMenu={false}` on `BlockNoteView` tells BlockNote not to show the default Block Side Menu.
 
-Here, we're passing it as a prop to the `DefaultSideMenu` component, but you can also pass it to the `DragHandle` component we saw in the [previous demo](/docs/side-menu#custom-side-menu), if you don't want to use the default Side Menu layout.
+<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
+  <small>
+    <strong>Tip:</strong> The children you pass to the `SideMenu` component
+    should be default buttons (e.g. `DragHandleButton`) or custom buttons
+    (`SideMenuButton`). To see all the components you can use, head to the
+    [Side Menu's source code](link).
+  </small>
+</div>
 
-After creating `CustomDragHandleMenu`, we tell BlockNote to use it inside `BlockNoteView`. [Changing UI Elements](/docs/ui-elements) has more information about how this is done.
+## Changing Drag Handle Menu Items
 
-## Components
+You can also change the items in the Drag Handle Menu. The demo below adds an item that resets the block type to a paragraph.
 
-BlockNote provides React components that you can reuse, to easily create your menus while matching the default styling.
-
-### Default Components
-
-BlockNote exports all components used to create the default layout - both the menu itself and the items in it. Head to the [default Side Menu's source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/SideMenu/components/DefaultSideMenu.tsx) and [default Drag Handle Menu's source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/SideMenu/components/DragHandleMenu/DefaultDragHandleMenu.tsx) to see all the components that you can use.
-
-### Custom Components
-
-BlockNote also provides components that you can use to make your own menu items, which also match the default styling:
+<Example name="ui-components/side-menu-drag-handle-items" />
 
-```typescript
-type SideMenuButtonProps = {
-  children: JSX.Element;
-}
-export const SideMenuButton = (props: SideMenuButtonProps) => ...;
+Here, we use the `SideMenu` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Drag Handle Menu using the `dragHandleMenu` prop.
 
-// Contains all props that a regular button element would take, as well as all props from the Mantine `Menu.Item` component.
-type DragHandleMenuItemProps = PolymorphicComponentProps<"button"> & MenuItemProps
-export const DragHandleMenuItem = (props: DragHandleMenuItemProps) => ...;
-```
+<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
+  <small>
+    <strong>Tip:</strong> The children you pass to the `DragHandleMenu` component
+    should be default items (e.g. `RemoveBlockItem`) or custom items
+    (`DragHandleMenuItem`). To see all the components you can use, head to the
+    [Drag Handle Menu's source code](link).
+  </small>
+</div>
diff --git a/docs/pages/docs/ui-components/slash-menu.mdx b/docs/pages/docs/ui-components/slash-menu.mdx
deleted file mode 100644
index 76c944a9b6..0000000000
--- a/docs/pages/docs/ui-components/slash-menu.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Slash Menu
-description: The Slash Menu is the list of commands which shows up whenever you type the "/" (slash) character, or when you click the "+" button in the Side Menu.
-imageTitle: Slash Menu
-path: /docs/slash-menu
----
-
-import { Example } from "@/components/example";
-
-# Slash Menu
-
-The Slash Menu is the list of commands which shows up whenever you type the "/" (slash) character, or when you click the "+" button in the [Side Menu](/docs/side-menu):
-
-<img style={{maxWidth: "400px"}} src="/img/screenshots/slash_menu.png" alt="image" />
-
-## Custom Slash Menu Item List
-
-If you want to change the items that appear in the Slash Menu, you can do that using the `slashMenuItems` [editor option](/docs/editor#editor-options).
-
-You can see how this is done in the example below, which has a custom Slash Menu item list. It includes all the default Slash Menu items, as well as a custom item, which inserts a new block below with "Hello World" in bold.
-
-<Example name="ui-components/slash-menu-items" />
-
-To find out how to get the default Slash Menu items, as well as how to make custom items, read on to [Slash Menu Items](/docs/slash-menu#slash-menu-items)
-
-## Slash Menu Items
-
-### Default Items
-
-BlockNote comes with a variety of built-in Slash Menu items, which are used to change the type of the block containing the text cursor. If you don't pass anything to `slashMenuItems`, BlockNote will use these to set the Slash Menu contents.
-
-If you want to change, remove & reorder the default items , you first import and copy them to a new array. From there, you can edit the array how you like, then pass it to `useBlockNote`:
-
-```typescript jsx
-import {
-  BlockNoteView,
-  getDefaultReactSlashMenuItems,
-  useBlockNote
-} from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-function App() {
-  const newSlashMenuItems = getDefaultReactSlashMenuItems();
-
-  // Edit newSlashMenuItems
-  ...
-
-  const editor = useBlockNote({ slashMenuItems: newSlashMenuItems });
-
-  return <BlockNoteView editor={editor} />;
-}
-```
-
-### Custom Items
-
-Creating a custom Slash Menu item is easy! Just declare a plain JavaScript object with the following fields:
-
-```typescript
-type SlashMenuItem = {
-  name: string;
-  execute: (editor: BlockNoteEditor) => void;
-  aliases?: string[];
-  group: string;
-  icon: JSX.Element;
-  hint?: string;
-  shortcut?: string;
-};
-```
-
-`name:` The item's name, which is the same string you see displayed in the menu, e.g. "Heading" or "Paragraph".
-
-`execute:` A function that runs when the item is selected.
-
-`aliases:` Other names for the item, used as shortcuts for search.
-
-`group:` The name of the group the item belongs to, e.g. "Headings" or "Basic Blocks".
-
-`icon:` The item's icon.
-
-`hint:` A short phrase to describe what the item is for, which is displayed below its name.
-
-`shortcuts:` A keyboard shortcut which can be used to run the item's `execute` function without the Slash Menu being open.
diff --git a/docs/pages/docs/ui-components/suggestion-menus.mdx b/docs/pages/docs/ui-components/suggestion-menus.mdx
new file mode 100644
index 0000000000..bd145e5c35
--- /dev/null
+++ b/docs/pages/docs/ui-components/suggestion-menus.mdx
@@ -0,0 +1,50 @@
+---
+title: Suggestion Menus
+description: Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.
+imageTitle: Suggestion Menus
+path: /docs/slash-menu
+---
+
+import { Example } from "@/components/example";
+
+# Suggestion Menus
+
+Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.
+
+## Slash Menu
+
+The Slash Menu is a Suggestion Menu that opens with the `/` character (or when clicking the `+` button in the [Block Side Menu](/docs/ui-components/side-menu).
+
+<img
+  style={{ maxWidth: "400px" }}
+  src="/img/screenshots/slash_menu.png"
+  alt="image"
+/>
+
+### Changing Slash Menu Items
+
+You can change the items in the Slash Menu. The demo below adds an item that inserts a new block, with "Hello World" in bold.
+
+<Example name="ui-components/suggestion-menus-slash-menu-items" />
+
+Passing `slashMenu={false}` to `BlockNoteView` tells BlockNote not to show the default Slash Menu. Adding the `SuggestionMenuController` with `triggerCharacter={"/"}` and a custom `getItems` function tells BlockNote to show one with custom items instead.
+
+`getItems` should return the items that need to be shown in the Slash Menu, based on a `query` entered by the user (anything the user types after the `triggerCharacter`).
+
+### Replacing the Suggestion Menu Component
+
+You can replace the React component used for the Suggestion Menu with your own, as you can see in the demo below.
+
+<Example name="ui-components/suggestion-menus-slash-menu-component" />
+
+Again, we add a `SuggestionMenuController` component with `triggerCharacter={"/"}` and set `slashMenu={false}` to replace the default Slash Menu.
+
+Now, we also pass a component to its `suggestionMenuComponent` prop. The `suggestionMenuComponent` we pass is responsible for rendering the filtered items. The `SuggestionMenuController` controls its position and visibility (below the trigger character), and it also determines which items should be shown (using the optional `getItems` prop we've seen above).
+
+## Creating additional Suggestion Menus
+
+You can add additional Suggestion Menus to the editor, which can use any trigger character. The demo below adds an example Suggestion Menu for mentions, which opens with the `@` character.
+
+<Example name="ui-components/suggestion-menus-mentions" />
+
+Changing the items in the new Suggestion Menu, or the component used to render it, is done the same way as for the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu). For more information about how the mentions elements work, see [Custom Inline Content](TODO).
diff --git a/docs/pages/docs/ui-components/theming.mdx b/docs/pages/docs/ui-components/theming.mdx
deleted file mode 100644
index 40f7d3d732..0000000000
--- a/docs/pages/docs/ui-components/theming.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: Theming & Styling
-description: BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.
-imageTitle: Theming & Styling
-path: /docs/theming
----
-
-import { Example } from "@/components/example";
-
-# Theming & Styling
-
-BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.
-
-## CSS Styles
-
-BlockNote's styling is defined in CSS, and you can find the default styles in the [`editor.css` stylesheet](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/editor/styles.css). This means you can override CSS styles for the editor, as well as all menus and toolbars.
-
-In the demo below, we create additional CSS rules to add some basic styling to the editor, and also make all hovered slash menu items blue:
-
-<Example name="theming/theming-css" />
-
-## Theme CSS Variables
-
-BlockNote uses several CSS variables to define the light and dark editor themes. The theme is selected based on the user's system theme, and includes color, border, shadow, and font styles. By overwriting these variables, you can quickly change the look of the editor.
-
-The example below shows each of the CSS variables you can set for BlockNote, with values from the default light theme:
-
-```
---bn-colors-editor-text: #3F3F3F;
---bn-colors-editor-background: #FFFFFF;
---bn-colors-menu-text: #3F3F3F;
---bn-colors-menu-background: #FFFFFF;
---bn-colors-tooltip-text: #3F3F3F;
---bn-colors-tooltip-background: #EFEFEF;
---bn-colors-hovered-text: #3F3F3F;
---bn-colors-hovered-background: #EFEFEF;
---bn-colors-selected-text: #FFFFFF;
---bn-colors-selected-background: #3F3F3F;
---bn-colors-disabled-text: #AFAFAF;
---bn-colors-disabled-background: #EFEFEF;
-
---bn-colors-shadow: #CFCFCF;
---bn-colors-border: #EFEFEF;
---bn-colors-side-menu: #CFCFCF;
-
---bn-colors-highlights-gray-text: #9b9a97;
---bn-colors-highlights-gray-background: #ebeced;
---bn-colors-highlights-brown-text: #64473a;
---bn-colors-highlights-brown-background: #e9e5e3;
---bn-colors-highlights-red-text: #e03e3e;
---bn-colors-highlights-red-background: #fbe4e4;
---bn-colors-highlights-orange-text: #d9730d;
---bn-colors-highlights-orange-background: #f6e9d9;
---bn-colors-highlights-yellow-text: #dfab01;
---bn-colors-highlights-yellow-background: #fbf3db;
---bn-colors-highlights-green-text: #4d6461;
---bn-colors-highlights-green-background: #ddedea;
---bn-colors-highlights-blue-text: #0b6e99;
---bn-colors-highlights-blue-background: #ddebf1;
---bn-colors-highlights-purple-text: #6940a5;
---bn-colors-highlights-purple-background: #eae4f2;
---bn-colors-highlights-pink-text: #ad1a72;
---bn-colors-highlights-pink-background: #f4dfeb;
-
---bn-font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
---bn-border-radius: 6px;
-```
-
-Setting these variables on the `.bn-container[data-color-scheme]` selector will apply them to the editor. You can also specify them separately for light & dark mode based on the value of `data-color-scheme` (`"light"` or `"dark"`).
-
-In the demo below, we set a red theme for the editor which changes based on if light or dark mode is used:
-
-<Example name="theming/theming-css-variables" />
-
-### Changing CSS Variables Through Code
-
-The `theme` prop in `BlockNoteView` allows you to change the editor's theme through code. By passing in `"light"` or `"dark"` to the `theme` prop, you can force BlockNote to always use the light or dark theme.
-
-However, using `Theme` objects, you can also override the theme CSS variables through code:
-
-```ts
-type CombinedColor = Partial<{
-  text: string;
-  background: string;
-}>;
-
-type ColorScheme = Partial<{
-  editor: CombinedColor;
-  menu: CombinedColor;
-  tooltip: CombinedColor;
-  hovered: CombinedColor;
-  selected: CombinedColor;
-  disabled: CombinedColor;
-  shadow: string;
-  border: string;
-  sideMenu: string;
-  highlights: Partial<{
-    gray: CombinedColor;
-    brown: CombinedColor;
-    red: CombinedColor;
-    orange: CombinedColor;
-    yellow: CombinedColor;
-    green: CombinedColor;
-    blue: CombinedColor;
-    purple: CombinedColor;
-    pink: CombinedColor;
-  }>;
-}>;
-
-type Theme = Partial<{
-  colors: ColorScheme;
-  borderRadius: number;
-  fontFamily: string;
-}>;
-```
-
-You can pass a `Theme` object to the `theme` prop in `BlockNoteView` to set the same CSS variables regardless of light/dark mode being used. Alternatively, you can set CSS variables for light and dark mode separately by passing the following object:
-
-```ts
-type LightAndDarkThemes = {
-  light: Theme;
-  dark: Theme;
-};
-```
-
-In the demo below, we create the same red theme as from the previous demo, but this time we set it via the `theme` prop in `BlockNoteView`:
-
-<Example name="theming/theming-css-variables-code" />
-
-## Adding DOM Attributes
-
-You can set additional HTML attributes on most DOM elements inside the editor, which let you change the way that blocks are styled.
-
-In the demo below, we set a custom class on the `blockContainer` element to add a border to each block:
-
-<Example name="theming/theming-dom-attributes" />
-
-There are a number of elements that you can set classes for:
-
-`editor:` The editor itself, excluding menus & toolbars.
-
-`blockContainer:` The main container element for blocks. Contains both the block's content and its nested blocks.
-
-`blockGroup:` The wrapper element for all top-level blocks in the editor and nested blocks.
-
-`blockContent:` The wrapper element for a block's content.
-
-`inlineContent:` The wrapper element for a block's rich-text content.
diff --git a/docs/pages/docs/ui-components/ui-elements.mdx b/docs/pages/docs/ui-components/ui-elements.mdx
deleted file mode 100644
index 6655016c23..0000000000
--- a/docs/pages/docs/ui-components/ui-elements.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Changing UI Elements
-description: Along with the editor itself, BlockNote includes menus and toolbars which you can replace or remove.
-imageTitle: Changing UI Elements
-path: /docs/ui-elements
----
-
-import { Example } from "@/components/example";
-
-TODO: maybe rename section to "Editor UI"
-
-# Changing UI Elements
-
-Along with the editor itself, BlockNote includes a few additional UI elements in the forms of menus and toolbars:
-
-- [Formatting Toolbar](/docs/formatting-toolbar)
-- Hyperlink Toolbar
-- [Slash Menu](/docs/slash-menu)
-- [Side Menu](/docs/side-menu)
-- [Image Toolbar](/docs/image-toolbar)
-
-By default, these are all included in the editor (TODO: see BlockNoteView), but you can remove or replace each of them with your own React components.
-
-User stories:
-
-As a developer, I want to:
-
-- Removing ui elements
-- changing the appearance / styling of some components
-- changing the appearance / styling of the editor itself
-- Adding a button to Menu X
-- Removing a button from Menu X
-- Adding items to Menu X
-- Reordering items in Menu X
-- Changing Formatting toolbar dropdown
-- Creating their own suggestions menu
-- Replace Menu X with my own component that uses my own UI library
-- I want to create a sticky formatting toolbar
-
-
-Menu X = 
-- Formatting Toolbar
-- Hyperlink Toolbar
-- Slash Menu
-- Side Menu
-- Drag Handle menu
-- Image Toolbar
-
-
diff --git a/docs/pages/examples/_meta.json b/docs/pages/examples/_meta.json
index 3e9d6cba3d..2a1533a30d 100644
--- a/docs/pages/examples/_meta.json
+++ b/docs/pages/examples/_meta.json
@@ -1,11 +1,11 @@
 {
   "index": "Overview",
   "basic": "Basic",
+  "ui-components": "UI components",
+  "theming": "Theming",
   "cursor-selections": "Cursors & selections",
   "custom-schema": "Custom schemas",
   "interoperability": "Interoperability",
-  "theming": "Theming",
-  "ui-components": "UI components",
-  "vanilla-js": "Vanilla JS",
-  "collaboration": "Collaboration"
+  "collaboration": "Collaboration",
+  "vanilla-js": "Vanilla JS"
 }
diff --git a/docs/public/img/screenshots/liveblocks_blocknote_example.mp4 b/docs/public/img/screenshots/liveblocks_blocknote_example.mp4
new file mode 100644
index 0000000000..3db708a352
Binary files /dev/null and b/docs/public/img/screenshots/liveblocks_blocknote_example.mp4 differ
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
index 56be394849..cf17e05e28 100644
--- a/docs/theme.config.tsx
+++ b/docs/theme.config.tsx
@@ -35,8 +35,8 @@ interface Frontmatter {
 
 const config: DocsThemeConfig = {
   sidebar: {
-    defaultMenuCollapseLevel: 2,
-    toggleButton: true,
+    defaultMenuCollapseLevel: 1,
+    toggleButton: false,
   },
   docsRepositoryBase: "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/TypeCellOS/BlockNote/blob/main/docs",
   useNextSeoProps: function SEO() {
@@ -60,12 +60,12 @@ const config: DocsThemeConfig = {
     const title = frontMatter.overrideTitle
       ? frontMatter.overrideTitle
       : nextraConfig.title
-      ? nextraConfig.title + " - BlockNote"
-      : "BlockNote";
+        ? nextraConfig.title + " - BlockNote"
+        : "BlockNote";
 
     const imageUrl = frontMatter.imageTitle
       ? `${SITE_ROOT}/api/og?title=${encodeURIComponent(
-          frontMatter.imageTitle
+          frontMatter.imageTitle,
         )}`
       : METADATA_DEFAULT.image;
 
@@ -142,7 +142,7 @@ const config: DocsThemeConfig = {
             day: "numeric",
             month: "long",
             year: "numeric",
-          })
+          }),
         );
       } catch (e) {
         // Ignore errors here; they get the ISO string.
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index cc25130978..e7ff90fd27 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -21,13 +21,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "../test.tsx",
-    "components/pages/home-shared/FeaturesBento.tsx.bak"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/examples/01-basic/01-minimal/App.tsx b/examples/01-basic/01-minimal/App.tsx
index f5ac8d505e..ecd227a119 100644
--- a/examples/01-basic/01-minimal/App.tsx
+++ b/examples/01-basic/01-minimal/App.tsx
@@ -1,9 +1,9 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
diff --git a/examples/01-basic/01-minimal/README.md b/examples/01-basic/01-minimal/README.md
index c8fcefae14..8c68cd88cc 100644
--- a/examples/01-basic/01-minimal/README.md
+++ b/examples/01-basic/01-minimal/README.md
@@ -1,3 +1,7 @@
 # Basic Editor Setup
 
 This example shows the minimal code required to setup your React rich text editor with BlockNote.
+
+**Relevant Docs:**
+
+- TODO
diff --git a/examples/01-basic/02-block-objects/App.tsx b/examples/01-basic/02-block-objects/App.tsx
index 20c0b0f003..c1a43dba6b 100644
--- a/examples/01-basic/02-block-objects/App.tsx
+++ b/examples/01-basic/02-block-objects/App.tsx
@@ -1,20 +1,31 @@
-import {
-  Block,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  DefaultStyleSchema,
-} from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { Block } from "@blocknote/core";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";
 
 export default function App() {
-  // Stores the editor's contents as an array of Block objects.
-  const [blocks, setBlocks] = useState<
-    Block<DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema>[]
-  >([]);
+  // Stores the editor's contents (document) as an array of Block objects.
+  const [blocks, setBlocks] = useState<Block[]>([]);
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "heading",
+        content: "This is a heading block",
+      },
+      {
+        type: "paragraph",
+        content: "This is a paragraph block",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
 
   // Renders the editor instance and its contents, as an array of Block
   // objects, below.
@@ -23,8 +34,8 @@ export default function App() {
       <BlockNoteView
         editor={editor}
         onChange={() => {
-          // Converts the editor's contents to an array of Block objects.
-          setBlocks(editor.topLevelBlocks);
+          // Get the editor content (document) and store on the state.
+          setBlocks(editor.document);
         }}
       />
       <p>Document JSON:</p>
diff --git a/examples/01-basic/02-block-objects/README.md b/examples/01-basic/02-block-objects/README.md
index 7b78c8e438..fc20420f90 100644
--- a/examples/01-basic/02-block-objects/README.md
+++ b/examples/01-basic/02-block-objects/README.md
@@ -1,5 +1,7 @@
 # Displaying Block Objects
 
-Here, we use the `onChange` handler to listen to updates to the BlockNote document and display them below the editor.
+In this example, below the editor, we display its contents as they're represented in code - i.e. as a JSON array of `Block` objects.
 
-**Try it out:** Type in the editor and see the JSON representation of the document.
+**Relevant Docs:**
+
+- TODO
diff --git a/examples/01-basic/03-block-manipulation/App.tsx b/examples/01-basic/03-block-manipulation/App.tsx
index 2101732367..aaad3710e4 100644
--- a/examples/01-basic/03-block-manipulation/App.tsx
+++ b/examples/01-basic/03-block-manipulation/App.tsx
@@ -1,8 +1,8 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   return (
     <div>
@@ -18,7 +18,7 @@ export default function App() {
                   new Date().toLocaleTimeString(),
               },
             ],
-            editor.topLevelBlocks[editor.topLevelBlocks.length - 1],
+            editor.document[editor.document.length - 1],
             "after"
           )
         }>
@@ -27,7 +27,7 @@ export default function App() {
       {/*Updates the currently selected block*/}
       <button
         onClick={() =>
-          editor.updateBlock(editor.topLevelBlocks[0], {
+          editor.updateBlock(editor.document[0], {
             content:
               "This block was updated at " + new Date().toLocaleTimeString(),
           })
@@ -35,14 +35,14 @@ export default function App() {
         Update first block
       </button>
       {/*Removes the currently selected block*/}
-      <button onClick={() => editor.removeBlocks([editor.topLevelBlocks[0]])}>
+      <button onClick={() => editor.removeBlocks([editor.document[0]])}>
         Remove first block
       </button>
       {/*Replaces the currently selected block*/}
       <button
         onClick={() =>
           editor.replaceBlocks(
-            [editor.topLevelBlocks[0]],
+            [editor.document[0]],
             [
               {
                 content:
diff --git a/examples/01-basic/03-block-manipulation/README.md b/examples/01-basic/03-block-manipulation/README.md
index aea7dbb93e..066b5e4e61 100644
--- a/examples/01-basic/03-block-manipulation/README.md
+++ b/examples/01-basic/03-block-manipulation/README.md
@@ -7,4 +7,3 @@ This example shows 4 buttons to manipulate the currently selected block using th
 **Relevant Docs:**
 
 - [Block Manipulation](/docs/manipulating-blocks)
-- [Text Cursor](/docs/cursor-selections#text-cursor)
diff --git a/examples/01-basic/04-saving-loading/.bnexample.json b/examples/01-basic/04-saving-loading/.bnexample.json
index 0993be7115..b03abd9c56 100644
--- a/examples/01-basic/04-saving-loading/.bnexample.json
+++ b/examples/01-basic/04-saving-loading/.bnexample.json
@@ -1,4 +1,5 @@
 {
   "playground": true,
-  "docs": true
+  "docs": true,
+  "shortTitle": "Saving & Loading"
 }
diff --git a/examples/01-basic/04-saving-loading/App.tsx b/examples/01-basic/04-saving-loading/App.tsx
index 1ed4eb1ee3..0ee1fea440 100644
--- a/examples/01-basic/04-saving-loading/App.tsx
+++ b/examples/01-basic/04-saving-loading/App.tsx
@@ -1,5 +1,5 @@
-import { PartialBlock } from "@blocknote/core";
-import { BlockNoteView, createBlockNoteEditor } from "@blocknote/react";
+import { BlockNoteEditor, PartialBlock } from "@blocknote/core";
+import { BlockNoteView } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useEffect, useMemo, useState } from "react";
 
@@ -29,12 +29,12 @@ export default function App() {
   }, []);
 
   // Creates a new editor instance.
-  // We use useMemo + createBlockNoteEditor instead of useBlockNote so we can delay the creation of the editor until the initial content is loaded.
+  // We use useMemo + createBlockNoteEditor instead of useCreateBlockNote so we can delay the creation of the editor until the initial content is loaded.
   const editor = useMemo(() => {
     if (initialContent === "loading") {
       return undefined;
     }
-    return createBlockNoteEditor({ initialContent });
+    return BlockNoteEditor.create({ initialContent });
   }, [initialContent]);
 
   if (editor === undefined) {
@@ -45,8 +45,8 @@ export default function App() {
   return (
     <BlockNoteView
       editor={editor}
-      onChange={(editor) => {
-        saveToStorage(editor.topLevelBlocks);
+      onChange={() => {
+        saveToStorage(editor.document);
       }}
     />
   );
diff --git a/examples/01-basic/04-saving-loading/README.md b/examples/01-basic/04-saving-loading/README.md
index 9cdae10159..ba425b50a2 100644
--- a/examples/01-basic/04-saving-loading/README.md
+++ b/examples/01-basic/04-saving-loading/README.md
@@ -1,4 +1,4 @@
-# Saving & Loading
+# Saving & Loading data
 
 This example shows how to save the editor contents to local storage whenever a change is made, and load the saved contents when the editor is created.
 
diff --git a/examples/01-basic/04-saving-loading/index.html b/examples/01-basic/04-saving-loading/index.html
index 77be86d603..3eaea5a631 100644
--- a/examples/01-basic/04-saving-loading/index.html
+++ b/examples/01-basic/04-saving-loading/index.html
@@ -5,7 +5,7 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Saving &amp; Loading</title>
+    <title>Saving &amp; Loading data</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/01-basic/05-file-uploading/App.tsx b/examples/01-basic/05-file-uploading/App.tsx
index 170d7000b1..6c3c0073f6 100644
--- a/examples/01-basic/05-file-uploading/App.tsx
+++ b/examples/01-basic/05-file-uploading/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 /**
@@ -22,9 +22,7 @@ async function uploadFile(file: File) {
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote({
-    uploadFile,
-  });
+  const editor = useCreateBlockNote({ uploadFile });
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
diff --git a/examples/01-basic/05-file-uploading/README.md b/examples/01-basic/05-file-uploading/README.md
index 00bc2b4fd2..062c79e070 100644
--- a/examples/01-basic/05-file-uploading/README.md
+++ b/examples/01-basic/05-file-uploading/README.md
@@ -2,7 +2,7 @@
 
 This example registers an `uploadFile` handler. This makes it possible for users to upload files to the editor.
 
-**Try it out:** Insert an image (by typing `/` and selecting image), and notice how it's now possible to upload a file from your local device.
+**Try it out:** Insert an image (by typing `/` and selecting image) and notice how it's now possible to upload a file from your local device.
 
 **Relevant Docs:**
 
diff --git a/examples/01-basic/06-keyboard-shortcuts/App.tsx b/examples/01-basic/06-keyboard-shortcuts/App.tsx
index 66a0e43d0b..f39764665f 100644
--- a/examples/01-basic/06-keyboard-shortcuts/App.tsx
+++ b/examples/01-basic/06-keyboard-shortcuts/App.tsx
@@ -5,7 +5,7 @@ import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
 } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 const cycleBlocksShortcut = (
@@ -15,7 +15,7 @@ const cycleBlocksShortcut = (
   // Checks for Ctrl+G shortcut
   if (event.ctrlKey && event.key === "g") {
     // Needs type cast as Object.keys doesn't preserve type
-    const allBlockTypes = Object.keys(editor.blockSchema) as Block<
+    const allBlockTypes = Object.keys(editor.schema.blockSchema) as Block<
       DefaultBlockSchema,
       DefaultInlineContentSchema,
       DefaultStyleSchema
@@ -35,7 +35,7 @@ const cycleBlocksShortcut = (
 };
 
 export default function App() {
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   const onKeyDown = (event: React.KeyboardEvent) => {
     cycleBlocksShortcut(event, editor);
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/.bnexample.json b/examples/01-basic/all-blocks/.bnexample.json
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/.bnexample.json
rename to examples/01-basic/all-blocks/.bnexample.json
diff --git a/examples/01-basic/all-blocks/App.tsx b/examples/01-basic/all-blocks/App.tsx
new file mode 100644
index 0000000000..9063303e84
--- /dev/null
+++ b/examples/01-basic/all-blocks/App.tsx
@@ -0,0 +1,53 @@
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Paragraph",
+      },
+      {
+        type: "heading",
+        content: "Heading",
+      },
+      {
+        type: "bulletListItem",
+        content: "Bullet List Item",
+      },
+      {
+        type: "numberedListItem",
+        content: "Numbered List Item",
+      },
+      {
+        type: "image",
+      },
+      {
+        type: "table",
+        content: {
+          type: "tableContent",
+          rows: [
+            {
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
+            },
+            {
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
+            },
+            {
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
+            },
+          ],
+        },
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/01-basic/all-blocks/README.md b/examples/01-basic/all-blocks/README.md
new file mode 100644
index 0000000000..d84f931110
--- /dev/null
+++ b/examples/01-basic/all-blocks/README.md
@@ -0,0 +1,7 @@
+# All Block Types
+
+In this example, the editor contains each of BlockNote's built-in block types.
+
+**Relevant Docs:**
+
+- TODO
diff --git a/examples/01-basic/all-blocks/index.html b/examples/01-basic/all-blocks/index.html
new file mode 100644
index 0000000000..cd00e7388b
--- /dev/null
+++ b/examples/01-basic/all-blocks/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>All Block Types</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/02-ui-components/slash-menu-items/main.tsx b/examples/01-basic/all-blocks/main.tsx
similarity index 100%
rename from examples/02-ui-components/slash-menu-items/main.tsx
rename to examples/01-basic/all-blocks/main.tsx
diff --git a/examples/01-basic/all-blocks/package.json b/examples/01-basic/all-blocks/package.json
new file mode 100644
index 0000000000..953d7ba6aa
--- /dev/null
+++ b/examples/01-basic/all-blocks/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-all-blocks",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/02-ui-components/slash-menu-items/tsconfig.json b/examples/01-basic/all-blocks/tsconfig.json
similarity index 100%
rename from examples/02-ui-components/slash-menu-items/tsconfig.json
rename to examples/01-basic/all-blocks/tsconfig.json
diff --git a/examples/02-ui-components/slash-menu-items/vite.config.ts b/examples/01-basic/all-blocks/vite.config.ts
similarity index 100%
rename from examples/02-ui-components/slash-menu-items/vite.config.ts
rename to examples/01-basic/all-blocks/vite.config.ts
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/.bnexample.json b/examples/01-basic/all-inline-content/.bnexample.json
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/.bnexample.json
rename to examples/01-basic/all-inline-content/.bnexample.json
diff --git a/examples/01-basic/all-inline-content/App.tsx b/examples/01-basic/all-inline-content/App.tsx
new file mode 100644
index 0000000000..585db97021
--- /dev/null
+++ b/examples/01-basic/all-inline-content/App.tsx
@@ -0,0 +1,45 @@
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Styled Text",
+            styles: {
+              bold: true,
+              italic: true,
+              textColor: "red",
+              backgroundColor: "blue",
+            },
+          },
+          {
+            type: "text",
+            text: " ",
+            styles: {},
+          },
+          {
+            type: "link",
+            content: "Link",
+            href: "https://www.blocknotejs.org",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/01-basic/all-inline-content/README.md b/examples/01-basic/all-inline-content/README.md
new file mode 100644
index 0000000000..4dff460052
--- /dev/null
+++ b/examples/01-basic/all-inline-content/README.md
@@ -0,0 +1,8 @@
+# All Inline Content Types
+
+In this example, the editor contains each of BlockNote's built-in inline content
+types.
+
+**Relevant Docs:**
+
+- TODO
diff --git a/examples/01-basic/all-inline-content/index.html b/examples/01-basic/all-inline-content/index.html
new file mode 100644
index 0000000000..8097927a03
--- /dev/null
+++ b/examples/01-basic/all-inline-content/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>All Inline Content Types</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/changing-font/main.tsx b/examples/01-basic/all-inline-content/main.tsx
similarity index 100%
rename from examples/04-theming/changing-font/main.tsx
rename to examples/01-basic/all-inline-content/main.tsx
diff --git a/examples/01-basic/all-inline-content/package.json b/examples/01-basic/all-inline-content/package.json
new file mode 100644
index 0000000000..12af279d98
--- /dev/null
+++ b/examples/01-basic/all-inline-content/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-all-inline-content",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/04-theming/changing-font/tsconfig.json b/examples/01-basic/all-inline-content/tsconfig.json
similarity index 100%
rename from examples/04-theming/changing-font/tsconfig.json
rename to examples/01-basic/all-inline-content/tsconfig.json
diff --git a/examples/04-theming/changing-font/vite.config.ts b/examples/01-basic/all-inline-content/vite.config.ts
similarity index 100%
rename from examples/04-theming/changing-font/vite.config.ts
rename to examples/01-basic/all-inline-content/vite.config.ts
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/.bnexample.json b/examples/01-basic/inline-content-objects/.bnexample.json
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/.bnexample.json
rename to examples/01-basic/inline-content-objects/.bnexample.json
diff --git a/examples/01-basic/inline-content-objects/App.tsx b/examples/01-basic/inline-content-objects/App.tsx
new file mode 100644
index 0000000000..ff5b9b85a9
--- /dev/null
+++ b/examples/01-basic/inline-content-objects/App.tsx
@@ -0,0 +1,71 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContent,
+  TableContent,
+} from "@blocknote/core";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+import { useState } from "react";
+
+export default function App() {
+  // Stores the editor's contents as an array of Block objects.
+  // TODO: InlineContent and TableContent should have default type args
+  const [inlineContent, setInlineContent] = useState<
+    (
+      | InlineContent<DefaultInlineContentSchema, DefaultStyleSchema>[]
+      | TableContent<DefaultInlineContentSchema, DefaultStyleSchema>
+      | undefined
+    )[]
+  >([]);
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Hello ",
+            styles: {},
+          },
+          {
+            type: "text",
+            text: "there, ",
+            styles: {
+              bold: true,
+            },
+          },
+          {
+            type: "link",
+            content: "BlockNote",
+            href: "https://www.blocknotejs.org",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance and the contents of its blocks below.
+  return (
+    <div>
+      <BlockNoteView
+        editor={editor}
+        onChange={() => {
+          // Converts the editor's contents to an array with each top level
+          // block's content.
+          setInlineContent(editor.document.map((block) => block.content));
+        }}
+      />
+      <p>Document JSON:</p>
+      <pre>{JSON.stringify(inlineContent, null, 2)}</pre>
+    </div>
+  );
+}
diff --git a/examples/01-basic/inline-content-objects/README.md b/examples/01-basic/inline-content-objects/README.md
new file mode 100644
index 0000000000..7c2641a47d
--- /dev/null
+++ b/examples/01-basic/inline-content-objects/README.md
@@ -0,0 +1,7 @@
+# Displaying Inline Content Objects
+
+In this example, below the editor, we display the contents of each block as they're represented in code. This changes based on block type, but is always valid JSON.
+
+**Relevant Docs:**
+
+- TODO
diff --git a/examples/01-basic/inline-content-objects/index.html b/examples/01-basic/inline-content-objects/index.html
new file mode 100644
index 0000000000..19aee77636
--- /dev/null
+++ b/examples/01-basic/inline-content-objects/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Displaying Inline Content Objects</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/theming-css-variables-code/main.tsx b/examples/01-basic/inline-content-objects/main.tsx
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/main.tsx
rename to examples/01-basic/inline-content-objects/main.tsx
diff --git a/examples/01-basic/inline-content-objects/package.json b/examples/01-basic/inline-content-objects/package.json
new file mode 100644
index 0000000000..e4666f13bc
--- /dev/null
+++ b/examples/01-basic/inline-content-objects/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-inline-content-objects",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/01-basic/inline-content-objects/styles.css b/examples/01-basic/inline-content-objects/styles.css
new file mode 100644
index 0000000000..a7753b012f
--- /dev/null
+++ b/examples/01-basic/inline-content-objects/styles.css
@@ -0,0 +1,3 @@
+pre {
+    color: grey;
+}
\ No newline at end of file
diff --git a/examples/04-theming/theming-css-variables-code/tsconfig.json b/examples/01-basic/inline-content-objects/tsconfig.json
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/tsconfig.json
rename to examples/01-basic/inline-content-objects/tsconfig.json
diff --git a/examples/04-theming/theming-css-variables-code/vite.config.ts b/examples/01-basic/inline-content-objects/vite.config.ts
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/vite.config.ts
rename to examples/01-basic/inline-content-objects/vite.config.ts
diff --git a/examples/02-ui-components/custom-ui/.bnexample.json b/examples/02-ui-components/custom-ui/.bnexample.json
index eac608c3b1..3ea30099ad 100644
--- a/examples/02-ui-components/custom-ui/.bnexample.json
+++ b/examples/02-ui-components/custom-ui/.bnexample.json
@@ -4,6 +4,7 @@
   "group": "Advanced Examples",
   "order": 1,
   "dependencies": {
-    "@mantine/core": "^7.4.2"
+    "@mantine/core": "^7.5.0",
+    "react-icons": "^4.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/02-ui-components/custom-ui/App.tsx b/examples/02-ui-components/custom-ui/App.tsx
index 3ed32703d9..8481c4527f 100644
--- a/examples/02-ui-components/custom-ui/App.tsx
+++ b/examples/02-ui-components/custom-ui/App.tsx
@@ -1,20 +1,39 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { filterSuggestionItems } from "@blocknote/core";
+import {
+  BlockNoteView,
+  getDefaultReactSlashMenuItems,
+  SideMenuController,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import { CustomFormattingToolbar } from "./CustomFormattingToolbar";
-import { CustomSlashMenu } from "./CustomSlashMenu";
 import { CustomSideMenu } from "./CustomSideMenu";
+import { CustomSlashMenu } from "./CustomSlashMenu";
 import "./styles.css";
 
 export default function App() {
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
+  // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
-      {/*Adding custom UI elements*/}
-      <CustomFormattingToolbar editor={editor} />
-      <CustomSlashMenu editor={editor} />
-      <CustomSideMenu editor={editor} />
+    <BlockNoteView
+      editor={editor}
+      formattingToolbar={false}
+      slashMenu={false}
+      sideMenu={false}>
+      <CustomFormattingToolbar />
+      <SideMenuController sideMenu={CustomSideMenu} />
+      {/* TODO: Shorthand for async function (array with built in filtering) */}
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query) =>
+          filterSuggestionItems(getDefaultReactSlashMenuItems(editor), query)
+        }
+        suggestionMenuComponent={CustomSlashMenu}
+        onItemClick={(i) => i.onItemClick()}
+      />
     </BlockNoteView>
   );
 }
diff --git a/examples/02-ui-components/custom-ui/ColorMenu.tsx b/examples/02-ui-components/custom-ui/ColorMenu.tsx
index 9b4c5ab3c0..05ef2825c9 100644
--- a/examples/02-ui-components/custom-ui/ColorMenu.tsx
+++ b/examples/02-ui-components/custom-ui/ColorMenu.tsx
@@ -1,9 +1,9 @@
 import {
-  FormattingToolbarProps,
+  useBlockNoteEditor,
   useEditorChange,
   useEditorSelectionChange,
 } from "@blocknote/react";
-import { HTMLAttributes, useState } from "react";
+import { useState } from "react";
 import { MdFormatColorText } from "react-icons/md";
 
 export const colors = [
@@ -17,41 +17,35 @@ export const colors = [
 ] as const;
 
 // Formatting Toolbar sub menu for changing text and background color
-export const ColorMenu = (
-  props: FormattingToolbarProps<any> & HTMLAttributes<HTMLDivElement>
-) => {
-  const { editor, className, ...rest } = props;
+export function ColorMenu(props: { className?: string }) {
+  const editor = useBlockNoteEditor();
 
   // Colors of the currently selected text
-  // TODO: Vite doesn't seem to be live-updating core & react?
   const [textColor, setTextColor] = useState<string>(
-    (props.editor.getActiveStyles().textColor as string) || "default"
+    (editor.getActiveStyles().textColor as string) || "default"
   );
   const [backgroundColor, setCurrentColor] = useState<string>(
-    (props.editor.getActiveStyles().backgroundColor as string) || "default"
+    (editor.getActiveStyles().backgroundColor as string) || "default"
   );
 
   // Update the colors when the editor content or selection changes
   useEditorChange(() => {
-    setTextColor(
-      (props.editor.getActiveStyles().textColor as string) || "default"
-    );
+    setTextColor((editor.getActiveStyles().textColor as string) || "default");
     setCurrentColor(
-      (props.editor.getActiveStyles().backgroundColor as string) || "default"
+      (editor.getActiveStyles().backgroundColor as string) || "default"
     );
-  }, props.editor);
+  }, editor);
 
   useEditorSelectionChange(() => {
-    setTextColor(
-      (props.editor.getActiveStyles().textColor as string) || "default"
-    );
+    setTextColor((editor.getActiveStyles().textColor as string) || "default");
     setCurrentColor(
-      (props.editor.getActiveStyles().backgroundColor as string) || "default"
+      (editor.getActiveStyles().backgroundColor as string) || "default"
     );
-  }, props.editor);
+  }, editor);
 
   return (
-    <div {...rest} className={`color-menu${className ? " " + className : ""}`}>
+    <div
+      className={`color-menu${props.className ? " " + props.className : ""}`}>
       {/*Group for text color buttons*/}
       <div className={"color-menu-group"}>
         {colors.map((color) => (
@@ -62,8 +56,8 @@ export const ColorMenu = (
             }`}
             onClick={() => {
               color === "default"
-                ? props.editor.removeStyles({ textColor: color })
-                : props.editor.addStyles({ textColor: color });
+                ? editor.removeStyles({ textColor: color })
+                : editor.addStyles({ textColor: color });
             }}
             key={color}>
             <MdFormatColorText />
@@ -80,8 +74,8 @@ export const ColorMenu = (
             }`}
             onClick={() => {
               color === "default"
-                ? props.editor.removeStyles({ backgroundColor: color })
-                : props.editor.addStyles({ backgroundColor: color });
+                ? editor.removeStyles({ backgroundColor: color })
+                : editor.addStyles({ backgroundColor: color });
             }}
             key={color}>
             <MdFormatColorText />
@@ -90,4 +84,4 @@ export const ColorMenu = (
       </div>
     </div>
   );
-};
+}
diff --git a/examples/02-ui-components/custom-ui/CustomFormattingToolbar.tsx b/examples/02-ui-components/custom-ui/CustomFormattingToolbar.tsx
index 3d1abcad65..45e41299cd 100644
--- a/examples/02-ui-components/custom-ui/CustomFormattingToolbar.tsx
+++ b/examples/02-ui-components/custom-ui/CustomFormattingToolbar.tsx
@@ -1,5 +1,5 @@
 import {
-  FormattingToolbarProps,
+  useBlockNoteEditor,
   useEditorChange,
   useEditorSelectionChange,
 } from "@blocknote/react";
@@ -30,11 +30,13 @@ type CustomFormattingToolbarState = {
   backgroundColor: string;
 };
 
-export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
+export function CustomFormattingToolbar() {
+  const editor = useBlockNoteEditor();
+
   // Function to get the state of toolbar buttons (active/inactive)
   const getState = (): CustomFormattingToolbarState => {
-    const block = props.editor.getTextCursorPosition().block;
-    const activeStyles = props.editor.getActiveStyles();
+    const block = editor.getTextCursorPosition().block;
+    const activeStyles = editor.getActiveStyles();
 
     return {
       bold: (activeStyles.bold as boolean) || false,
@@ -52,18 +54,18 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
   const setTextAlignment = (
     textAlignment: CustomFormattingToolbarState["textAlignment"]
   ) => {
-    const selection = props.editor.getSelection();
+    const selection = editor.getSelection();
 
     if (selection) {
       for (const block of selection.blocks) {
-        props.editor.updateBlock(block, {
+        editor.updateBlock(block, {
           props: { textAlignment: textAlignment },
         });
       }
     } else {
-      const block = props.editor.getTextCursorPosition().block;
+      const block = editor.getTextCursorPosition().block;
 
-      props.editor.updateBlock(block, {
+      editor.updateBlock(block, {
         props: { textAlignment: textAlignment },
       });
     }
@@ -77,8 +79,8 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
   const [linkMenuOpen, setLinkMenuOpen] = useState(false);
 
   // Updates toolbar state when the editor content or selection changes
-  useEditorChange(() => setState(getState()), props.editor);
-  useEditorSelectionChange(() => setState(getState()), props.editor);
+  useEditorChange(() => setState(getState()), editor);
+  useEditorSelectionChange(() => setState(getState()), editor);
 
   return (
     <div className={"formatting-toolbar"}>
@@ -87,7 +89,7 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
         {/*Toggle bold button*/}
         <button
           className={`formatting-toolbar-button${state.bold ? " active" : ""}`}
-          onClick={() => props.editor.toggleStyles({ bold: true })}>
+          onClick={() => editor.toggleStyles({ bold: true })}>
           <MdFormatBold />
         </button>
         {/*Toggle italic button*/}
@@ -95,7 +97,7 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
           className={`formatting-toolbar-button${
             state.italic ? " active" : ""
           }`}
-          onClick={() => props.editor.toggleStyles({ italic: true })}>
+          onClick={() => editor.toggleStyles({ italic: true })}>
           <MdFormatItalic />
         </button>
         {/*Toggle underline button*/}
@@ -103,7 +105,7 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
           className={`formatting-toolbar-button${
             state.underline ? " active" : ""
           }`}
-          onClick={() => props.editor.toggleStyles({ underline: true })}>
+          onClick={() => editor.toggleStyles({ underline: true })}>
           <MdFormatUnderlined />
         </button>
       </div>
@@ -152,10 +154,7 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
             onClick={() => setColorMenuOpen(!colorMenuOpen)}>
             <MdFormatColorText />
           </button>
-          <ColorMenu
-            editor={props.editor}
-            className={!colorMenuOpen ? "hidden" : undefined}
-          />
+          <ColorMenu className={!colorMenuOpen ? "hidden" : undefined} />
         </div>
       </div>
       {/*Button group for link menu*/}
@@ -169,11 +168,11 @@ export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
             <MdAddLink />
           </button>
           <LinkMenu
-            editor={props.editor}
+            editor={editor}
             className={!linkMenuOpen ? "hidden" : undefined}
           />
         </div>
       </div>
     </div>
   );
-};
+}
diff --git a/examples/02-ui-components/custom-ui/CustomSideMenu.tsx b/examples/02-ui-components/custom-ui/CustomSideMenu.tsx
index 54eb96d5b4..46e426409c 100644
--- a/examples/02-ui-components/custom-ui/CustomSideMenu.tsx
+++ b/examples/02-ui-components/custom-ui/CustomSideMenu.tsx
@@ -1,19 +1,14 @@
-import { BlockNoteEditor } from "@blocknote/core";
-import { DefaultPositionedSideMenu } from "@blocknote/react";
+import { SideMenuProps } from "@blocknote/react";
 import { RxDragHandleHorizontal } from "react-icons/rx";
 
-export const CustomSideMenu = (props: { editor: BlockNoteEditor }) => (
-  <DefaultPositionedSideMenu
-    editor={props.editor}
-    sideMenu={(props) => (
-      // Side menu consists of only a drag handle
-      <div
-        className={"side-menu"}
-        draggable="true"
-        onDragStart={props.blockDragStart}
-        onDragEnd={props.blockDragEnd}>
-        <RxDragHandleHorizontal />
-      </div>
-    )}
-  />
-);
+export function CustomSideMenu(props: SideMenuProps) {
+  return (
+    <div
+      className={"side-menu"}
+      draggable="true"
+      onDragStart={props.blockDragStart}
+      onDragEnd={props.blockDragEnd}>
+      <RxDragHandleHorizontal />
+    </div>
+  );
+}
diff --git a/examples/02-ui-components/custom-ui/CustomSlashMenu.tsx b/examples/02-ui-components/custom-ui/CustomSlashMenu.tsx
index c956f8d437..0999ba3ca6 100644
--- a/examples/02-ui-components/custom-ui/CustomSlashMenu.tsx
+++ b/examples/02-ui-components/custom-ui/CustomSlashMenu.tsx
@@ -1,84 +1,59 @@
-import { BlockNoteEditor } from "@blocknote/core";
-// import { ReactSlashMenuItem, SlashMenuPositioner } from "@blocknote/react";
-// import {
-//   RiH1,
-//   RiH2,
-//   RiH3,
-//   RiListOrdered,
-//   RiListUnordered,
-//   RiText,
-// } from "react-icons/ri";
+import {
+  DefaultReactSuggestionItem,
+  SuggestionMenuProps,
+  useBlockNoteEditor,
+} from "@blocknote/react";
 
-// Icons for slash menu items
-// const icons = {
-//   Paragraph: RiText,
-//   Heading: RiH1,
-//   "Heading 2": RiH2,
-//   "Heading 3": RiH3,
-//   "Numbered List": RiListOrdered,
-//   "Bullet List": RiListUnordered,
-// };
+export function CustomSlashMenu(
+  props: SuggestionMenuProps<DefaultReactSuggestionItem>
+) {
+  const editor = useBlockNoteEditor();
+  const groups: Record<string, DefaultReactSuggestionItem[]> = {};
+  for (const item of props.items) {
+    const group = item.group || item.title;
 
-export const CustomSlashMenu = (props: { editor: BlockNoteEditor }) => {
-  const editor = props.editor;
+    if (!groups[group]) {
+      groups[group] = [];
+    }
 
-  return <div>TODO</div>;
-  // TODO
-  // <SlashMenuPositioner
-  //   editor={editor}
-  //   slashMenu={(props) => {
-  //     // Sorts items by group
-  //     const groups: Record<string, ReactSlashMenuItem[]> = {};
-  //     for (const item of props.filteredItems) {
-  //       if (!groups[item.group]) {
-  //         groups[item.group] = [];
-  //       }
+    groups[group].push(item);
+  }
 
-  //       groups[item.group].push(item);
-  //     }
+  // If query matches no items, show "No matches" message
+  if (props.items.length === 0) {
+    return <div className={"slash-menu"}>No matches</div>;
+  }
 
-  //     // If query matches no items, show "No matches" message
-  //     if (props.filteredItems.length === 0) {
-  //       return <div className={"slash-menu"}>No matches</div>;
-  //     }
-
-  //     return (
-  //       <div className={"slash-menu"}>
-  //         {Object.entries(groups).map(([group, items]) => (
-  //           // Component for each group
-  //           <div key={group} className={"slash-menu-group"}>
-  //             {/*Group label*/}
-  //             <div className={"slash-menu-label"}>{group}</div>
-  //             {/*Group items*/}
-  //             <div className={"slash-menu-item-group"}>
-  //               {items.map((item) => {
-  //                 const Icon =
-  //                   item.name in icons
-  //                     ? icons[item.name as keyof typeof icons]
-  //                     : "div";
-  //                 return (
-  //                   <button
-  //                     key={item.name}
-  //                     className={`slash-menu-item${
-  //                       props.filteredItems.indexOf(item) ===
-  //                       props.keyboardHoveredItemIndex
-  //                         ? " active"
-  //                         : ""
-  //                     }`}
-  //                     onClick={() => {
-  //                       item.execute(editor);
-  //                       editor.focus();
-  //                     }}>
-  //                     <Icon />
-  //                   </button>
-  //                 );
-  //               })}
-  //             </div>
-  //           </div>
-  //         ))}
-  //       </div>
-  //     );
-  //   }}
-  // />
-  // );
-};
+  return (
+    <div className={"slash-menu"}>
+      {Object.entries(groups).map(([group, items]) => (
+        // Component for each group
+        <div key={group} className={"slash-menu-group"}>
+          {/*Group label*/}
+          <div className={"slash-menu-label"}>{group}</div>
+          {/*Group items*/}
+          <div className={"slash-menu-item-group"}>
+            {items.map((item: DefaultReactSuggestionItem) => {
+              const Icon = item.icon;
+              return (
+                <button
+                  key={item.title}
+                  className={`slash-menu-item${
+                    props.items.indexOf(item) === props.selectedIndex
+                      ? " active"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    props.onItemClick?.(item);
+                    editor.focus();
+                  }}>
+                  {Icon}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/examples/02-ui-components/custom-ui/LinkMenu.tsx b/examples/02-ui-components/custom-ui/LinkMenu.tsx
index e951e0b93f..7d66c1ab97 100644
--- a/examples/02-ui-components/custom-ui/LinkMenu.tsx
+++ b/examples/02-ui-components/custom-ui/LinkMenu.tsx
@@ -1,9 +1,9 @@
-import { FormattingToolbarProps } from "@blocknote/react";
 import { HTMLAttributes, useState } from "react";
+import { BlockNoteEditor } from "@blocknote/core";
 
 // Formatting Toolbar sub menu for creating links
 export const LinkMenu = (
-  props: FormattingToolbarProps<any> & HTMLAttributes<HTMLDivElement>
+  props: { editor: BlockNoteEditor } & HTMLAttributes<HTMLDivElement>
 ) => {
   const { editor, className, ...rest } = props;
 
diff --git a/examples/02-ui-components/custom-ui/README.md b/examples/02-ui-components/custom-ui/README.md
index efe96726c8..ccc7fa5e75 100644
--- a/examples/02-ui-components/custom-ui/README.md
+++ b/examples/02-ui-components/custom-ui/README.md
@@ -4,7 +4,6 @@ In this example, we create a custom static Formatting Toolbar from scratch, as w
 
 **Relevant Docs:**
 
-- [Formatting Toolbar](/docs/formatting-toolbar)
-- [Slash Menu](/docs/slash-menu)
-- [Side Menu](/docs/side-menu)
-- [Replacing UI Elements](/docs/ui-elements#replacing-ui-elements)
\ No newline at end of file
+- [Formatting Toolbar](/docs/ui-components/formatting-toolbar)
+- [Slash Menu](/docs/ui-components/slash-menu)
+- [Side Menu](/docs/ui-components/side-menu)
\ No newline at end of file
diff --git a/examples/02-ui-components/custom-ui/package.json b/examples/02-ui-components/custom-ui/package.json
index 0d1f7f0fdc..e3902d677f 100644
--- a/examples/02-ui-components/custom-ui/package.json
+++ b/examples/02-ui-components/custom-ui/package.json
@@ -15,7 +15,8 @@
     "@blocknote/react": "^0.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@mantine/core": "^7.4.2"
+    "@mantine/core": "^7.5.0",
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
diff --git a/examples/02-ui-components/slash-menu-items/.bnexample.json b/examples/02-ui-components/formatting-toolbar-block-type-items/.bnexample.json
similarity index 100%
rename from examples/02-ui-components/slash-menu-items/.bnexample.json
rename to examples/02-ui-components/formatting-toolbar-block-type-items/.bnexample.json
diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx
new file mode 100644
index 0000000000..25ace75e23
--- /dev/null
+++ b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx
@@ -0,0 +1,63 @@
+import {
+  BlockNoteView,
+  BlockTypeDropdownItem,
+  blockTypeDropdownItems,
+  FormattingToolbar,
+  FormattingToolbarController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+import { RiImage2Fill } from "react-icons/ri";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content:
+          "Try selecting some text - you'll see the new 'Image' item in the Block Type Dropdown",
+      },
+      {
+        type: "paragraph",
+        content:
+          "Or select the image below - the Block Type Dropdown now appears",
+      },
+      {
+        type: "image",
+        props: {
+          url: "https://www.economist.com/cdn-cgi/image/width=1424,quality=80,format=auto/content-assets/images/20230708_STP001.jpg",
+          width: 200,
+        },
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} formattingToolbar={false}>
+      <FormattingToolbarController
+        formattingToolbar={() => (
+          <FormattingToolbar
+            blockTypeDropdownItems={[
+              ...blockTypeDropdownItems,
+              {
+                name: "Image",
+                type: "image",
+                icon: RiImage2Fill,
+                isSelected: (block) => block.type === "image",
+              } satisfies BlockTypeDropdownItem,
+            ]}
+          />
+        )}
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/README.md b/examples/02-ui-components/formatting-toolbar-block-type-items/README.md
new file mode 100644
index 0000000000..5388a5f75a
--- /dev/null
+++ b/examples/02-ui-components/formatting-toolbar-block-type-items/README.md
@@ -0,0 +1,7 @@
+# Adding Block Type Dropdown Items
+
+In this example, we make the Block Type Dropdown work for image blocks by adding an item to it.
+
+**Relevant Docs:**
+
+- [Changing Block Type Dropdown Items](/docs/ui-components/formatting-toolbar#changing-block-type-dropdown-items)
\ No newline at end of file
diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/index.html b/examples/02-ui-components/formatting-toolbar-block-type-items/index.html
new file mode 100644
index 0000000000..258dfd61f4
--- /dev/null
+++ b/examples/02-ui-components/formatting-toolbar-block-type-items/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Adding Block Type Dropdown Items</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/theming-css-variables/main.tsx b/examples/02-ui-components/formatting-toolbar-block-type-items/main.tsx
similarity index 100%
rename from examples/04-theming/theming-css-variables/main.tsx
rename to examples/02-ui-components/formatting-toolbar-block-type-items/main.tsx
diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/package.json b/examples/02-ui-components/formatting-toolbar-block-type-items/package.json
new file mode 100644
index 0000000000..6139838986
--- /dev/null
+++ b/examples/02-ui-components/formatting-toolbar-block-type-items/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@blocknote/example-formatting-toolbar-block-type-items",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/04-theming/theming-css-variables/tsconfig.json b/examples/02-ui-components/formatting-toolbar-block-type-items/tsconfig.json
similarity index 100%
rename from examples/04-theming/theming-css-variables/tsconfig.json
rename to examples/02-ui-components/formatting-toolbar-block-type-items/tsconfig.json
diff --git a/examples/04-theming/theming-css-variables/vite.config.ts b/examples/02-ui-components/formatting-toolbar-block-type-items/vite.config.ts
similarity index 100%
rename from examples/04-theming/theming-css-variables/vite.config.ts
rename to examples/02-ui-components/formatting-toolbar-block-type-items/vite.config.ts
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/App.tsx b/examples/02-ui-components/formatting-toolbar-buttons/App.tsx
index 41ed8abda3..fa1080f16c 100644
--- a/examples/02-ui-components/formatting-toolbar-buttons/App.tsx
+++ b/examples/02-ui-components/formatting-toolbar-buttons/App.tsx
@@ -1,10 +1,128 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import {
+  BasicTextStyleButton,
+  BlockNoteView,
+  BlockTypeDropdown,
+  ColorStyleButton,
+  CreateLinkButton,
+  FormattingToolbar,
+  FormattingToolbarController,
+  ImageCaptionButton,
+  NestBlockButton,
+  ReplaceImageButton,
+  TextAlignButton,
+  UnnestBlockButton,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
+import { BlueButton } from "./BlueButton";
+
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "You can now toggle ",
+            styles: {},
+          },
+          {
+            type: "text",
+            text: "blue",
+            styles: { textColor: "blue", backgroundColor: "blue" },
+          },
+          {
+            type: "text",
+            text: " and ",
+            styles: {},
+          },
+          {
+            type: "text",
+            text: "code",
+            styles: { code: true },
+          },
+          {
+            type: "text",
+            text: " styles with new buttons is the Formatting Toolbar",
+            styles: {},
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: "Select some text to try them out",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor}>{/* TODO */}</BlockNoteView>;
+  return (
+    <BlockNoteView editor={editor} formattingToolbar={false}>
+      <FormattingToolbarController
+        formattingToolbar={() => (
+          <FormattingToolbar>
+            <BlockTypeDropdown key={"blockTypeDropdown"} />
+
+            {/* Extra button to toggle blue text & background */}
+            <BlueButton key={"customButton"} />
+
+            <ImageCaptionButton key={"imageCaptionButton"} />
+            <ReplaceImageButton key={"replaceImageButton"} />
+
+            <BasicTextStyleButton
+              basicTextStyle={"bold"}
+              key={"boldStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"italic"}
+              key={"italicStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"underline"}
+              key={"underlineStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"strike"}
+              key={"strikeStyleButton"}
+            />
+            {/* Extra button to toggle code styles */}
+            <BasicTextStyleButton
+              key={"codeStyleButton"}
+              basicTextStyle={"code"}
+            />
+
+            <TextAlignButton
+              textAlignment={"left"}
+              key={"textAlignLeftButton"}
+            />
+            <TextAlignButton
+              textAlignment={"center"}
+              key={"textAlignCenterButton"}
+            />
+            <TextAlignButton
+              textAlignment={"right"}
+              key={"textAlignRightButton"}
+            />
+
+            <ColorStyleButton key={"colorStyleButton"} />
+
+            <NestBlockButton key={"nestBlockButton"} />
+            <UnnestBlockButton key={"unnestBlockButton"} />
+
+            <CreateLinkButton key={"createLinkButton"} />
+          </FormattingToolbar>
+        )}
+      />
+    </BlockNoteView>
+  );
 }
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/BlueButton.tsx b/examples/02-ui-components/formatting-toolbar-buttons/BlueButton.tsx
new file mode 100644
index 0000000000..ec6a09cc20
--- /dev/null
+++ b/examples/02-ui-components/formatting-toolbar-buttons/BlueButton.tsx
@@ -0,0 +1,38 @@
+import {
+  ToolbarButton,
+  useBlockNoteEditor,
+  useEditorContentOrSelectionChange,
+} from "@blocknote/react";
+import { useState } from "react";
+
+export function BlueButton() {
+  const editor = useBlockNoteEditor();
+
+  // Tracks whether the text & background are both blue.
+  const [isSelected, setIsSelected] = useState<boolean>(
+    editor.getActiveStyles().textColor === "blue" &&
+      editor.getActiveStyles().backgroundColor === "blue"
+  );
+
+  // Updates state on content or selection change.
+  useEditorContentOrSelectionChange(() => {
+    setIsSelected(
+      editor.getActiveStyles().textColor === "blue" &&
+        editor.getActiveStyles().backgroundColor === "blue"
+    );
+  }, editor);
+
+  return (
+    <ToolbarButton
+      mainTooltip={"Blue Text & Background"}
+      onClick={() => {
+        editor.toggleStyles({
+          textColor: "blue",
+          backgroundColor: "blue",
+        });
+      }}
+      isSelected={isSelected}>
+      Blue
+    </ToolbarButton>
+  );
+}
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/CustomButton.tsx b/examples/02-ui-components/formatting-toolbar-buttons/CustomButton.tsx
deleted file mode 100644
index e9e6b16dcd..0000000000
--- a/examples/02-ui-components/formatting-toolbar-buttons/CustomButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { BlockNoteEditor } from "@blocknote/core";
-import {
-  ToolbarButton,
-  useEditorChange,
-  useEditorSelectionChange,
-} from "@blocknote/react";
-import { useState } from "react";
-
-export const CustomButton = (props: { editor: BlockNoteEditor }) => {
-  // Tracks whether the text & background are both blue.
-  const [isSelected, setIsSelected] = useState<boolean>(
-    props.editor.getActiveStyles().textColor === "blue" &&
-      props.editor.getActiveStyles().backgroundColor === "blue"
-  );
-
-  // Updates state on content change.
-  useEditorChange(() => {
-    setIsSelected(
-      props.editor.getActiveStyles().textColor === "blue" &&
-        props.editor.getActiveStyles().backgroundColor === "blue"
-    );
-  }, props.editor);
-
-  // Updates state on selection change.
-  useEditorSelectionChange(() => {
-    setIsSelected(
-      props.editor.getActiveStyles().textColor === "blue" &&
-        props.editor.getActiveStyles().backgroundColor === "blue"
-    );
-  }, props.editor);
-
-  return (
-    <ToolbarButton
-      mainTooltip={"Blue Text & Background"}
-      onClick={() => {
-        props.editor.toggleStyles({
-          textColor: "blue",
-          backgroundColor: "blue",
-        });
-      }}
-      isSelected={isSelected}>
-      Blue
-    </ToolbarButton>
-  );
-};
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx b/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx
deleted file mode 100644
index fc93b1d001..0000000000
--- a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  BlockTypeDropdown,
-  ColorStyleButton,
-  CreateLinkButton,
-  FormattingToolbarProps,
-  ImageCaptionButton,
-  NestBlockButton,
-  ReplaceImageButton,
-  TextAlignButton,
-  ToggledStyleButton,
-  Toolbar,
-  UnnestBlockButton,
-} from "@blocknote/react";
-import { CustomButton } from "./CustomButton";
-
-export function CustomFormattingToolbar(props: FormattingToolbarProps<any>) {
-  return (
-    <Toolbar>
-      <BlockTypeDropdown {...props} />
-
-      {/*Custom button to toggle blue text & background color.*/}
-      <CustomButton editor={props.editor} />
-
-      <ImageCaptionButton editor={props.editor} />
-      <ReplaceImageButton editor={props.editor} />
-
-      <ToggledStyleButton editor={props.editor} toggledStyle={"bold"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"italic"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"underline"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"strike"} />
-      {/* Added code toggle button */}
-      <ToggledStyleButton editor={props.editor} toggledStyle={"code"} />
-
-      <TextAlignButton editor={props.editor as any} textAlignment={"left"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"center"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"right"} />
-
-      <ColorStyleButton editor={props.editor} />
-
-      <NestBlockButton editor={props.editor} />
-      <UnnestBlockButton editor={props.editor} />
-
-      <CreateLinkButton editor={props.editor} />
-    </Toolbar>
-  );
-}
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/README.md b/examples/02-ui-components/formatting-toolbar-buttons/README.md
index 9266bc8fd8..5a0759280a 100644
--- a/examples/02-ui-components/formatting-toolbar-buttons/README.md
+++ b/examples/02-ui-components/formatting-toolbar-buttons/README.md
@@ -4,4 +4,4 @@ In this example, we add a blue text/background color and code style button to th
 
 **Relevant Docs:**
 
-- [Custom Formatting Toolbar](/docs/formatting-toolbar#custom-formatting-toolbar)
\ No newline at end of file
+- [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar)
\ No newline at end of file
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/.bnexample.json b/examples/02-ui-components/hyperlink-toolbar-buttons/.bnexample.json
new file mode 100644
index 0000000000..73d41ba3c8
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "group": "Basic Examples",
+  "order": 1
+}
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx b/examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx
new file mode 100644
index 0000000000..7ccba65259
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx
@@ -0,0 +1,61 @@
+import {
+  BlockNoteView,
+  HyperlinkToolbar,
+  HyperlinkToolbarController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+import { CustomButton } from "./CustomButton";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Hover the link below to see the modified Hyperlink Toolbar",
+      },
+      {
+        type: "paragraph",
+        content: [
+          // TODO: Fix link styles (think it's website only)
+          {
+            type: "link",
+            href: "https://www.blocknotejs.org/",
+            content: [
+              {
+                type: "text",
+                text: "Home Page",
+                styles: {},
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} hyperlinkToolbar={false}>
+      <HyperlinkToolbarController
+        hyperlinkToolbar={(props) => (
+          // TODO: We don't export the default buttons atm. Also, the edit button
+          //  replaces the entire toolbar component when editing, which seems like a
+          //  massive pain when you want to customize the hyperlink. Lots of
+          //  refactoring probably needed here.
+          <HyperlinkToolbar {...props}>
+            <CustomButton {...props} />
+          </HyperlinkToolbar>
+        )}
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/CustomButton.tsx b/examples/02-ui-components/hyperlink-toolbar-buttons/CustomButton.tsx
new file mode 100644
index 0000000000..cf9ab0f364
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/CustomButton.tsx
@@ -0,0 +1,13 @@
+import { HyperlinkToolbarProps, ToolbarButton } from "@blocknote/react";
+
+export function CustomButton(props: HyperlinkToolbarProps) {
+  return (
+    <ToolbarButton
+      mainTooltip={"Open Alert with URL"}
+      onClick={() => {
+        window.alert(`Link URL: ${props.url}`);
+      }}>
+      Open Alert
+    </ToolbarButton>
+  );
+}
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/README.md b/examples/02-ui-components/hyperlink-toolbar-buttons/README.md
new file mode 100644
index 0000000000..e549772e6b
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/README.md
@@ -0,0 +1,7 @@
+# Adding Hyperlink Toolbar Buttons
+
+In this example, we add a button to the Hyperlink Toolbar which opens a browser alert.
+
+**Relevant Docs:**
+
+- [Changing the Hyperlink Toolbar](/docs/ui-components/hyperlink-toolbar#changing-the-hyperlink-toolbar)
\ No newline at end of file
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/index.html b/examples/02-ui-components/hyperlink-toolbar-buttons/index.html
new file mode 100644
index 0000000000..b30eb96292
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Adding Hyperlink Toolbar Buttons</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/theming-css/main.tsx b/examples/02-ui-components/hyperlink-toolbar-buttons/main.tsx
similarity index 100%
rename from examples/04-theming/theming-css/main.tsx
rename to examples/02-ui-components/hyperlink-toolbar-buttons/main.tsx
diff --git a/examples/02-ui-components/hyperlink-toolbar-buttons/package.json b/examples/02-ui-components/hyperlink-toolbar-buttons/package.json
new file mode 100644
index 0000000000..f0c5518829
--- /dev/null
+++ b/examples/02-ui-components/hyperlink-toolbar-buttons/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-hyperlink-toolbar-buttons",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/04-theming/theming-css/tsconfig.json b/examples/02-ui-components/hyperlink-toolbar-buttons/tsconfig.json
similarity index 100%
rename from examples/04-theming/theming-css/tsconfig.json
rename to examples/02-ui-components/hyperlink-toolbar-buttons/tsconfig.json
diff --git a/examples/04-theming/theming-css/vite.config.ts b/examples/02-ui-components/hyperlink-toolbar-buttons/vite.config.ts
similarity index 100%
rename from examples/04-theming/theming-css/vite.config.ts
rename to examples/02-ui-components/hyperlink-toolbar-buttons/vite.config.ts
diff --git a/examples/02-ui-components/side-menu-buttons/App.tsx b/examples/02-ui-components/side-menu-buttons/App.tsx
index ceec9e3d59..83f0b764b5 100644
--- a/examples/02-ui-components/side-menu-buttons/App.tsx
+++ b/examples/02-ui-components/side-menu-buttons/App.tsx
@@ -1,18 +1,48 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import {
+  BlockNoteView,
+  DragHandleButton,
+  SideMenu,
+  SideMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
+import { RemoveBlockButton } from "./RemoveBlockButton";
+
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "<- Notice the new button in the side menu",
+      },
+      {
+        type: "paragraph",
+        content: "Click it to remove the hovered block",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
-      {/* TODO
-      <FormattingToolbarPositioner editor={editor} />
-      <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner editor={editor} sideMenu={CustomSideMenu} /> */}
+    <BlockNoteView editor={editor} sideMenu={false}>
+      <SideMenuController
+        sideMenu={(props) => (
+          <SideMenu {...props}>
+            {/*Custom button which removes the hovered block.*/}
+            <RemoveBlockButton {...props} />
+            <DragHandleButton {...props} />
+          </SideMenu>
+        )}
+      />
     </BlockNoteView>
   );
 }
diff --git a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx b/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx
deleted file mode 100644
index ef9e43afac..0000000000
--- a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-  DragHandle,
-  SideMenu,
-  SideMenuButton,
-  SideMenuProps,
-} from "@blocknote/react";
-import "@blocknote/react/style.css";
-import { MdDelete } from "react-icons/md";
-
-export const CustomSideMenu = (props: SideMenuProps) => (
-  <SideMenu>
-    <SideMenuButton>
-      <MdDelete
-        size={24}
-        onClick={() => props.editor.removeBlocks([props.block])}
-      />
-    </SideMenuButton>
-    <DragHandle {...props} />
-  </SideMenu>
-);
diff --git a/examples/02-ui-components/side-menu-buttons/README.md b/examples/02-ui-components/side-menu-buttons/README.md
index bbff885ad3..757118a6c8 100644
--- a/examples/02-ui-components/side-menu-buttons/README.md
+++ b/examples/02-ui-components/side-menu-buttons/README.md
@@ -1,7 +1,7 @@
-# Adding Side Menu Buttons
+# Adding Block Side Menu Buttons
 
 In this example, we replace the add block button with a delete block button in the Side Menu.
 
 **Relevant Docs:**
 
-- [Custom Side Menu](/docs/side-menu#custom-side-menu)
\ No newline at end of file
+- [Changing the Block Side Menu](/docs/ui-components/side-menu#changing-the-block-side-menu)
\ No newline at end of file
diff --git a/examples/02-ui-components/side-menu-buttons/RemoveBlockButton.tsx b/examples/02-ui-components/side-menu-buttons/RemoveBlockButton.tsx
new file mode 100644
index 0000000000..ae5fb7db14
--- /dev/null
+++ b/examples/02-ui-components/side-menu-buttons/RemoveBlockButton.tsx
@@ -0,0 +1,21 @@
+import {
+  SideMenuButton,
+  SideMenuProps,
+  useBlockNoteEditor,
+} from "@blocknote/react";
+import { MdDelete } from "react-icons/md";
+
+export function RemoveBlockButton(props: SideMenuProps) {
+  const editor = useBlockNoteEditor();
+
+  return (
+    <SideMenuButton>
+      <MdDelete
+        size={24}
+        onClick={() => {
+          editor.removeBlocks([props.block]);
+        }}
+      />
+    </SideMenuButton>
+  );
+}
diff --git a/examples/02-ui-components/side-menu-buttons/index.html b/examples/02-ui-components/side-menu-buttons/index.html
index 0a4e230065..5417d76adf 100644
--- a/examples/02-ui-components/side-menu-buttons/index.html
+++ b/examples/02-ui-components/side-menu-buttons/index.html
@@ -5,7 +5,7 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Adding Side Menu Buttons</title>
+    <title>Adding Block Side Menu Buttons</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/02-ui-components/side-menu-drag-handle-items/App.tsx b/examples/02-ui-components/side-menu-drag-handle-items/App.tsx
index c25f538267..861d2c4b50 100644
--- a/examples/02-ui-components/side-menu-drag-handle-items/App.tsx
+++ b/examples/02-ui-components/side-menu-drag-handle-items/App.tsx
@@ -1,23 +1,61 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import {
+  BlockColorsItem,
+  BlockNoteView,
+  DragHandleMenu,
+  DragHandleMenuItem,
+  RemoveBlockItem,
+  SideMenu,
+  SideMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "<- Click the Drag Handle to see the new item",
+      },
+      {
+        type: "bulletListItem",
+        content:
+          "Try resetting this block's type using the new Drag Handle Menu item",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
-      {/* TODO */}
-      {/* <FormattingToolbarPositioner editor={editor} />
-      <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner
-        editor={editor}
+    <BlockNoteView editor={editor} sideMenu={false}>
+      <SideMenuController
         sideMenu={(props) => (
-          <DefaultSideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
-        )} */}
-      {/* /> */}
+          <SideMenu
+            {...props}
+            dragHandleMenu={(props) => (
+              <DragHandleMenu {...props}>
+                <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
+                <BlockColorsItem {...props}>Colors</BlockColorsItem>
+                {/*Custom item which resets the hovered block's type.*/}
+                <DragHandleMenuItem
+                  onClick={() => {
+                    editor.updateBlock(props.block, { type: "paragraph" });
+                  }}>
+                  Reset Type
+                </DragHandleMenuItem>
+              </DragHandleMenu>
+            )}
+          />
+        )}
+      />
     </BlockNoteView>
   );
 }
diff --git a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx b/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx
deleted file mode 100644
index 264e90addc..0000000000
--- a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-  BlockColorsButton,
-  DragHandleMenu,
-  DragHandleMenuItem,
-  DragHandleMenuProps,
-  RemoveBlockButton,
-} from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-export const CustomDragHandleMenu = (
-  props: DragHandleMenuProps<any, any, any>
-) => {
-  return (
-    <DragHandleMenu>
-      <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
-      <BlockColorsButton {...props}>Colors</BlockColorsButton>
-      {/*Custom item which opens an alert when clicked.*/}
-      <DragHandleMenuItem onClick={() => window.alert("Button Pressed!")}>
-        Open Alert
-      </DragHandleMenuItem>
-    </DragHandleMenu>
-  );
-};
diff --git a/examples/02-ui-components/side-menu-drag-handle-items/README.md b/examples/02-ui-components/side-menu-drag-handle-items/README.md
index 5311112763..fe0d2dd1a7 100644
--- a/examples/02-ui-components/side-menu-drag-handle-items/README.md
+++ b/examples/02-ui-components/side-menu-drag-handle-items/README.md
@@ -4,4 +4,4 @@ In this example, we add an item to the Drag Handle Menu, which opens an alert in
 
 **Relevant Docs:**
 
-- [Custom Drag Handle Menu](/docs/side-menu#custom-drag-handle-menu)
\ No newline at end of file
+- [Changing Drag Handle Menu Items](/docs/ui-components/side-menu#changing-drag-handle-menu-items)
\ No newline at end of file
diff --git a/examples/02-ui-components/slash-menu-items/App.tsx b/examples/02-ui-components/slash-menu-items/App.tsx
deleted file mode 100644
index bbcdd03620..0000000000
--- a/examples/02-ui-components/slash-menu-items/App.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-// import { customSlashMenuItems } from "./CustomSlashMenuItems";
-
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useBlockNote({
-    // slashMenuItems: customSlashMenuItems, TODO
-  });
-
-  // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
-}
diff --git a/examples/02-ui-components/slash-menu-items/CustomSlashMenuItems.tsx b/examples/02-ui-components/slash-menu-items/CustomSlashMenuItems.tsx
deleted file mode 100644
index 7aeb9d4e3a..0000000000
--- a/examples/02-ui-components/slash-menu-items/CustomSlashMenuItems.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  BlockNoteEditor,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  DefaultStyleSchema,
-  PartialBlock,
-} from "@blocknote/core";
-import {
-  getDefaultReactSlashMenuItems,
-  ReactSlashMenuItem,
-} from "@blocknote/react";
-import { HiOutlineGlobeAlt } from "react-icons/hi";
-
-// Command to insert "Hello World" in bold in a new block below.
-const insertHelloWorld = (editor: BlockNoteEditor) => {
-  // Block that the text cursor is currently in.
-  const currentBlock = editor.getTextCursorPosition().block;
-
-  // New block we want to insert.
-  const helloWorldBlock: PartialBlock<
-    DefaultBlockSchema,
-    DefaultInlineContentSchema,
-    DefaultStyleSchema
-  > = {
-    type: "paragraph",
-    content: [{ type: "text", text: "Hello World", styles: { bold: true } }],
-  };
-
-  // Inserting the new block after the current one.
-  editor.insertBlocks([helloWorldBlock], currentBlock, "after");
-};
-
-// Custom Slash Menu item which executes the above function.
-const insertHelloWorldItem: ReactSlashMenuItem = {
-  name: "Insert Hello World",
-  execute: insertHelloWorld,
-  aliases: ["helloworld", "hw"],
-  group: "Other",
-  icon: <HiOutlineGlobeAlt size={18} />,
-  hint: "Used to insert a block with 'Hello World' below.",
-};
-
-// List containing all default Slash Menu Items, as well as our custom one.
-export const customSlashMenuItems = [
-  ...getDefaultReactSlashMenuItems(),
-  insertHelloWorldItem,
-];
diff --git a/examples/02-ui-components/suggestion-menus-mentions/.bnexample.json b/examples/02-ui-components/suggestion-menus-mentions/.bnexample.json
new file mode 100644
index 0000000000..73d41ba3c8
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "group": "Basic Examples",
+  "order": 1
+}
diff --git a/examples/02-ui-components/suggestion-menus-mentions/App.tsx b/examples/02-ui-components/suggestion-menus-mentions/App.tsx
new file mode 100644
index 0000000000..f5d21af148
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/App.tsx
@@ -0,0 +1,97 @@
+import {
+  BlockNoteSchema,
+  defaultInlineContentSpecs,
+  filterSuggestionItems,
+} from "@blocknote/core";
+import {
+  BlockNoteView,
+  DefaultReactSuggestionItem,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import { Mention } from "./Mention";
+
+// Our schema with inline content specs, which contain the configs and implementations for inline content
+// that we want our editor to use.
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    // Adds all default inline content.
+    ...defaultInlineContentSpecs,
+    // Adds the mention tag.
+    mention: Mention,
+  },
+});
+
+// Function which gets all users for the mentions menu.
+const getMentionMenuItems = (
+  editor: typeof schema.BlockNoteEditor
+): DefaultReactSuggestionItem[] => {
+  const users = ["Steve", "Bob", "Joe", "Mike"];
+
+  return users.map((user) => ({
+    title: user,
+    onItemClick: () => {
+      // TODO: Better API
+      editor._tiptapEditor.commands.insertContent({
+        type: "mention",
+        attrs: {
+          user: user,
+        },
+      });
+    },
+  }));
+};
+
+export function App() {
+  const editor = useCreateBlockNote({
+    schema,
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "mention",
+            props: {
+              user: "Steve",
+            },
+            // TODO: Typing needs fix
+            content: undefined,
+          },
+          {
+            type: "text",
+            text: " <- This is an example mention",
+            styles: {},
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: "Press the '@' key to open the mention menu and add another",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  return (
+    <BlockNoteView editor={editor}>
+      {/* Adds a mentions menu which opens with the "@" key. */}
+      <SuggestionMenuController
+        triggerCharacter={"@"}
+        getItems={async (query) =>
+          // Gets the mentions menu items.
+          filterSuggestionItems(getMentionMenuItems(editor), query)
+        }
+      />
+    </BlockNoteView>
+  );
+}
+
+export default App;
diff --git a/examples/02-ui-components/suggestion-menus-mentions/Mention.tsx b/examples/02-ui-components/suggestion-menus-mentions/Mention.tsx
new file mode 100644
index 0000000000..83eaccf733
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/Mention.tsx
@@ -0,0 +1,20 @@
+import { createReactInlineContentSpec } from "@blocknote/react";
+
+export const Mention = createReactInlineContentSpec(
+  {
+    type: "mention",
+    propSchema: {
+      user: {
+        default: "Unknown",
+      },
+    },
+    content: "none",
+  } as const,
+  {
+    render: (props) => (
+      <span style={{ backgroundColor: "#8400ff33" }}>
+        @{props.inlineContent.props.user}
+      </span>
+    ),
+  }
+);
diff --git a/examples/02-ui-components/suggestion-menus-mentions/README.md b/examples/02-ui-components/suggestion-menus-mentions/README.md
new file mode 100644
index 0000000000..c133aaa74d
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/README.md
@@ -0,0 +1,7 @@
+# Adding Suggestion Menu
+
+In this example, we add a Suggestion Menu for mentions which opens with the "@" character.
+
+**Relevant Docs:**
+
+- [Creating Suggestion Menus](/docs/ui-components/slash-menu#creating-suggestion-menus)
\ No newline at end of file
diff --git a/examples/02-ui-components/suggestion-menus-mentions/index.html b/examples/02-ui-components/suggestion-menus-mentions/index.html
new file mode 100644
index 0000000000..e528ed2fcd
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Adding Suggestion Menu</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/theming-dom-attributes/main.tsx b/examples/02-ui-components/suggestion-menus-mentions/main.tsx
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/main.tsx
rename to examples/02-ui-components/suggestion-menus-mentions/main.tsx
diff --git a/examples/02-ui-components/suggestion-menus-mentions/package.json b/examples/02-ui-components/suggestion-menus-mentions/package.json
new file mode 100644
index 0000000000..4015901188
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-mentions/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-suggestion-menus-mentions",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/04-theming/theming-dom-attributes/tsconfig.json b/examples/02-ui-components/suggestion-menus-mentions/tsconfig.json
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/tsconfig.json
rename to examples/02-ui-components/suggestion-menus-mentions/tsconfig.json
diff --git a/examples/04-theming/theming-dom-attributes/vite.config.ts b/examples/02-ui-components/suggestion-menus-mentions/vite.config.ts
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/vite.config.ts
rename to examples/02-ui-components/suggestion-menus-mentions/vite.config.ts
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/.bnexample.json b/examples/02-ui-components/suggestion-menus-slash-menu-component/.bnexample.json
new file mode 100644
index 0000000000..73d41ba3c8
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "group": "Basic Examples",
+  "order": 1
+}
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/App.tsx b/examples/02-ui-components/suggestion-menus-slash-menu-component/App.tsx
new file mode 100644
index 0000000000..a37d00045f
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/App.tsx
@@ -0,0 +1,65 @@
+import {
+  BlockNoteView,
+  DefaultReactSuggestionItem,
+  SuggestionMenuController,
+  SuggestionMenuProps,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import "./styles.css";
+
+function CustomSlashMenu(
+  props: SuggestionMenuProps<DefaultReactSuggestionItem>
+) {
+  return (
+    <div className={"slash-menu"}>
+      {props.items.map((item, index) => (
+        <div
+          className={`slash-menu-item${
+            props.selectedIndex === index ? " selected" : ""
+          }`}
+          onClick={() => {
+            // TODO: Should not be undefined since we use
+            //  DefaultReactSuggestionItem
+            props.onItemClick?.(item);
+          }}>
+          {item.title}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Press the '/' key to open the Slash Menu",
+      },
+      {
+        type: "paragraph",
+        content: "It's been replaced with a custom component",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        suggestionMenuComponent={CustomSlashMenu}
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/README.md b/examples/02-ui-components/suggestion-menus-slash-menu-component/README.md
new file mode 100644
index 0000000000..449c78e910
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/README.md
@@ -0,0 +1,7 @@
+# Replacing Slash Menu Component
+
+In this example, we replace the default Slash Menu component with a basic custom one.
+
+**Relevant Docs:**
+
+- [Replacing the Slash Menu Component](/docs/ui-components/slash-menu#replacing-the-slash-menu-component)
\ No newline at end of file
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/index.html b/examples/02-ui-components/suggestion-menus-slash-menu-component/index.html
new file mode 100644
index 0000000000..a2c63152a7
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Replacing Slash Menu Component</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/05-cursor-selections/selection-blocks/main.tsx b/examples/02-ui-components/suggestion-menus-slash-menu-component/main.tsx
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/main.tsx
rename to examples/02-ui-components/suggestion-menus-slash-menu-component/main.tsx
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/package.json b/examples/02-ui-components/suggestion-menus-slash-menu-component/package.json
new file mode 100644
index 0000000000..4cfa41f45b
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-suggestion-menus-slash-menu-component",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-component/styles.css b/examples/02-ui-components/suggestion-menus-slash-menu-component/styles.css
new file mode 100644
index 0000000000..61a6e95323
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-component/styles.css
@@ -0,0 +1,37 @@
+.slash-menu {
+    z-index: 9999;
+
+    background-color: white;
+    border: 1px solid lightgray;
+    border-radius: 2px;
+    box-shadow: 0 0 8px #dddddd;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    padding: 8px;
+
+    top: 8px;
+}
+
+.slash-menu-item {
+    background-color: white;
+    border: 1px solid lightgray;
+    border-radius: 2px;
+    box-shadow: 0 0 4px #dddddd;
+
+    cursor: pointer;
+
+    font-size: 16px;
+
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    padding: 8px;
+}
+
+.slash-menu-item:hover, .slash-menu-item.selected {
+    background-color: lightgray;
+}
\ No newline at end of file
diff --git a/examples/05-cursor-selections/selection-blocks/tsconfig.json b/examples/02-ui-components/suggestion-menus-slash-menu-component/tsconfig.json
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/tsconfig.json
rename to examples/02-ui-components/suggestion-menus-slash-menu-component/tsconfig.json
diff --git a/examples/05-cursor-selections/selection-blocks/vite.config.ts b/examples/02-ui-components/suggestion-menus-slash-menu-component/vite.config.ts
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/vite.config.ts
rename to examples/02-ui-components/suggestion-menus-slash-menu-component/vite.config.ts
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-items/.bnexample.json b/examples/02-ui-components/suggestion-menus-slash-menu-items/.bnexample.json
new file mode 100644
index 0000000000..c853929c1e
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-items/.bnexample.json
@@ -0,0 +1,9 @@
+{
+  "playground": true,
+  "docs": true,
+  "group": "Basic Examples",
+  "order": 1,
+  "dependencies": {
+    "react-icons": "^4.3.1"
+  }
+}
diff --git a/examples/02-ui-components/suggestion-menus-slash-menu-items/App.tsx b/examples/02-ui-components/suggestion-menus-slash-menu-items/App.tsx
new file mode 100644
index 0000000000..82fdbd9b6c
--- /dev/null
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-items/App.tsx
@@ -0,0 +1,79 @@
+import {
+  BlockNoteEditor,
+  filterSuggestionItems,
+  PartialBlock,
+} from "@blocknote/core";
+import {
+  BlockNoteView,
+  DefaultReactSuggestionItem,
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+import { HiOutlineGlobeAlt } from "react-icons/hi";
+
+// Custom Slash Menu item which executes the above function.
+const insertHelloWorldItem = (editor: BlockNoteEditor) => ({
+  title: "Insert Hello World",
+  onItemClick: () => {
+    // Block that the text cursor is currently in.
+    const currentBlock = editor.getTextCursorPosition().block;
+
+    // New block we want to insert.
+    const helloWorldBlock: PartialBlock = {
+      type: "paragraph",
+      content: [{ type: "text", text: "Hello World", styles: { bold: true } }],
+    };
+
+    // Inserting the new block after the current one.
+    editor.insertBlocks([helloWorldBlock], currentBlock, "after");
+  },
+  aliases: ["helloworld", "hw"],
+  group: "Other",
+  icon: <HiOutlineGlobeAlt size={18} />,
+  subtext: "Used to insert a block with 'Hello World' below.",
+});
+
+// List containing all default Slash Menu Items, as well as our custom one.
+const getCustomSlashMenuItems = (
+  editor: BlockNoteEditor
+): DefaultReactSuggestionItem[] => [
+  ...getDefaultReactSlashMenuItems(editor),
+  insertHelloWorldItem(editor),
+];
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Press the '/' key to open the Slash Menu",
+      },
+      {
+        type: "paragraph",
+        content: "Notice the new 'Insert Hello World' item - try it out!",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query) =>
+          filterSuggestionItems(getCustomSlashMenuItems(editor), query)
+        }
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/02-ui-components/slash-menu-items/README.md b/examples/02-ui-components/suggestion-menus-slash-menu-items/README.md
similarity index 65%
rename from examples/02-ui-components/slash-menu-items/README.md
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/README.md
index d09f94526c..eb9145ae38 100644
--- a/examples/02-ui-components/slash-menu-items/README.md
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-items/README.md
@@ -4,4 +4,4 @@ In this example, we add an item to the Slash Menu, which adds a new block below
 
 **Relevant Docs:**
 
-- [Custom Slash Menu Item List](/docs/slash-menu#custom-slash-menu-item-list)
\ No newline at end of file
+- [Changing Slash Menu Items](/docs/ui-components/slash-menu#changing-slash-menu-items)
\ No newline at end of file
diff --git a/examples/02-ui-components/slash-menu-items/index.html b/examples/02-ui-components/suggestion-menus-slash-menu-items/index.html
similarity index 100%
rename from examples/02-ui-components/slash-menu-items/index.html
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/index.html
diff --git a/examples/05-cursor-selections/text-cursor-block/main.tsx b/examples/02-ui-components/suggestion-menus-slash-menu-items/main.tsx
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/main.tsx
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/main.tsx
diff --git a/examples/02-ui-components/slash-menu-items/package.json b/examples/02-ui-components/suggestion-menus-slash-menu-items/package.json
similarity index 91%
rename from examples/02-ui-components/slash-menu-items/package.json
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/package.json
index 3f494f8450..bd3562ab30 100644
--- a/examples/02-ui-components/slash-menu-items/package.json
+++ b/examples/02-ui-components/suggestion-menus-slash-menu-items/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-slash-menu-items",
+  "name": "@blocknote/example-suggestion-menus-slash-menu-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.11.1",
diff --git a/examples/05-cursor-selections/text-cursor-block/tsconfig.json b/examples/02-ui-components/suggestion-menus-slash-menu-items/tsconfig.json
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/tsconfig.json
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/tsconfig.json
diff --git a/examples/05-cursor-selections/text-cursor-block/vite.config.ts b/examples/02-ui-components/suggestion-menus-slash-menu-items/vite.config.ts
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/vite.config.ts
rename to examples/02-ui-components/suggestion-menus-slash-menu-items/vite.config.ts
diff --git a/examples/02-ui-components/ui-elements-remove/App.tsx b/examples/02-ui-components/ui-elements-remove/App.tsx
index 29da124b9b..24af6588ec 100644
--- a/examples/02-ui-components/ui-elements-remove/App.tsx
+++ b/examples/02-ui-components/ui-elements-remove/App.tsx
@@ -1,25 +1,20 @@
-import {
-  BlockNoteView,
-  // FormattingToolbarPositioner,
-  // HyperlinkToolbarPositioner,
-  // ImageToolbarPositioner,
-  // SlashMenuPositioner,
-  useBlockNote,
-} from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
-      {/* TODO
-      <FormattingToolbarPositioner editor={editor} />
-      <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <ImageToolbarPositioner editor={editor} /> */}
-    </BlockNoteView>
+    <BlockNoteView
+      editor={editor}
+      formattingToolbar={false}
+      hyperlinkToolbar={false}
+      imageToolbar={false}
+      sideMenu={false}
+      slashMenu={false}
+      tableHandles={false}
+    />
   );
 }
diff --git a/examples/02-ui-components/ui-elements-remove/README.md b/examples/02-ui-components/ui-elements-remove/README.md
index 89f3c253c1..74f6b32515 100644
--- a/examples/02-ui-components/ui-elements-remove/README.md
+++ b/examples/02-ui-components/ui-elements-remove/README.md
@@ -1 +1,7 @@
-# Removing UI Elements
\ No newline at end of file
+# Removing UI Elements
+
+In this example, we remove all menus & toolbars, leaving only the editor.
+
+**Relevant Docs:**
+
+- [Editor Setup](TODO)
\ No newline at end of file
diff --git a/examples/02-ui-components/ui-elements-replace/App.tsx b/examples/02-ui-components/ui-elements-replace/App.tsx
index a10f466641..fa808e0faa 100644
--- a/examples/02-ui-components/ui-elements-replace/App.tsx
+++ b/examples/02-ui-components/ui-elements-replace/App.tsx
@@ -1,9 +1,9 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance.
   return (
diff --git a/examples/04-theming/changing-font/.bnexample.json b/examples/03-theming/changing-font/.bnexample.json
similarity index 100%
rename from examples/04-theming/changing-font/.bnexample.json
rename to examples/03-theming/changing-font/.bnexample.json
diff --git a/examples/04-theming/theming-css-variables/App.tsx b/examples/03-theming/changing-font/App.tsx
similarity index 65%
rename from examples/04-theming/theming-css-variables/App.tsx
rename to examples/03-theming/changing-font/App.tsx
index 249f964521..ecd227a119 100644
--- a/examples/04-theming/theming-css-variables/App.tsx
+++ b/examples/03-theming/changing-font/App.tsx
@@ -1,9 +1,9 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
diff --git a/examples/04-theming/changing-font/README.md b/examples/03-theming/changing-font/README.md
similarity index 100%
rename from examples/04-theming/changing-font/README.md
rename to examples/03-theming/changing-font/README.md
diff --git a/examples/04-theming/changing-font/index.html b/examples/03-theming/changing-font/index.html
similarity index 100%
rename from examples/04-theming/changing-font/index.html
rename to examples/03-theming/changing-font/index.html
diff --git a/examples/06-custom-schema/alert-block/main.tsx b/examples/03-theming/changing-font/main.tsx
similarity index 100%
rename from examples/06-custom-schema/alert-block/main.tsx
rename to examples/03-theming/changing-font/main.tsx
diff --git a/examples/04-theming/changing-font/package.json b/examples/03-theming/changing-font/package.json
similarity index 100%
rename from examples/04-theming/changing-font/package.json
rename to examples/03-theming/changing-font/package.json
diff --git a/examples/04-theming/changing-font/styles.css b/examples/03-theming/changing-font/styles.css
similarity index 100%
rename from examples/04-theming/changing-font/styles.css
rename to examples/03-theming/changing-font/styles.css
diff --git a/examples/06-custom-schema/alert-block/tsconfig.json b/examples/03-theming/changing-font/tsconfig.json
similarity index 100%
rename from examples/06-custom-schema/alert-block/tsconfig.json
rename to examples/03-theming/changing-font/tsconfig.json
diff --git a/examples/06-custom-schema/alert-block/vite.config.ts b/examples/03-theming/changing-font/vite.config.ts
similarity index 100%
rename from examples/06-custom-schema/alert-block/vite.config.ts
rename to examples/03-theming/changing-font/vite.config.ts
diff --git a/examples/04-theming/theming-css-variables-code/.bnexample.json b/examples/03-theming/theming-css-variables-code/.bnexample.json
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/.bnexample.json
rename to examples/03-theming/theming-css-variables-code/.bnexample.json
diff --git a/examples/04-theming/theming-css-variables-code/App.tsx b/examples/03-theming/theming-css-variables-code/App.tsx
similarity index 95%
rename from examples/04-theming/theming-css-variables-code/App.tsx
rename to examples/03-theming/theming-css-variables-code/App.tsx
index a2d4b4a9fd..967ac33d12 100644
--- a/examples/04-theming/theming-css-variables-code/App.tsx
+++ b/examples/03-theming/theming-css-variables-code/App.tsx
@@ -3,7 +3,7 @@ import {
   darkDefaultTheme,
   lightDefaultTheme,
   Theme,
-  useBlockNote,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
@@ -64,7 +64,7 @@ const redTheme = {
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return (
diff --git a/examples/04-theming/theming-css-variables-code/README.md b/examples/03-theming/theming-css-variables-code/README.md
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/README.md
rename to examples/03-theming/theming-css-variables-code/README.md
diff --git a/examples/04-theming/theming-css-variables-code/index.html b/examples/03-theming/theming-css-variables-code/index.html
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/index.html
rename to examples/03-theming/theming-css-variables-code/index.html
diff --git a/examples/06-custom-schema/react-custom-blocks/main.tsx b/examples/03-theming/theming-css-variables-code/main.tsx
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/main.tsx
rename to examples/03-theming/theming-css-variables-code/main.tsx
diff --git a/examples/04-theming/theming-css-variables-code/package.json b/examples/03-theming/theming-css-variables-code/package.json
similarity index 100%
rename from examples/04-theming/theming-css-variables-code/package.json
rename to examples/03-theming/theming-css-variables-code/package.json
diff --git a/examples/06-custom-schema/react-custom-blocks/tsconfig.json b/examples/03-theming/theming-css-variables-code/tsconfig.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/tsconfig.json
rename to examples/03-theming/theming-css-variables-code/tsconfig.json
diff --git a/examples/06-custom-schema/react-custom-blocks/vite.config.ts b/examples/03-theming/theming-css-variables-code/vite.config.ts
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/vite.config.ts
rename to examples/03-theming/theming-css-variables-code/vite.config.ts
diff --git a/examples/04-theming/theming-css-variables/.bnexample.json b/examples/03-theming/theming-css-variables/.bnexample.json
similarity index 100%
rename from examples/04-theming/theming-css-variables/.bnexample.json
rename to examples/03-theming/theming-css-variables/.bnexample.json
diff --git a/examples/03-theming/theming-css-variables/App.tsx b/examples/03-theming/theming-css-variables/App.tsx
new file mode 100644
index 0000000000..cb6aa62345
--- /dev/null
+++ b/examples/03-theming/theming-css-variables/App.tsx
@@ -0,0 +1,13 @@
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import "./styles.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote();
+
+  // Renders the editor instance using a React component.
+  // Adds `data-theming-css-variables-demo` to restrict styles to only this demo.
+  return <BlockNoteView editor={editor} data-theming-css-variables-demo />;
+}
diff --git a/examples/04-theming/theming-css-variables/README.md b/examples/03-theming/theming-css-variables/README.md
similarity index 100%
rename from examples/04-theming/theming-css-variables/README.md
rename to examples/03-theming/theming-css-variables/README.md
diff --git a/examples/04-theming/theming-css-variables/index.html b/examples/03-theming/theming-css-variables/index.html
similarity index 100%
rename from examples/04-theming/theming-css-variables/index.html
rename to examples/03-theming/theming-css-variables/index.html
diff --git a/examples/06-custom-schema/react-custom-inline-content/main.tsx b/examples/03-theming/theming-css-variables/main.tsx
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/main.tsx
rename to examples/03-theming/theming-css-variables/main.tsx
diff --git a/examples/04-theming/theming-css-variables/package.json b/examples/03-theming/theming-css-variables/package.json
similarity index 100%
rename from examples/04-theming/theming-css-variables/package.json
rename to examples/03-theming/theming-css-variables/package.json
diff --git a/examples/04-theming/theming-css-variables/styles.css b/examples/03-theming/theming-css-variables/styles.css
similarity index 85%
rename from examples/04-theming/theming-css-variables/styles.css
rename to examples/03-theming/theming-css-variables/styles.css
index dca14fb13e..30d11d56be 100644
--- a/examples/04-theming/theming-css-variables/styles.css
+++ b/examples/03-theming/theming-css-variables/styles.css
@@ -1,5 +1,5 @@
 /* Base theme */
-.bn-container[data-color-scheme] {
+.bn-container[data-theming-css-variables-demo][data-color-scheme] {
   --bn-colors-editor-text: #222222;
   --bn-colors-editor-background: #ffffff;
   --bn-colors-menu-text: #ffffff;
@@ -21,7 +21,7 @@
 }
 
 /* Changes for dark mode */
-.bn-container[data-color-scheme="dark"] {
+.bn-container[data-theming-css-variables-demo][data-color-scheme="dark"] {
   --bn-colors-editor-text: #ffffff;
   --bn-colors-editor-background: #9b0000;
   --bn-colors-side-menu: #ffffff;
diff --git a/examples/06-custom-schema/react-custom-inline-content/tsconfig.json b/examples/03-theming/theming-css-variables/tsconfig.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/tsconfig.json
rename to examples/03-theming/theming-css-variables/tsconfig.json
diff --git a/examples/06-custom-schema/react-custom-inline-content/vite.config.ts b/examples/03-theming/theming-css-variables/vite.config.ts
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/vite.config.ts
rename to examples/03-theming/theming-css-variables/vite.config.ts
diff --git a/examples/04-theming/theming-css/.bnexample.json b/examples/03-theming/theming-css/.bnexample.json
similarity index 100%
rename from examples/04-theming/theming-css/.bnexample.json
rename to examples/03-theming/theming-css/.bnexample.json
diff --git a/examples/03-theming/theming-css/App.tsx b/examples/03-theming/theming-css/App.tsx
new file mode 100644
index 0000000000..b9d6ebef54
--- /dev/null
+++ b/examples/03-theming/theming-css/App.tsx
@@ -0,0 +1,12 @@
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import "./styles.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote();
+  // Renders the editor instance using a React component.
+  // Adds `data-theming-css-demo` to restrict styles to only this demo.
+  return <BlockNoteView editor={editor} data-theming-css-demo />;
+}
diff --git a/examples/04-theming/theming-css/README.md b/examples/03-theming/theming-css/README.md
similarity index 100%
rename from examples/04-theming/theming-css/README.md
rename to examples/03-theming/theming-css/README.md
diff --git a/examples/04-theming/theming-css/index.html b/examples/03-theming/theming-css/index.html
similarity index 100%
rename from examples/04-theming/theming-css/index.html
rename to examples/03-theming/theming-css/index.html
diff --git a/examples/06-custom-schema/react-custom-styles/main.tsx b/examples/03-theming/theming-css/main.tsx
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/main.tsx
rename to examples/03-theming/theming-css/main.tsx
diff --git a/examples/04-theming/theming-css/package.json b/examples/03-theming/theming-css/package.json
similarity index 100%
rename from examples/04-theming/theming-css/package.json
rename to examples/03-theming/theming-css/package.json
diff --git a/examples/04-theming/theming-css/styles.css b/examples/03-theming/theming-css/styles.css
similarity index 59%
rename from examples/04-theming/theming-css/styles.css
rename to examples/03-theming/theming-css/styles.css
index fd1a86992f..2653b59a32 100644
--- a/examples/04-theming/theming-css/styles.css
+++ b/examples/03-theming/theming-css/styles.css
@@ -1,10 +1,10 @@
 /* Adds border and shadow to editor */
-.bn-container .bn-editor {
+.bn-container[data-theming-css-demo] .bn-editor {
   border-radius: var(--bn-border-radius-medium);
   box-shadow: var(--bn-shadow-medium);
 }
 
 /* Makes slash menu hovered items blue */
-.bn-container .bn-slash-menu .mantine-Menu-item[data-hovered] {
+.bn-container[data-theming-css-demo] .bn-slash-menu .mantine-Menu-item[data-hovered] {
   background-color: blue;
 }
diff --git a/examples/06-custom-schema/react-custom-styles/tsconfig.json b/examples/03-theming/theming-css/tsconfig.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/tsconfig.json
rename to examples/03-theming/theming-css/tsconfig.json
diff --git a/examples/06-custom-schema/react-custom-styles/vite.config.ts b/examples/03-theming/theming-css/vite.config.ts
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/vite.config.ts
rename to examples/03-theming/theming-css/vite.config.ts
diff --git a/examples/04-theming/theming-dom-attributes/.bnexample.json b/examples/03-theming/theming-dom-attributes/.bnexample.json
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/.bnexample.json
rename to examples/03-theming/theming-dom-attributes/.bnexample.json
diff --git a/examples/04-theming/theming-dom-attributes/App.tsx b/examples/03-theming/theming-dom-attributes/App.tsx
similarity index 56%
rename from examples/04-theming/theming-dom-attributes/App.tsx
rename to examples/03-theming/theming-dom-attributes/App.tsx
index 9982f48637..7806303e04 100644
--- a/examples/04-theming/theming-dom-attributes/App.tsx
+++ b/examples/03-theming/theming-dom-attributes/App.tsx
@@ -1,9 +1,11 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
+import "./styles.css";
+
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     // Sets attributes on DOM elements in the editor.
     domAttributes: {
       // Adds a class to all `blockContainer` elements.
@@ -14,5 +16,6 @@ export default function App() {
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  // Adds `data-theming-dom-attributes-demo` to restrict styles to only this demo.
+  return <BlockNoteView editor={editor} data-theming-dom-attributes-demo />;
 }
diff --git a/examples/04-theming/theming-dom-attributes/README.md b/examples/03-theming/theming-dom-attributes/README.md
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/README.md
rename to examples/03-theming/theming-dom-attributes/README.md
diff --git a/examples/04-theming/theming-dom-attributes/index.html b/examples/03-theming/theming-dom-attributes/index.html
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/index.html
rename to examples/03-theming/theming-dom-attributes/index.html
diff --git a/examples/07-collaboration/partykit/main.tsx b/examples/03-theming/theming-dom-attributes/main.tsx
similarity index 100%
rename from examples/07-collaboration/partykit/main.tsx
rename to examples/03-theming/theming-dom-attributes/main.tsx
diff --git a/examples/04-theming/theming-dom-attributes/package.json b/examples/03-theming/theming-dom-attributes/package.json
similarity index 100%
rename from examples/04-theming/theming-dom-attributes/package.json
rename to examples/03-theming/theming-dom-attributes/package.json
diff --git a/examples/04-theming/theming-dom-attributes/styles.css b/examples/03-theming/theming-dom-attributes/styles.css
similarity index 56%
rename from examples/04-theming/theming-dom-attributes/styles.css
rename to examples/03-theming/theming-dom-attributes/styles.css
index 5f7ddc7233..fe7e183a80 100644
--- a/examples/04-theming/theming-dom-attributes/styles.css
+++ b/examples/03-theming/theming-dom-attributes/styles.css
@@ -1,4 +1,4 @@
-.block-container {
+.bn-container[data-theming-dom-attributes-demo] .block-container {
   border: 2px solid lightgray;
   border-radius: 4px;
   padding: 2px;
diff --git a/examples/07-collaboration/partykit/tsconfig.json b/examples/03-theming/theming-dom-attributes/tsconfig.json
similarity index 100%
rename from examples/07-collaboration/partykit/tsconfig.json
rename to examples/03-theming/theming-dom-attributes/tsconfig.json
diff --git a/examples/07-collaboration/partykit/vite.config.ts b/examples/03-theming/theming-dom-attributes/vite.config.ts
similarity index 100%
rename from examples/07-collaboration/partykit/vite.config.ts
rename to examples/03-theming/theming-dom-attributes/vite.config.ts
diff --git a/examples/05-cursor-selections/selection-blocks/.bnexample.json b/examples/04-cursor-selections/selection-blocks/.bnexample.json
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/.bnexample.json
rename to examples/04-cursor-selections/selection-blocks/.bnexample.json
diff --git a/examples/05-cursor-selections/selection-blocks/App.tsx b/examples/04-cursor-selections/selection-blocks/App.tsx
similarity index 93%
rename from examples/05-cursor-selections/selection-blocks/App.tsx
rename to examples/04-cursor-selections/selection-blocks/App.tsx
index cebb15dc61..fe9a47fa23 100644
--- a/examples/05-cursor-selections/selection-blocks/App.tsx
+++ b/examples/04-cursor-selections/selection-blocks/App.tsx
@@ -1,10 +1,10 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useCallback } from "react";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   const onSelectionChange = useCallback(() => {
     // Gets the blocks currently spanned by the selection.
diff --git a/examples/05-cursor-selections/selection-blocks/README.md b/examples/04-cursor-selections/selection-blocks/README.md
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/README.md
rename to examples/04-cursor-selections/selection-blocks/README.md
diff --git a/examples/05-cursor-selections/selection-blocks/index.html b/examples/04-cursor-selections/selection-blocks/index.html
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/index.html
rename to examples/04-cursor-selections/selection-blocks/index.html
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/main.tsx b/examples/04-cursor-selections/selection-blocks/main.tsx
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/main.tsx
rename to examples/04-cursor-selections/selection-blocks/main.tsx
diff --git a/examples/05-cursor-selections/selection-blocks/package.json b/examples/04-cursor-selections/selection-blocks/package.json
similarity index 100%
rename from examples/05-cursor-selections/selection-blocks/package.json
rename to examples/04-cursor-selections/selection-blocks/package.json
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/tsconfig.json b/examples/04-cursor-selections/selection-blocks/tsconfig.json
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/tsconfig.json
rename to examples/04-cursor-selections/selection-blocks/tsconfig.json
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/vite.config.ts b/examples/04-cursor-selections/selection-blocks/vite.config.ts
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/vite.config.ts
rename to examples/04-cursor-selections/selection-blocks/vite.config.ts
diff --git a/examples/05-cursor-selections/text-cursor-block/.bnexample.json b/examples/04-cursor-selections/text-cursor-block/.bnexample.json
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/.bnexample.json
rename to examples/04-cursor-selections/text-cursor-block/.bnexample.json
diff --git a/examples/05-cursor-selections/text-cursor-block/App.tsx b/examples/04-cursor-selections/text-cursor-block/App.tsx
similarity index 92%
rename from examples/05-cursor-selections/text-cursor-block/App.tsx
rename to examples/04-cursor-selections/text-cursor-block/App.tsx
index cf76d03ae7..dc84196793 100644
--- a/examples/05-cursor-selections/text-cursor-block/App.tsx
+++ b/examples/04-cursor-selections/text-cursor-block/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import "@blocknote/react/style.css";
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   const onSelectionChange = useCallback(() => {
     // Gets the block currently hovered by the text cursor.
diff --git a/examples/05-cursor-selections/text-cursor-block/README.md b/examples/04-cursor-selections/text-cursor-block/README.md
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/README.md
rename to examples/04-cursor-selections/text-cursor-block/README.md
diff --git a/examples/05-cursor-selections/text-cursor-block/index.html b/examples/04-cursor-selections/text-cursor-block/index.html
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/index.html
rename to examples/04-cursor-selections/text-cursor-block/index.html
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/main.tsx b/examples/04-cursor-selections/text-cursor-block/main.tsx
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/main.tsx
rename to examples/04-cursor-selections/text-cursor-block/main.tsx
diff --git a/examples/05-cursor-selections/text-cursor-block/package.json b/examples/04-cursor-selections/text-cursor-block/package.json
similarity index 100%
rename from examples/05-cursor-selections/text-cursor-block/package.json
rename to examples/04-cursor-selections/text-cursor-block/package.json
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/tsconfig.json b/examples/04-cursor-selections/text-cursor-block/tsconfig.json
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/tsconfig.json
rename to examples/04-cursor-selections/text-cursor-block/tsconfig.json
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/vite.config.ts b/examples/04-cursor-selections/text-cursor-block/vite.config.ts
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/vite.config.ts
rename to examples/04-cursor-selections/text-cursor-block/vite.config.ts
diff --git a/examples/04-theming/changing-font/App.tsx b/examples/04-theming/changing-font/App.tsx
deleted file mode 100644
index 249f964521..0000000000
--- a/examples/04-theming/changing-font/App.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useBlockNote();
-
-  // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
-}
diff --git a/examples/04-theming/theming-css/App.tsx b/examples/04-theming/theming-css/App.tsx
deleted file mode 100644
index 9d9f96c6dc..0000000000
--- a/examples/04-theming/theming-css/App.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useBlockNote();
-  // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
-}
diff --git a/examples/06-custom-schema/alert-block/.bnexample.json b/examples/05-custom-schema/alert-block/.bnexample.json
similarity index 80%
rename from examples/06-custom-schema/alert-block/.bnexample.json
rename to examples/05-custom-schema/alert-block/.bnexample.json
index fe8dafc8db..3ea30099ad 100644
--- a/examples/06-custom-schema/alert-block/.bnexample.json
+++ b/examples/05-custom-schema/alert-block/.bnexample.json
@@ -4,7 +4,7 @@
   "group": "Advanced Examples",
   "order": 1,
   "dependencies": {
-    "@mantine/core": "^7.4.2",
+    "@mantine/core": "^7.5.0",
     "react-icons": "^4.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/06-custom-schema/alert-block/Alert.tsx b/examples/05-custom-schema/alert-block/Alert.tsx
similarity index 56%
rename from examples/06-custom-schema/alert-block/Alert.tsx
rename to examples/05-custom-schema/alert-block/Alert.tsx
index 21d453f68b..403ff19e62 100644
--- a/examples/06-custom-schema/alert-block/Alert.tsx
+++ b/examples/05-custom-schema/alert-block/Alert.tsx
@@ -1,13 +1,14 @@
-import { BlockNoteEditor, defaultProps } from "@blocknote/core";
+import { defaultProps } from "@blocknote/core";
 import { createReactBlockSpec } from "@blocknote/react";
 import { Menu } from "@mantine/core";
 import { MdCancel, MdCheckCircle, MdError, MdInfo } from "react-icons/md";
-import { RiAlertFill } from "react-icons/ri";
 import "./styles.css";
 
 // The types of alerts that users can choose from
-export const alertTypes = {
-  warning: {
+export const alertTypes = [
+  {
+    title: "Warning",
+    value: "warning",
     icon: MdError,
     color: "#e69819",
     backgroundColor: {
@@ -15,7 +16,9 @@ export const alertTypes = {
       dark: "#805d20",
     },
   },
-  error: {
+  {
+    title: "Error",
+    value: "error",
     icon: MdCancel,
     color: "#d80d0d",
     backgroundColor: {
@@ -23,7 +26,9 @@ export const alertTypes = {
       dark: "#802020",
     },
   },
-  info: {
+  {
+    title: "Info",
+    value: "info",
     icon: MdInfo,
     color: "#507aff",
     backgroundColor: {
@@ -31,7 +36,9 @@ export const alertTypes = {
       dark: "#203380",
     },
   },
-  success: {
+  {
+    title: "Success",
+    value: "success",
     icon: MdCheckCircle,
     color: "#0bc10b",
     backgroundColor: {
@@ -39,13 +46,11 @@ export const alertTypes = {
       dark: "#208020",
     },
   },
-} as const;
+] as const;
 
-// Function which creates the Alert block itself, where the component is styled
-// correctly with the light & dark theme
 export const Alert = createReactBlockSpec(
   {
-    type: "alert" as const,
+    type: "alert",
     propSchema: {
       textAlignment: defaultProps.textAlignment,
       textColor: defaultProps.textColor,
@@ -53,21 +58,21 @@ export const Alert = createReactBlockSpec(
         default: "warning",
         values: ["warning", "error", "info", "success"],
       },
-    } as const,
+    },
     content: "inline",
   },
   {
     render: (props) => {
-      const Icon = alertTypes[props.block.props.type].icon;
-
+      const alertType = alertTypes.find(
+        (a) => a.value === props.block.props.type
+      )!;
+      const Icon = alertType.icon;
       return (
         <div className={"alert"} data-alert-type={props.block.props.type}>
           {/*Icon which opens a menu to choose the Alert type*/}
-          <Menu withinPortal={false} zIndex={99999}>
+          <Menu withinPortal={false} zIndex={999999}>
             <Menu.Target>
-              {/*Icon wrapper to change the color*/}
               <div className={"alert-icon-wrapper"} contentEditable={false}>
-                {/*Icon itself*/}
                 <Icon
                   className={"alert-icon"}
                   data-alert-icon-type={props.block.props.type}
@@ -79,25 +84,25 @@ export const Alert = createReactBlockSpec(
             <Menu.Dropdown>
               <Menu.Label>Alert Type</Menu.Label>
               <Menu.Divider />
-              {Object.entries(alertTypes).map(([key, value]) => {
-                const ItemIcon = value.icon;
+              {alertTypes.map((type) => {
+                const ItemIcon = type.icon;
 
                 return (
                   <Menu.Item
-                    key={key}
+                    key={type.value}
                     leftSection={
                       <ItemIcon
                         className={"alert-icon"}
-                        data-alert-icon-type={key}
+                        data-alert-icon-type={type.value}
                       />
                     }
                     onClick={() =>
                       props.editor.updateBlock(props.block, {
                         type: "alert",
-                        props: { type: key as keyof typeof alertTypes },
+                        props: { type: type.value },
                       })
                     }>
-                    {key.slice(0, 1).toUpperCase() + key.slice(1)}
+                    {type.title}
                   </Menu.Item>
                 );
               })}
@@ -110,42 +115,3 @@ export const Alert = createReactBlockSpec(
     },
   }
 );
-
-// Slash menu item to insert an Alert block
-export const insertAlert = {
-  name: "Alert",
-  execute: (editor: BlockNoteEditor<any, any, any>) => {
-    const block = editor.getTextCursorPosition().block;
-    const blockIsEmpty =
-      Array.isArray(block) && (block.content as any[]).length === 0;
-
-    // Updates current block to an Alert if it's empty, otherwise inserts a new
-    // one below
-    if (blockIsEmpty) {
-      editor.updateBlock(block, { type: "alert" });
-    } else {
-      editor.insertBlocks(
-        [
-          {
-            type: "alert",
-          },
-        ],
-        editor.getTextCursorPosition().block,
-        "after"
-      );
-      editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
-    }
-  },
-  aliases: [
-    "alert",
-    "notification",
-    "emphasize",
-    "warning",
-    "error",
-    "info",
-    "success",
-  ],
-  group: "Other",
-  icon: <RiAlertFill />,
-  hint: "Used to emphasize text",
-};
diff --git a/examples/05-custom-schema/alert-block/App.tsx b/examples/05-custom-schema/alert-block/App.tsx
new file mode 100644
index 0000000000..8d02c93f31
--- /dev/null
+++ b/examples/05-custom-schema/alert-block/App.tsx
@@ -0,0 +1,72 @@
+import {
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  filterSuggestionItems,
+  insertOrUpdateBlock,
+} from "@blocknote/core";
+import {
+  BlockNoteView,
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import { RiAlertFill } from "react-icons/ri";
+import { Alert } from "./Alert";
+
+// Our schema with block specs, which contain the configs and implementations for blocks
+// that we want our editor to use.
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    // Adds all default blocks.
+    ...defaultBlockSpecs,
+    // Adds the Alert block.
+    alert: Alert,
+  },
+});
+
+// Slash menu item to insert an Alert block
+const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({
+  title: "Alert",
+  onItemClick: () => {
+    // TODO: document this function?
+    insertOrUpdateBlock(editor, {
+      type: "alert",
+    });
+  },
+  aliases: [
+    "alert",
+    "notification",
+    "emphasize",
+    "warning",
+    "error",
+    "info",
+    "success",
+  ],
+  group: "Other",
+  icon: <RiAlertFill />,
+});
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema,
+  });
+
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      {/* Replaces the default Slash Menu. */}
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query) =>
+          // Gets all default slash menu items and `insertAlert` item.
+          filterSuggestionItems(
+            [...getDefaultReactSlashMenuItems(editor), insertAlert(editor)],
+            query
+          )
+        }
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/05-custom-schema/alert-block/README.md b/examples/05-custom-schema/alert-block/README.md
new file mode 100644
index 0000000000..6a432dd4bf
--- /dev/null
+++ b/examples/05-custom-schema/alert-block/README.md
@@ -0,0 +1,10 @@
+# Alert Block
+
+In this example, we create a custom `Alert` block which is used to emphasize text.
+
+In addition, we create a Slash Menu item which inserts an `Alert` block and add an Alert item to the block type dropdown in the Formatting Toolbar.
+
+**Relevant Docs:**
+
+- [Custom Blocks](/docs/custom-schemas/custom-blocks)
+- [Changing Block Type Dropdown Items](/docs/ui-components/formatting-toolbar#changing-block-type-dropdown-items)
\ No newline at end of file
diff --git a/examples/06-custom-schema/alert-block/index.html b/examples/05-custom-schema/alert-block/index.html
similarity index 100%
rename from examples/06-custom-schema/alert-block/index.html
rename to examples/05-custom-schema/alert-block/index.html
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/main.tsx b/examples/05-custom-schema/alert-block/main.tsx
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/main.tsx
rename to examples/05-custom-schema/alert-block/main.tsx
diff --git a/examples/06-custom-schema/alert-block/package.json b/examples/05-custom-schema/alert-block/package.json
similarity index 96%
rename from examples/06-custom-schema/alert-block/package.json
rename to examples/05-custom-schema/alert-block/package.json
index 0a8014250a..2c87e3b9f5 100644
--- a/examples/06-custom-schema/alert-block/package.json
+++ b/examples/05-custom-schema/alert-block/package.json
@@ -15,7 +15,7 @@
     "@blocknote/react": "^0.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@mantine/core": "^7.4.2",
+    "@mantine/core": "^7.5.0",
     "react-icons": "^4.3.1"
   },
   "devDependencies": {
diff --git a/examples/06-custom-schema/alert-block/styles.css b/examples/05-custom-schema/alert-block/styles.css
similarity index 100%
rename from examples/06-custom-schema/alert-block/styles.css
rename to examples/05-custom-schema/alert-block/styles.css
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/tsconfig.json b/examples/05-custom-schema/alert-block/tsconfig.json
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/tsconfig.json
rename to examples/05-custom-schema/alert-block/tsconfig.json
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/vite.config.ts b/examples/05-custom-schema/alert-block/vite.config.ts
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/vite.config.ts
rename to examples/05-custom-schema/alert-block/vite.config.ts
diff --git a/examples/05-custom-schema/font-style/.bnexample.json b/examples/05-custom-schema/font-style/.bnexample.json
new file mode 100644
index 0000000000..e070b0894b
--- /dev/null
+++ b/examples/05-custom-schema/font-style/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "group": "Advanced Examples",
+  "order": 1
+}
diff --git a/examples/05-custom-schema/font-style/App.tsx b/examples/05-custom-schema/font-style/App.tsx
new file mode 100644
index 0000000000..1323835b46
--- /dev/null
+++ b/examples/05-custom-schema/font-style/App.tsx
@@ -0,0 +1,118 @@
+import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
+import {
+  BasicTextStyleButton,
+  BlockNoteView,
+  BlockTypeDropdown,
+  ColorStyleButton,
+  CreateLinkButton,
+  FormattingToolbar,
+  FormattingToolbarController,
+  ImageCaptionButton,
+  NestBlockButton,
+  ReplaceImageButton,
+  TextAlignButton,
+  ToolbarButton,
+  UnnestBlockButton,
+  useBlockNoteEditor,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+import { RiText } from "react-icons/ri";
+
+import { Font } from "./Font";
+
+// Our schema with style specs, which contain the configs and implementations for styles
+// that we want our editor to use.
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    // Adds all default styles.
+    ...defaultStyleSpecs,
+    // Adds the Font style.
+    font: Font,
+  },
+});
+
+// Formatting Toolbar button to set the font style.
+const SetFontStyleButton = () => {
+  const editor = useBlockNoteEditor<
+    typeof schema.blockSchema,
+    typeof schema.inlineContentSchema,
+    typeof schema.styleSchema
+  >();
+
+  return (
+    <ToolbarButton
+      mainTooltip={"Set Font"}
+      icon={RiText}
+      onClick={() => {
+        const fontName = prompt("Enter a font name") || "Comic Sans MS";
+
+        editor.addStyles({
+          font: fontName,
+        });
+      }}
+    />
+  );
+};
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema,
+  });
+
+  return (
+    <BlockNoteView editor={editor} formattingToolbar={false}>
+      {/* Replaces the default Formatting Toolbar. */}
+      <FormattingToolbarController
+        formattingToolbar={() => (
+          <FormattingToolbar>
+            <BlockTypeDropdown key={"blockTypeDropdown"} />
+
+            <ImageCaptionButton key={"imageCaptionButton"} />
+            <ReplaceImageButton key={"replaceImageButton"} />
+
+            <BasicTextStyleButton
+              basicTextStyle={"bold"}
+              key={"boldStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"italic"}
+              key={"italicStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"underline"}
+              key={"underlineStyleButton"}
+            />
+            <BasicTextStyleButton
+              basicTextStyle={"strike"}
+              key={"strikeStyleButton"}
+            />
+            {/* Adds SetFontStyleButton */}
+            <SetFontStyleButton />
+
+            <TextAlignButton
+              textAlignment={"left"}
+              key={"textAlignLeftButton"}
+            />
+            <TextAlignButton
+              textAlignment={"center"}
+              key={"textAlignCenterButton"}
+            />
+            <TextAlignButton
+              textAlignment={"right"}
+              key={"textAlignRightButton"}
+            />
+
+            <ColorStyleButton key={"colorStyleButton"} />
+
+            <NestBlockButton key={"nestBlockButton"} />
+            <UnnestBlockButton key={"unnestBlockButton"} />
+
+            <CreateLinkButton key={"createLinkButton"} />
+          </FormattingToolbar>
+        )}
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/05-custom-schema/font-style/Font.tsx b/examples/05-custom-schema/font-style/Font.tsx
new file mode 100644
index 0000000000..6ecd2b6537
--- /dev/null
+++ b/examples/05-custom-schema/font-style/Font.tsx
@@ -0,0 +1,13 @@
+import { createReactStyleSpec } from "@blocknote/react";
+
+export const Font = createReactStyleSpec(
+  {
+    type: "font",
+    propSchema: "string",
+  },
+  {
+    render: (props) => (
+      <span style={{ fontFamily: props.value }} ref={props.contentRef} />
+    ),
+  }
+);
diff --git a/examples/05-custom-schema/font-style/README.md b/examples/05-custom-schema/font-style/README.md
new file mode 100644
index 0000000000..2568beca40
--- /dev/null
+++ b/examples/05-custom-schema/font-style/README.md
@@ -0,0 +1,10 @@
+# Font Style
+
+In this example, we create a custom `Font` style which is used to set the `fontFamily` style.
+
+In addition, we create a Formatting Toolbar button which sets the `Font` style on the selected text.
+
+**Relevant Docs:**
+
+- [Custom Styles](/docs/custom-schemas/custom-styles)
+- [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar)
\ No newline at end of file
diff --git a/examples/05-custom-schema/font-style/index.html b/examples/05-custom-schema/font-style/index.html
new file mode 100644
index 0000000000..67f1b3fef2
--- /dev/null
+++ b/examples/05-custom-schema/font-style/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Font Style</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/main.tsx b/examples/05-custom-schema/font-style/main.tsx
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/main.tsx
rename to examples/05-custom-schema/font-style/main.tsx
diff --git a/examples/05-custom-schema/font-style/package.json b/examples/05-custom-schema/font-style/package.json
new file mode 100644
index 0000000000..b31fbd8e0d
--- /dev/null
+++ b/examples/05-custom-schema/font-style/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-font-style",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.11.1",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.11.1",
+    "@blocknote/react": "^0.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/tsconfig.json b/examples/05-custom-schema/font-style/tsconfig.json
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/tsconfig.json
rename to examples/05-custom-schema/font-style/tsconfig.json
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/vite.config.ts b/examples/05-custom-schema/font-style/vite.config.ts
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/vite.config.ts
rename to examples/05-custom-schema/font-style/vite.config.ts
diff --git a/examples/06-custom-schema/react-custom-blocks/.bnexample.json b/examples/05-custom-schema/react-custom-blocks/.bnexample.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/.bnexample.json
rename to examples/05-custom-schema/react-custom-blocks/.bnexample.json
diff --git a/examples/06-custom-schema/react-custom-blocks/App.tsx b/examples/05-custom-schema/react-custom-blocks/App.tsx
similarity index 88%
rename from examples/06-custom-schema/react-custom-blocks/App.tsx
rename to examples/05-custom-schema/react-custom-blocks/App.tsx
index da714765d7..ef6d160471 100644
--- a/examples/06-custom-schema/react-custom-blocks/App.tsx
+++ b/examples/05-custom-schema/react-custom-blocks/App.tsx
@@ -1,8 +1,12 @@
-import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
+import {
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  defaultProps,
+} from "@blocknote/core";
 import {
   BlockNoteView,
   createReactBlockSpec,
-  useBlockNote,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
@@ -39,8 +43,8 @@ export const alertBlock = createReactBlockSpec(
       textAlignment: defaultProps.textAlignment,
       textColor: defaultProps.textColor,
       type: {
-        default: "warning" as const,
-        values: ["warning", "error", "info", "success"] as const,
+        default: "warning",
+        values: ["warning", "error", "info", "success"],
       },
     },
     content: "inline",
@@ -115,14 +119,18 @@ export const bracketsParagraphBlock = createReactBlockSpec(
   }
 );
 
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    alert: alertBlock,
+    simpleImage: simpleImageBlock,
+    bracketsParagraph: bracketsParagraphBlock,
+  },
+});
+
 export default function App() {
-  const editor = useBlockNote({
-    blockSpecs: {
-      ...defaultBlockSpecs,
-      alert: alertBlock,
-      simpleImage: simpleImageBlock,
-      bracketsParagraph: bracketsParagraphBlock,
-    },
+  const editor = useCreateBlockNote({
+    schema,
     initialContent: [
       {
         type: "alert",
diff --git a/examples/06-custom-schema/react-custom-blocks/README.md b/examples/05-custom-schema/react-custom-blocks/README.md
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/README.md
rename to examples/05-custom-schema/react-custom-blocks/README.md
diff --git a/examples/06-custom-schema/react-custom-blocks/index.html b/examples/05-custom-schema/react-custom-blocks/index.html
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/index.html
rename to examples/05-custom-schema/react-custom-blocks/index.html
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/main.tsx b/examples/05-custom-schema/react-custom-blocks/main.tsx
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/main.tsx
rename to examples/05-custom-schema/react-custom-blocks/main.tsx
diff --git a/examples/06-custom-schema/react-custom-blocks/package.json b/examples/05-custom-schema/react-custom-blocks/package.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/package.json
rename to examples/05-custom-schema/react-custom-blocks/package.json
diff --git a/examples/06-custom-schema/react-custom-blocks/styles.css b/examples/05-custom-schema/react-custom-blocks/styles.css
similarity index 100%
rename from examples/06-custom-schema/react-custom-blocks/styles.css
rename to examples/05-custom-schema/react-custom-blocks/styles.css
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/tsconfig.json b/examples/05-custom-schema/react-custom-blocks/tsconfig.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/tsconfig.json
rename to examples/05-custom-schema/react-custom-blocks/tsconfig.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/vite.config.ts b/examples/05-custom-schema/react-custom-blocks/vite.config.ts
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/vite.config.ts
rename to examples/05-custom-schema/react-custom-blocks/vite.config.ts
diff --git a/examples/06-custom-schema/react-custom-inline-content/.bnexample.json b/examples/05-custom-schema/react-custom-inline-content/.bnexample.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/.bnexample.json
rename to examples/05-custom-schema/react-custom-inline-content/.bnexample.json
diff --git a/examples/06-custom-schema/react-custom-inline-content/App.tsx b/examples/05-custom-schema/react-custom-inline-content/App.tsx
similarity index 79%
rename from examples/06-custom-schema/react-custom-inline-content/App.tsx
rename to examples/05-custom-schema/react-custom-inline-content/App.tsx
index ff053c77cf..1046c25e72 100644
--- a/examples/06-custom-schema/react-custom-inline-content/App.tsx
+++ b/examples/05-custom-schema/react-custom-inline-content/App.tsx
@@ -1,8 +1,8 @@
-import { defaultInlineContentSpecs } from "@blocknote/core";
+import { BlockNoteSchema, defaultInlineContentSpecs } from "@blocknote/core";
 import {
   BlockNoteView,
   createReactInlineContentSpec,
-  useBlockNote,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
@@ -40,13 +40,17 @@ const tag = createReactInlineContentSpec(
   }
 );
 
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    mention,
+    tag,
+    ...defaultInlineContentSpecs,
+  },
+});
+
 export default function ReactInlineContent() {
-  const editor = useBlockNote({
-    inlineContentSpecs: {
-      mention,
-      tag,
-      ...defaultInlineContentSpecs,
-    },
+  const editor = useCreateBlockNote({
+    schema,
     initialContent: [
       {
         type: "paragraph",
@@ -58,7 +62,7 @@ export default function ReactInlineContent() {
               user: "Matthew",
             },
             content: undefined,
-          } as any,
+          },
         ],
       },
       {
@@ -68,7 +72,7 @@ export default function ReactInlineContent() {
           {
             type: "tag",
             content: "BlockNote",
-          } as any,
+          },
         ],
       },
     ],
diff --git a/examples/06-custom-schema/react-custom-inline-content/README.md b/examples/05-custom-schema/react-custom-inline-content/README.md
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/README.md
rename to examples/05-custom-schema/react-custom-inline-content/README.md
diff --git a/examples/06-custom-schema/react-custom-inline-content/index.html b/examples/05-custom-schema/react-custom-inline-content/index.html
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/index.html
rename to examples/05-custom-schema/react-custom-inline-content/index.html
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/main.tsx b/examples/05-custom-schema/react-custom-inline-content/main.tsx
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/main.tsx
rename to examples/05-custom-schema/react-custom-inline-content/main.tsx
diff --git a/examples/06-custom-schema/react-custom-inline-content/package.json b/examples/05-custom-schema/react-custom-inline-content/package.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-inline-content/package.json
rename to examples/05-custom-schema/react-custom-inline-content/package.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/tsconfig.json b/examples/05-custom-schema/react-custom-inline-content/tsconfig.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/tsconfig.json
rename to examples/05-custom-schema/react-custom-inline-content/tsconfig.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/vite.config.ts b/examples/05-custom-schema/react-custom-inline-content/vite.config.ts
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/vite.config.ts
rename to examples/05-custom-schema/react-custom-inline-content/vite.config.ts
diff --git a/examples/06-custom-schema/react-custom-styles/.bnexample.json b/examples/05-custom-schema/react-custom-styles/.bnexample.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/.bnexample.json
rename to examples/05-custom-schema/react-custom-styles/.bnexample.json
diff --git a/examples/06-custom-schema/react-custom-styles/App.tsx b/examples/05-custom-schema/react-custom-styles/App.tsx
similarity index 68%
rename from examples/06-custom-schema/react-custom-styles/App.tsx
rename to examples/05-custom-schema/react-custom-styles/App.tsx
index 2420367435..096d2a76f4 100644
--- a/examples/06-custom-schema/react-custom-styles/App.tsx
+++ b/examples/05-custom-schema/react-custom-styles/App.tsx
@@ -1,18 +1,14 @@
-import {
-  BlockNoteEditor,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  StyleSchemaFromSpecs,
-  defaultStyleSpecs,
-} from "@blocknote/core";
+import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
 import {
   BlockNoteView,
-  DefaultPositionedFormattingToolbar,
-  Toolbar,
+  FormattingToolbar,
+  FormattingToolbarController,
+  FormattingToolbarProps,
   ToolbarButton,
   createReactStyleSpec,
   useActiveStyles,
-  useBlockNote,
+  useBlockNoteEditor,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
@@ -42,27 +38,24 @@ const fontSize = createReactStyleSpec(
   }
 );
 
-const customReactStyles = {
-  ...defaultStyleSpecs,
-  small,
-  fontSize,
-};
-
-type MyEditorType = BlockNoteEditor<
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  StyleSchemaFromSpecs<typeof customReactStyles>
->;
+export const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    small,
+    fontSize,
+  },
+});
 
-const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
-  const activeStyles = useActiveStyles(props.editor);
+const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
+  const editor = useBlockNoteEditor(schema);
+  const activeStyles = useActiveStyles(editor);
 
   return (
-    <Toolbar>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
-          props.editor.toggleStyles({
+          editor.toggleStyles({
             small: true,
           });
         }}
@@ -72,21 +65,21 @@ const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
       <ToolbarButton
         mainTooltip={"font size"}
         onClick={() => {
-          props.editor.toggleStyles({
+          editor.toggleStyles({
             fontSize: "30px",
           });
         }}
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </Toolbar>
+    </FormattingToolbar>
   );
 };
 
 export default function App() {
-  const editor = useBlockNote(
+  const editor = useCreateBlockNote(
     {
-      styleSpecs: customReactStyles,
+      schema,
       initialContent: [
         {
           type: "paragraph",
@@ -114,8 +107,7 @@ export default function App() {
 
   return (
     <BlockNoteView className="root" editor={editor}>
-      <DefaultPositionedFormattingToolbar
-        editor={editor}
+      <FormattingToolbarController
         formattingToolbar={CustomFormattingToolbar}
       />
     </BlockNoteView>
diff --git a/examples/06-custom-schema/react-custom-styles/README.md b/examples/05-custom-schema/react-custom-styles/README.md
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/README.md
rename to examples/05-custom-schema/react-custom-styles/README.md
diff --git a/examples/05-custom-schema/react-custom-styles/blocknote.d.ts.example b/examples/05-custom-schema/react-custom-styles/blocknote.d.ts.example
new file mode 100644
index 0000000000..5b33b3e037
--- /dev/null
+++ b/examples/05-custom-schema/react-custom-styles/blocknote.d.ts.example
@@ -0,0 +1,18 @@
+/*
+ * Experimental!
+ * You can use a file like this (blocknote.d.ts) to automatically override types with your custom schema.
+ * This way, you can just use types like `PartialBlock`, `Block`, `BlockNoteEditor` and they'll automatically
+ * use the types from your custom schema.
+ *
+ * (the reason is that this is not used in the examples, is that we use multiple BlockNote instances in the website / example project with different shemas.
+ * This method only works if you use one custom schema in your app)
+ */
+import "@blocknote/core";
+import type { schema } from "./App";
+
+declare module "@blocknote/core" {
+  // Override the default schema types
+  type DefaultStyleSchema = typeof schema.styleSchema;
+  type DefaultBlockSchema = typeof schema.blockSchema;
+  type DefaultInlineContentSchema = typeof schema.inlineContentSchema;
+}
diff --git a/examples/06-custom-schema/react-custom-styles/index.html b/examples/05-custom-schema/react-custom-styles/index.html
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/index.html
rename to examples/05-custom-schema/react-custom-styles/index.html
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/main.tsx b/examples/05-custom-schema/react-custom-styles/main.tsx
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/main.tsx
rename to examples/05-custom-schema/react-custom-styles/main.tsx
diff --git a/examples/06-custom-schema/react-custom-styles/package.json b/examples/05-custom-schema/react-custom-styles/package.json
similarity index 100%
rename from examples/06-custom-schema/react-custom-styles/package.json
rename to examples/05-custom-schema/react-custom-styles/package.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/tsconfig.json b/examples/05-custom-schema/react-custom-styles/tsconfig.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/tsconfig.json
rename to examples/05-custom-schema/react-custom-styles/tsconfig.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/vite.config.ts b/examples/05-custom-schema/react-custom-styles/vite.config.ts
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/vite.config.ts
rename to examples/05-custom-schema/react-custom-styles/vite.config.ts
diff --git a/examples/07-collaboration/partykit/.bnexample.json b/examples/06-collaboration/partykit/.bnexample.json
similarity index 100%
rename from examples/07-collaboration/partykit/.bnexample.json
rename to examples/06-collaboration/partykit/.bnexample.json
diff --git a/examples/07-collaboration/partykit/App.tsx b/examples/06-collaboration/partykit/App.tsx
similarity index 87%
rename from examples/07-collaboration/partykit/App.tsx
rename to examples/06-collaboration/partykit/App.tsx
index 81a4f2a527..8a5447ab21 100644
--- a/examples/07-collaboration/partykit/App.tsx
+++ b/examples/06-collaboration/partykit/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import YPartyKitProvider from "y-partykit/provider";
@@ -14,7 +14,7 @@ const provider = new YPartyKitProvider(
 );
 
 export default function App() {
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     collaboration: {
       // The Yjs Provider responsible for transporting updates:
       provider,
diff --git a/examples/07-collaboration/partykit/README.md b/examples/06-collaboration/partykit/README.md
similarity index 100%
rename from examples/07-collaboration/partykit/README.md
rename to examples/06-collaboration/partykit/README.md
diff --git a/examples/07-collaboration/partykit/index.html b/examples/06-collaboration/partykit/index.html
similarity index 100%
rename from examples/07-collaboration/partykit/index.html
rename to examples/06-collaboration/partykit/index.html
diff --git a/examples/06-collaboration/partykit/main.tsx b/examples/06-collaboration/partykit/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/06-collaboration/partykit/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/07-collaboration/partykit/package.json b/examples/06-collaboration/partykit/package.json
similarity index 100%
rename from examples/07-collaboration/partykit/package.json
rename to examples/06-collaboration/partykit/package.json
diff --git a/examples/06-collaboration/partykit/tsconfig.json b/examples/06-collaboration/partykit/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/06-collaboration/partykit/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/06-collaboration/partykit/vite.config.ts b/examples/06-collaboration/partykit/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/06-collaboration/partykit/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/06-custom-schema/alert-block/App.tsx b/examples/06-custom-schema/alert-block/App.tsx
deleted file mode 100644
index 98834e271a..0000000000
--- a/examples/06-custom-schema/alert-block/App.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { defaultBlockSpecs } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-
-import { Alert } from "./Alert";
-
-// Our block specs, which contain the configs and implementations for blocks
-// that we want our editor to use.
-const blockSpecsWithAlert = {
-  // Adds all default blocks.
-  ...defaultBlockSpecs,
-  // Adds the font paragraph.
-  alert: Alert,
-};
-
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useBlockNote({
-    // Tells BlockNote which blocks to use.
-    blockSpecs: blockSpecsWithAlert,
-    // Adds slash menu item to insert alert block.
-    // slashMenuItems: [...getDefaultReactSlashMenuItems(), insertAlert], TODO
-  });
-
-  return (
-    <BlockNoteView editor={editor}>
-      {/*Adds alert item to block type dropdown in the Formatting Toolbar*/}
-      {/* TODO */}
-      {/* <FormattingToolbarPositioner
-        editor={editor}
-        formattingToolbar={(props) => (
-          <DefaultFormattingToolbar
-            {...props}
-            blockTypeDropdownItems={[
-              ...defaultBlockTypeDropdownItems,
-              {
-                name: "Alert",
-                type: "alert",
-                icon: RiAlertFill,
-                isSelected: (block) => block.type === "alert",
-              },
-            ]}
-          />
-        )}
-      /> */}
-      {/*Other toolbars & menus are defaults*/}
-
-      {/* <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner editor={editor} />
-      <ImageToolbarPositioner editor={editor} /> */}
-    </BlockNoteView>
-  );
-}
diff --git a/examples/06-custom-schema/alert-block/README.md b/examples/06-custom-schema/alert-block/README.md
deleted file mode 100644
index f6a729d903..0000000000
--- a/examples/06-custom-schema/alert-block/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Alert Block
-
-In this example, we create a custom `Alert` block which is used to emphasize text.
-
-In addition, we create a Slash Menu item which inserts an `Alert` block and add an Alert item to the block type dropdown in the Formatting Toolbar.
-
-**Relevant Docs:**
-
-- [Custom Block Types](/docs/block-types#custom-block-types)
-- [Custom Slash Menu Item List](/docs/slash-menu#custom-slash-menu-item-list)
-- [Custom Formatting Toolbar](/docs/formatting-toolbar#custom-formatting-toolbar) & [Components](/docs/formatting-toolbar#components)
-- [Replacing UI Elements](/docs/ui-elements#replacing-ui-elements)
\ No newline at end of file
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/.bnexample.json b/examples/07-interoperability/01-converting-blocks-to-html/.bnexample.json
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/.bnexample.json
rename to examples/07-interoperability/01-converting-blocks-to-html/.bnexample.json
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/App.tsx b/examples/07-interoperability/01-converting-blocks-to-html/App.tsx
similarity index 83%
rename from examples/08-interoperability/01-converting-blocks-to-html/App.tsx
rename to examples/07-interoperability/01-converting-blocks-to-html/App.tsx
index 6a61fc2a75..7f74419ffa 100644
--- a/examples/08-interoperability/01-converting-blocks-to-html/App.tsx
+++ b/examples/07-interoperability/01-converting-blocks-to-html/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";
 
@@ -8,7 +8,7 @@ export default function App() {
   const [html, setHTML] = useState<string>("");
 
   // Creates a new editor instance with some initial content.
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     initialContent: [
       {
         type: "paragraph",
@@ -28,7 +28,7 @@ export default function App() {
 
   const onChange = async () => {
     // Converts the editor's contents from Block objects to HTML and store to state.
-    const html = await editor.blocksToHTMLLossy(editor.topLevelBlocks);
+    const html = await editor.blocksToHTMLLossy(editor.document);
     setHTML(html);
   };
 
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/README.md b/examples/07-interoperability/01-converting-blocks-to-html/README.md
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/README.md
rename to examples/07-interoperability/01-converting-blocks-to-html/README.md
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/index.html b/examples/07-interoperability/01-converting-blocks-to-html/index.html
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/index.html
rename to examples/07-interoperability/01-converting-blocks-to-html/index.html
diff --git a/examples/07-interoperability/01-converting-blocks-to-html/main.tsx b/examples/07-interoperability/01-converting-blocks-to-html/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/07-interoperability/01-converting-blocks-to-html/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/08-interoperability/01-converting-blocks-to-html/package.json b/examples/07-interoperability/01-converting-blocks-to-html/package.json
similarity index 100%
rename from examples/08-interoperability/01-converting-blocks-to-html/package.json
rename to examples/07-interoperability/01-converting-blocks-to-html/package.json
diff --git a/examples/07-interoperability/01-converting-blocks-to-html/tsconfig.json b/examples/07-interoperability/01-converting-blocks-to-html/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/07-interoperability/01-converting-blocks-to-html/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-interoperability/01-converting-blocks-to-html/vite.config.ts b/examples/07-interoperability/01-converting-blocks-to-html/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-interoperability/01-converting-blocks-to-html/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/07-interoperability/02-converting-blocks-from-html/.bnexample.json b/examples/07-interoperability/02-converting-blocks-from-html/.bnexample.json
new file mode 100644
index 0000000000..0993be7115
--- /dev/null
+++ b/examples/07-interoperability/02-converting-blocks-from-html/.bnexample.json
@@ -0,0 +1,4 @@
+{
+  "playground": true,
+  "docs": true
+}
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/App.tsx b/examples/07-interoperability/02-converting-blocks-from-html/App.tsx
similarity index 84%
rename from examples/08-interoperability/02-converting-blocks-from-html/App.tsx
rename to examples/07-interoperability/02-converting-blocks-from-html/App.tsx
index 712eeea796..0ba7cb0a09 100644
--- a/examples/08-interoperability/02-converting-blocks-from-html/App.tsx
+++ b/examples/07-interoperability/02-converting-blocks-from-html/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { ChangeEvent, useCallback, useEffect } from "react";
 
@@ -7,14 +7,14 @@ const initialHTML = "<p>Hello, <strong>world!</strong></p>";
 // TODO: better design?
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   const htmlInputChanged = useCallback(
     async (e: ChangeEvent<HTMLTextAreaElement>) => {
       // Whenever the current HTML content changes, converts it to an array of
       // Block objects and replaces the editor's content with them.
       const blocks = await editor.tryParseHTMLToBlocks(e.target.value);
-      editor.replaceBlocks(editor.topLevelBlocks, blocks);
+      editor.replaceBlocks(editor.document, blocks);
     },
     [editor]
   );
@@ -23,7 +23,7 @@ export default function App() {
   useEffect(() => {
     async function loadInitialHTML() {
       const blocks = await editor.tryParseHTMLToBlocks(initialHTML);
-      editor.replaceBlocks(editor.topLevelBlocks, blocks);
+      editor.replaceBlocks(editor.document, blocks);
     }
     loadInitialHTML();
   }, [editor]);
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/README.md b/examples/07-interoperability/02-converting-blocks-from-html/README.md
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/README.md
rename to examples/07-interoperability/02-converting-blocks-from-html/README.md
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/index.html b/examples/07-interoperability/02-converting-blocks-from-html/index.html
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/index.html
rename to examples/07-interoperability/02-converting-blocks-from-html/index.html
diff --git a/examples/07-interoperability/02-converting-blocks-from-html/main.tsx b/examples/07-interoperability/02-converting-blocks-from-html/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/07-interoperability/02-converting-blocks-from-html/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/08-interoperability/02-converting-blocks-from-html/package.json b/examples/07-interoperability/02-converting-blocks-from-html/package.json
similarity index 100%
rename from examples/08-interoperability/02-converting-blocks-from-html/package.json
rename to examples/07-interoperability/02-converting-blocks-from-html/package.json
diff --git a/examples/07-interoperability/02-converting-blocks-from-html/tsconfig.json b/examples/07-interoperability/02-converting-blocks-from-html/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/07-interoperability/02-converting-blocks-from-html/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-interoperability/02-converting-blocks-from-html/vite.config.ts b/examples/07-interoperability/02-converting-blocks-from-html/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-interoperability/02-converting-blocks-from-html/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/07-interoperability/03-converting-blocks-to-md/.bnexample.json b/examples/07-interoperability/03-converting-blocks-to-md/.bnexample.json
new file mode 100644
index 0000000000..0993be7115
--- /dev/null
+++ b/examples/07-interoperability/03-converting-blocks-to-md/.bnexample.json
@@ -0,0 +1,4 @@
+{
+  "playground": true,
+  "docs": true
+}
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/App.tsx b/examples/07-interoperability/03-converting-blocks-to-md/App.tsx
similarity index 83%
rename from examples/08-interoperability/03-converting-blocks-to-md/App.tsx
rename to examples/07-interoperability/03-converting-blocks-to-md/App.tsx
index 21e28001d6..955ffee33c 100644
--- a/examples/08-interoperability/03-converting-blocks-to-md/App.tsx
+++ b/examples/07-interoperability/03-converting-blocks-to-md/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";
 
@@ -8,7 +8,7 @@ export default function App() {
   const [markdown, setMarkdown] = useState<string>("");
 
   // Creates a new editor instance with some initial content.
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     initialContent: [
       {
         type: "paragraph",
@@ -28,7 +28,7 @@ export default function App() {
 
   const onChange = async () => {
     // Converts the editor's contents from Block objects to Markdown and store to state.
-    const markdown = await editor.blocksToMarkdownLossy(editor.topLevelBlocks);
+    const markdown = await editor.blocksToMarkdownLossy(editor.document);
     setMarkdown(markdown);
   };
 
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/README.md b/examples/07-interoperability/03-converting-blocks-to-md/README.md
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/README.md
rename to examples/07-interoperability/03-converting-blocks-to-md/README.md
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/index.html b/examples/07-interoperability/03-converting-blocks-to-md/index.html
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/index.html
rename to examples/07-interoperability/03-converting-blocks-to-md/index.html
diff --git a/examples/07-interoperability/03-converting-blocks-to-md/main.tsx b/examples/07-interoperability/03-converting-blocks-to-md/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/07-interoperability/03-converting-blocks-to-md/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/08-interoperability/03-converting-blocks-to-md/package.json b/examples/07-interoperability/03-converting-blocks-to-md/package.json
similarity index 100%
rename from examples/08-interoperability/03-converting-blocks-to-md/package.json
rename to examples/07-interoperability/03-converting-blocks-to-md/package.json
diff --git a/examples/07-interoperability/03-converting-blocks-to-md/tsconfig.json b/examples/07-interoperability/03-converting-blocks-to-md/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/07-interoperability/03-converting-blocks-to-md/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-interoperability/03-converting-blocks-to-md/vite.config.ts b/examples/07-interoperability/03-converting-blocks-to-md/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-interoperability/03-converting-blocks-to-md/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/07-interoperability/04-converting-blocks-from-md/.bnexample.json b/examples/07-interoperability/04-converting-blocks-from-md/.bnexample.json
new file mode 100644
index 0000000000..0993be7115
--- /dev/null
+++ b/examples/07-interoperability/04-converting-blocks-from-md/.bnexample.json
@@ -0,0 +1,4 @@
+{
+  "playground": true,
+  "docs": true
+}
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/App.tsx b/examples/07-interoperability/04-converting-blocks-from-md/App.tsx
similarity index 85%
rename from examples/08-interoperability/04-converting-blocks-from-md/App.tsx
rename to examples/07-interoperability/04-converting-blocks-from-md/App.tsx
index fb0c3a6df9..43a63640af 100644
--- a/examples/08-interoperability/04-converting-blocks-from-md/App.tsx
+++ b/examples/07-interoperability/04-converting-blocks-from-md/App.tsx
@@ -1,4 +1,4 @@
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { ChangeEvent, useCallback, useEffect } from "react";
 
@@ -7,14 +7,14 @@ const initialMarkdown = "Hello, **world!**";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useBlockNote();
+  const editor = useCreateBlockNote();
 
   const markdownInputChanged = useCallback(
     async (e: ChangeEvent<HTMLTextAreaElement>) => {
       // Whenever the current Markdown content changes, converts it to an array of
       // Block objects and replaces the editor's content with them.
       const blocks = await editor.tryParseMarkdownToBlocks(e.target.value);
-      editor.replaceBlocks(editor.topLevelBlocks, blocks);
+      editor.replaceBlocks(editor.document, blocks);
     },
     [editor]
   );
@@ -23,7 +23,7 @@ export default function App() {
   useEffect(() => {
     async function loadInitialHTML() {
       const blocks = await editor.tryParseMarkdownToBlocks(initialMarkdown);
-      editor.replaceBlocks(editor.topLevelBlocks, blocks);
+      editor.replaceBlocks(editor.document, blocks);
     }
     loadInitialHTML();
   }, [editor]);
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/README.md b/examples/07-interoperability/04-converting-blocks-from-md/README.md
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/README.md
rename to examples/07-interoperability/04-converting-blocks-from-md/README.md
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/index.html b/examples/07-interoperability/04-converting-blocks-from-md/index.html
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/index.html
rename to examples/07-interoperability/04-converting-blocks-from-md/index.html
diff --git a/examples/07-interoperability/04-converting-blocks-from-md/main.tsx b/examples/07-interoperability/04-converting-blocks-from-md/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/07-interoperability/04-converting-blocks-from-md/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/08-interoperability/04-converting-blocks-from-md/package.json b/examples/07-interoperability/04-converting-blocks-from-md/package.json
similarity index 100%
rename from examples/08-interoperability/04-converting-blocks-from-md/package.json
rename to examples/07-interoperability/04-converting-blocks-from-md/package.json
diff --git a/examples/07-interoperability/04-converting-blocks-from-md/tsconfig.json b/examples/07-interoperability/04-converting-blocks-from-md/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/07-interoperability/04-converting-blocks-from-md/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-interoperability/04-converting-blocks-from-md/vite.config.ts b/examples/07-interoperability/04-converting-blocks-from-md/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-interoperability/04-converting-blocks-from-md/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/.bnexample.json b/examples/08-vanilla-js/react-vanilla-custom-blocks/.bnexample.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/.bnexample.json
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/.bnexample.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/App.tsx b/examples/08-vanilla-js/react-vanilla-custom-blocks/App.tsx
similarity index 94%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/App.tsx
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/App.tsx
index df9b462034..1117fe1168 100644
--- a/examples/09-vanilla-js/react-vanilla-custom-blocks/App.tsx
+++ b/examples/08-vanilla-js/react-vanilla-custom-blocks/App.tsx
@@ -1,9 +1,10 @@
 import {
+  BlockNoteSchema,
   createBlockSpec,
   defaultBlockSpecs,
   defaultProps,
 } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import "./styles.css";
@@ -176,15 +177,18 @@ const bracketsParagraphBlock = createBlockSpec(
     },
   }
 );
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    alert: alertBlock,
+    bracketsParagraph: bracketsParagraphBlock,
+    simpleImage: simpleImageBlock,
+  },
+});
 
 export default function App() {
-  const editor = useBlockNote({
-    blockSpecs: {
-      ...defaultBlockSpecs,
-      alert: alertBlock,
-      bracketsParagraph: bracketsParagraphBlock,
-      simpleImage: simpleImageBlock,
-    },
+  const editor = useCreateBlockNote({
+    schema,
     initialContent: [
       {
         type: "alert",
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/README.md b/examples/08-vanilla-js/react-vanilla-custom-blocks/README.md
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/README.md
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/README.md
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/index.html b/examples/08-vanilla-js/react-vanilla-custom-blocks/index.html
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/index.html
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/index.html
diff --git a/examples/08-vanilla-js/react-vanilla-custom-blocks/main.tsx b/examples/08-vanilla-js/react-vanilla-custom-blocks/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-blocks/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/package.json b/examples/08-vanilla-js/react-vanilla-custom-blocks/package.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/package.json
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/package.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-blocks/styles.css b/examples/08-vanilla-js/react-vanilla-custom-blocks/styles.css
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-blocks/styles.css
rename to examples/08-vanilla-js/react-vanilla-custom-blocks/styles.css
diff --git a/examples/08-vanilla-js/react-vanilla-custom-blocks/tsconfig.json b/examples/08-vanilla-js/react-vanilla-custom-blocks/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-blocks/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/08-vanilla-js/react-vanilla-custom-blocks/vite.config.ts b/examples/08-vanilla-js/react-vanilla-custom-blocks/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-blocks/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/.bnexample.json b/examples/08-vanilla-js/react-vanilla-custom-inline-content/.bnexample.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/.bnexample.json
rename to examples/08-vanilla-js/react-vanilla-custom-inline-content/.bnexample.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/App.tsx b/examples/08-vanilla-js/react-vanilla-custom-inline-content/App.tsx
similarity index 84%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/App.tsx
rename to examples/08-vanilla-js/react-vanilla-custom-inline-content/App.tsx
index aa39042c34..443bc627dd 100644
--- a/examples/09-vanilla-js/react-vanilla-custom-inline-content/App.tsx
+++ b/examples/08-vanilla-js/react-vanilla-custom-inline-content/App.tsx
@@ -1,8 +1,9 @@
 import {
+  BlockNoteSchema,
   createInlineContentSpec,
   defaultInlineContentSpecs,
 } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 const mention = createInlineContentSpec(
@@ -49,13 +50,17 @@ const tag = createInlineContentSpec(
   }
 );
 
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    mention,
+    tag,
+    ...defaultInlineContentSpecs,
+  },
+});
+
 export default function App() {
-  const editor = useBlockNote({
-    inlineContentSpecs: {
-      mention,
-      tag,
-      ...defaultInlineContentSpecs,
-    },
+  const editor = useCreateBlockNote({
+    schema,
     initialContent: [
       {
         type: "paragraph",
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/README.md b/examples/08-vanilla-js/react-vanilla-custom-inline-content/README.md
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/README.md
rename to examples/08-vanilla-js/react-vanilla-custom-inline-content/README.md
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/index.html b/examples/08-vanilla-js/react-vanilla-custom-inline-content/index.html
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/index.html
rename to examples/08-vanilla-js/react-vanilla-custom-inline-content/index.html
diff --git a/examples/08-vanilla-js/react-vanilla-custom-inline-content/main.tsx b/examples/08-vanilla-js/react-vanilla-custom-inline-content/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-inline-content/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/09-vanilla-js/react-vanilla-custom-inline-content/package.json b/examples/08-vanilla-js/react-vanilla-custom-inline-content/package.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-inline-content/package.json
rename to examples/08-vanilla-js/react-vanilla-custom-inline-content/package.json
diff --git a/examples/08-vanilla-js/react-vanilla-custom-inline-content/tsconfig.json b/examples/08-vanilla-js/react-vanilla-custom-inline-content/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-inline-content/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/08-vanilla-js/react-vanilla-custom-inline-content/vite.config.ts b/examples/08-vanilla-js/react-vanilla-custom-inline-content/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-inline-content/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/.bnexample.json b/examples/08-vanilla-js/react-vanilla-custom-styles/.bnexample.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/.bnexample.json
rename to examples/08-vanilla-js/react-vanilla-custom-styles/.bnexample.json
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/08-vanilla-js/react-vanilla-custom-styles/App.tsx
similarity index 71%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx
rename to examples/08-vanilla-js/react-vanilla-custom-styles/App.tsx
index e98f666753..e784e575bb 100644
--- a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx
+++ b/examples/08-vanilla-js/react-vanilla-custom-styles/App.tsx
@@ -1,17 +1,17 @@
 import {
-  BlockNoteEditor,
+  BlockNoteSchema,
   createStyleSpec,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
   defaultStyleSpecs,
 } from "@blocknote/core";
 import {
   BlockNoteView,
-  DefaultPositionedFormattingToolbar,
-  Toolbar,
+  FormattingToolbar,
+  FormattingToolbarController,
+  FormattingToolbarProps,
   ToolbarButton,
   useActiveStyles,
-  useBlockNote,
+  useBlockNoteEditor,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
@@ -50,24 +50,24 @@ const fontSize = createStyleSpec(
   }
 );
 
-type MyEditorType = BlockNoteEditor<
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  {
-    small: (typeof small)["config"];
-    fontSize: (typeof fontSize)["config"];
-  }
->;
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    small,
+    fontSize,
+  },
+});
 
-const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
-  const activeStyles = useActiveStyles(props.editor);
+const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
+  const editor = useBlockNoteEditor(schema);
+  const activeStyles = useActiveStyles(editor);
 
   return (
-    <Toolbar>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
-          props.editor.toggleStyles({
+          editor.toggleStyles({
             small: true,
           });
         }}
@@ -77,25 +77,22 @@ const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
       <ToolbarButton
         mainTooltip={"font size"}
         onClick={() => {
-          props.editor.toggleStyles({
+          editor.toggleStyles({
             fontSize: "30px",
           });
         }}
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </Toolbar>
+    </FormattingToolbar>
   );
 };
 
 export default function App() {
-  const editor = useBlockNote(
+  const editor = useCreateBlockNote(
     {
-      styleSpecs: {
-        ...defaultStyleSpecs,
-        small,
-        fontSize,
-      },
+      schema,
+
       initialContent: [
         {
           type: "paragraph",
@@ -123,8 +120,7 @@ export default function App() {
 
   return (
     <BlockNoteView className="root" editor={editor}>
-      <DefaultPositionedFormattingToolbar
-        editor={editor}
+      <FormattingToolbarController
         formattingToolbar={CustomFormattingToolbar}
       />
     </BlockNoteView>
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/README.md b/examples/08-vanilla-js/react-vanilla-custom-styles/README.md
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/README.md
rename to examples/08-vanilla-js/react-vanilla-custom-styles/README.md
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/index.html b/examples/08-vanilla-js/react-vanilla-custom-styles/index.html
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/index.html
rename to examples/08-vanilla-js/react-vanilla-custom-styles/index.html
diff --git a/examples/08-vanilla-js/react-vanilla-custom-styles/main.tsx b/examples/08-vanilla-js/react-vanilla-custom-styles/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-styles/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/package.json b/examples/08-vanilla-js/react-vanilla-custom-styles/package.json
similarity index 100%
rename from examples/09-vanilla-js/react-vanilla-custom-styles/package.json
rename to examples/08-vanilla-js/react-vanilla-custom-styles/package.json
diff --git a/examples/08-vanilla-js/react-vanilla-custom-styles/tsconfig.json b/examples/08-vanilla-js/react-vanilla-custom-styles/tsconfig.json
new file mode 100644
index 0000000000..bb6637c459
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-styles/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/08-vanilla-js/react-vanilla-custom-styles/vite.config.ts b/examples/08-vanilla-js/react-vanilla-custom-styles/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/08-vanilla-js/react-vanilla-custom-styles/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/package-lock.json b/package-lock.json
index 0a5a019f65..167ae4d772 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
       "workspaces": [
         "packages/*",
         "playground",
-        "docs",
-        "tests"
+        "tests",
+        "docs"
       ],
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.5.0",
@@ -29,7 +29,7 @@
         "@blocknote/core": "*",
         "@blocknote/react": "*",
         "@headlessui/react": "^1.7.18",
-        "@mantine/core": "^7.4.2",
+        "@mantine/core": "^7.5.0",
         "@next/bundle-analyzer": "^14.1.0",
         "@vercel/og": "^0.6.2",
         "classnames": "2.3.2",
@@ -3709,7 +3709,6 @@
     "node_modules/@mantine/hooks": {
       "version": "7.5.0",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^18.2.0"
       }
@@ -16286,6 +16285,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
@@ -21456,43 +21456,6 @@
         "react-dom": "^18"
       }
     },
-    "packages/react/node_modules/@mantine/core": {
-      "version": "7.4.2",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react": "^0.24.8",
-        "clsx": "2.0.0",
-        "react-number-format": "^5.3.1",
-        "react-remove-scroll": "^2.5.7",
-        "react-textarea-autosize": "8.5.3",
-        "type-fest": "^3.13.1"
-      },
-      "peerDependencies": {
-        "@mantine/hooks": "7.4.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "packages/react/node_modules/@mantine/core/node_modules/@floating-ui/react": {
-      "version": "0.24.8",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.1",
-        "aria-hidden": "^1.2.3",
-        "tabbable": "^6.0.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "packages/react/node_modules/@mantine/hooks": {
-      "version": "7.4.2",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
     "packages/react/node_modules/rimraf": {
       "version": "5.0.5",
       "dev": true,
@@ -21516,7 +21479,7 @@
       "dependencies": {
         "@blocknote/core": "^0.11.2",
         "@blocknote/react": "^0.11.2",
-        "@mantine/core": "^7.4.2",
+        "@mantine/core": "^7.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.20.0",
diff --git a/package.json b/package.json
index c4d628b496..26d2252136 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
   "workspaces": [
     "packages/*",
     "playground",
-    "docs",
-    "tests"
+    "tests",
+    "docs"
   ],
   "devDependencies": {
     "eslint": "^8.22.0",
diff --git a/packages/core/src/api/blockManipulation/blockManipulation.test.ts b/packages/core/src/api/blockManipulation/blockManipulation.test.ts
index df471d8092..9ec7d3677a 100644
--- a/packages/core/src/api/blockManipulation/blockManipulation.test.ts
+++ b/packages/core/src/api/blockManipulation/blockManipulation.test.ts
@@ -85,10 +85,10 @@ beforeEach(() => {
   ];
 
   insert = (placement) => {
-    const existingBlock = editor.topLevelBlocks[0];
+    const existingBlock = editor.document[0];
     editor.insertBlocks(multipleBlocks, existingBlock, placement);
 
-    return editor.topLevelBlocks;
+    return editor.document;
   };
 });
 
@@ -173,12 +173,12 @@ describe("Insert, Update, & Delete Blocks", () => {
   it("Insert, update, & delete single block", async () => {
     await waitForEditor();
 
-    const existingBlock = editor.topLevelBlocks[0];
+    const existingBlock = editor.document[0];
     editor.insertBlocks([singleBlock], existingBlock);
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
 
-    const newBlock = editor.topLevelBlocks[0];
+    const newBlock = editor.document[0];
     editor.updateBlock(newBlock, {
       type: "heading",
       props: {
@@ -204,32 +204,32 @@ describe("Insert, Update, & Delete Blocks", () => {
       children: [singleBlock],
     });
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
 
-    const updatedBlock = editor.topLevelBlocks[0];
+    const updatedBlock = editor.document[0];
     editor.removeBlocks([updatedBlock]);
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
   });
 
   it("Insert, update, & delete multiple blocks", async () => {
     await waitForEditor();
 
-    const existingBlock = editor.topLevelBlocks[0];
+    const existingBlock = editor.document[0];
     editor.insertBlocks(multipleBlocks, existingBlock);
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
 
-    const newBlock = editor.topLevelBlocks[0];
+    const newBlock = editor.document[0];
     editor.updateBlock(newBlock, {
       type: "paragraph",
     });
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
 
-    const updatedBlocks = editor.topLevelBlocks.slice(0, 2);
+    const updatedBlocks = editor.document.slice(0, 2);
     editor.removeBlocks([updatedBlocks[0].children[0], updatedBlocks[1]]);
 
-    expect(editor.topLevelBlocks).toMatchSnapshot();
+    expect(editor.document).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/api/blockManipulation/blockManipulation.ts b/packages/core/src/api/blockManipulation/blockManipulation.ts
index e1e44e834b..7180c04182 100644
--- a/packages/core/src/api/blockManipulation/blockManipulation.ts
+++ b/packages/core/src/api/blockManipulation/blockManipulation.ts
@@ -30,7 +30,7 @@ export function insertBlocks<
   const nodesToInsert: Node[] = [];
   for (const blockSpec of blocksToInsert) {
     nodesToInsert.push(
-      blockToNode(blockSpec, ttEditor.schema, editor.styleSchema)
+      blockToNode(blockSpec, ttEditor.schema, editor.schema.styleSchema)
     );
   }
 
@@ -72,9 +72,9 @@ export function insertBlocks<
     insertedBlocks.push(
       nodeToBlock(
         node,
-        editor.blockSchema,
-        editor.inlineContentSchema,
-        editor.styleSchema,
+        editor.schema.blockSchema,
+        editor.schema.inlineContentSchema,
+        editor.schema.styleSchema,
         editor.blockCache
       )
     );
@@ -106,9 +106,9 @@ export function updateBlock<
 
   return nodeToBlock(
     blockContainerNode,
-    editor.blockSchema,
-    editor.inlineContentSchema,
-    editor.styleSchema,
+    editor.schema.blockSchema,
+    editor.schema.inlineContentSchema,
+    editor.schema.styleSchema,
     editor.blockCache
   );
 }
@@ -157,9 +157,9 @@ function removeBlocksWithCallback<
     removedBlocks.push(
       nodeToBlock(
         node,
-        editor.blockSchema,
-        editor.inlineContentSchema,
-        editor.styleSchema,
+        editor.schema.blockSchema,
+        editor.schema.inlineContentSchema,
+        editor.schema.styleSchema,
         editor.blockCache
       )
     );
@@ -217,7 +217,9 @@ export function replaceBlocks<
 
   const nodesToInsert: Node[] = [];
   for (const block of blocksToInsert) {
-    nodesToInsert.push(blockToNode(block, ttEditor.schema, editor.styleSchema));
+    nodesToInsert.push(
+      blockToNode(block, ttEditor.schema, editor.schema.styleSchema)
+    );
   }
 
   const idOfFirstBlock =
@@ -247,9 +249,9 @@ export function replaceBlocks<
     insertedBlocks.push(
       nodeToBlock(
         node,
-        editor.blockSchema,
-        editor.inlineContentSchema,
-        editor.styleSchema,
+        editor.schema.blockSchema,
+        editor.schema.inlineContentSchema,
+        editor.schema.styleSchema,
         editor.blockCache
       )
     );
diff --git a/packages/core/src/api/exporters/html/externalHTMLExporter.ts b/packages/core/src/api/exporters/html/externalHTMLExporter.ts
index 932a6c086e..743d6ea391 100644
--- a/packages/core/src/api/exporters/html/externalHTMLExporter.ts
+++ b/packages/core/src/api/exporters/html/externalHTMLExporter.ts
@@ -83,7 +83,7 @@ export const createExternalHTMLExporter = <
 
   serializer.exportBlocks = (blocks: PartialBlock<BSchema, I, S>[]) => {
     const nodes = blocks.map((block) =>
-      blockToNode(block, schema, editor.styleSchema)
+      blockToNode(block, schema, editor.schema.styleSchema)
     );
     const blockGroup = schema.nodes["blockGroup"].create(null, nodes);
 
diff --git a/packages/core/src/api/exporters/html/htmlConversion.test.ts b/packages/core/src/api/exporters/html/htmlConversion.test.ts
index bc02e76d02..e657e7ffb7 100644
--- a/packages/core/src/api/exporters/html/htmlConversion.test.ts
+++ b/packages/core/src/api/exporters/html/htmlConversion.test.ts
@@ -39,7 +39,7 @@ async function convertToHTMLAndCompareSnapshots<
 
   // turn the internalHTML back into blocks, and make sure no data was lost
   const fullBlocks = partialBlocksToBlocksForTesting(
-    editor.blockSchema,
+    editor.schema.blockSchema,
     blocks
   );
   const parsed = await editor.tryParseHTMLToBlocks(internalHTML);
diff --git a/packages/core/src/api/exporters/html/internalHTMLSerializer.ts b/packages/core/src/api/exporters/html/internalHTMLSerializer.ts
index 9f2a55612d..7d7f409011 100644
--- a/packages/core/src/api/exporters/html/internalHTMLSerializer.ts
+++ b/packages/core/src/api/exporters/html/internalHTMLSerializer.ts
@@ -65,7 +65,7 @@ export const createInternalHTMLSerializer = <
 
   serializer.serializeBlocks = (blocks: PartialBlock<BSchema, I, S>[]) => {
     const nodes = blocks.map((block) =>
-      blockToNode(block, schema, editor.styleSchema)
+      blockToNode(block, schema, editor.schema.styleSchema)
     );
     const blockGroup = schema.nodes["blockGroup"].create(null, nodes);
 
diff --git a/packages/core/src/api/exporters/html/util/sharedHTMLConversion.ts b/packages/core/src/api/exporters/html/util/sharedHTMLConversion.ts
index 7042e30bbb..7a1d0748a0 100644
--- a/packages/core/src/api/exporters/html/util/sharedHTMLConversion.ts
+++ b/packages/core/src/api/exporters/html/util/sharedHTMLConversion.ts
@@ -71,9 +71,9 @@ export const serializeNodeInner = <
         const blockContent = toHTML(
           nodeToBlock(
             node,
-            editor.blockSchema,
-            editor.inlineContentSchema,
-            editor.styleSchema,
+            editor.schema.blockSchema,
+            editor.schema.inlineContentSchema,
+            editor.schema.styleSchema,
             editor.blockCache
           ),
           editor as any
diff --git a/packages/core/src/api/exporters/markdown/markdownExporter.test.ts b/packages/core/src/api/exporters/markdown/markdownExporter.test.ts
index 894f4663cd..8845f22057 100644
--- a/packages/core/src/api/exporters/markdown/markdownExporter.test.ts
+++ b/packages/core/src/api/exporters/markdown/markdownExporter.test.ts
@@ -23,7 +23,7 @@ async function convertToMarkdownAndCompareSnapshots<
   snapshotName: string
 ) {
   const fullBlocks = partialBlocksToBlocksForTesting(
-    editor.blockSchema,
+    editor.schema.blockSchema,
     blocks
   );
   const md = await editor.blocksToMarkdownLossy(fullBlocks);
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.test.ts b/packages/core/src/api/nodeConversions/nodeConversions.test.ts
index 4bdfded9af..6a07ef229b 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.test.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.test.ts
@@ -20,20 +20,20 @@ function validateConversion(
   const node = blockToNode(
     block,
     editor._tiptapEditor.schema,
-    editor.styleSchema
+    editor.schema.styleSchema
   );
 
   expect(node).toMatchSnapshot();
 
   const outputBlock = nodeToBlock(
     node,
-    editor.blockSchema,
-    editor.inlineContentSchema,
-    editor.styleSchema
+    editor.schema.blockSchema,
+    editor.schema.inlineContentSchema,
+    editor.schema.styleSchema
   );
 
   const fullOriginalBlock = partialBlockToBlockForTesting(
-    editor.blockSchema,
+    editor.schema.blockSchema,
     block
   );
 
diff --git a/packages/core/src/api/parsers/html/parseHTML.test.ts b/packages/core/src/api/parsers/html/parseHTML.test.ts
index 69be9d69bb..a2fe8d1ee3 100644
--- a/packages/core/src/api/parsers/html/parseHTML.test.ts
+++ b/packages/core/src/api/parsers/html/parseHTML.test.ts
@@ -53,7 +53,7 @@ async function parseHTMLAndCompareSnapshots(
   //     },
   //   } as any);
 
-  const pastedBlocks = editor.topLevelBlocks;
+  const pastedBlocks = editor.document;
   pastedBlocks.pop(); // trailing paragraph
   expect(pastedBlocks).toStrictEqual(blocks);
 }
diff --git a/packages/core/src/api/testUtil/cases/customBlocks.ts b/packages/core/src/api/testUtil/cases/customBlocks.ts
index 4c278ea408..bd7e96cce1 100644
--- a/packages/core/src/api/testUtil/cases/customBlocks.ts
+++ b/packages/core/src/api/testUtil/cases/customBlocks.ts
@@ -1,19 +1,19 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  imagePropSchema,
+  renderImage,
+} from "../../../blocks/ImageBlockContent/ImageBlockContent";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   defaultBlockSpecs,
 } from "../../../blocks/defaultBlocks";
 import { defaultProps } from "../../../blocks/defaultProps";
-import {
-  imagePropSchema,
-  renderImage,
-} from "../../../blocks/ImageBlockContent/ImageBlockContent";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createBlockSpec } from "../../../schema/blocks/createSpec";
-import { BlockSchemaFromSpecs, BlockSpecs } from "../../../schema/blocks/types";
 
 // This is a modified version of the default image block that does not implement
 // a `serialize` function. It's used to test if the custom serializer by default
@@ -74,22 +74,24 @@ const SimpleCustomParagraph = createBlockSpec(
   }
 );
 
-const customSpecs = {
-  ...defaultBlockSpecs,
-  simpleImage: SimpleImage,
-  customParagraph: CustomParagraph,
-  simpleCustomParagraph: SimpleCustomParagraph,
-} satisfies BlockSpecs;
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    simpleImage: SimpleImage,
+    customParagraph: CustomParagraph,
+    simpleCustomParagraph: SimpleCustomParagraph,
+  },
+});
 
 export const customBlocksTestCases: EditorTestCases<
-  BlockSchemaFromSpecs<typeof customSpecs>,
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom blocks schema",
   createEditor: () => {
     return BlockNoteEditor.create({
-      blockSpecs: customSpecs,
+      schema,
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
     });
   },
@@ -98,7 +100,7 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleImage/button",
       blocks: [
         {
-          type: "simpleImage" as const,
+          type: "simpleImage",
         },
       ],
     },
diff --git a/packages/core/src/api/testUtil/cases/customInlineContent.ts b/packages/core/src/api/testUtil/cases/customInlineContent.ts
index 737cab3db9..290edb0b8b 100644
--- a/packages/core/src/api/testUtil/cases/customInlineContent.ts
+++ b/packages/core/src/api/testUtil/cases/customInlineContent.ts
@@ -1,17 +1,14 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultStyleSchema,
   defaultInlineContentSpecs,
 } from "../../../blocks/defaultBlocks";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createInlineContentSpec } from "../../../schema/inlineContent/createSpec";
-import {
-  InlineContentSchemaFromSpecs,
-  InlineContentSpecs,
-} from "../../../schema/inlineContent/types";
 
 const mention = createInlineContentSpec(
   {
@@ -57,22 +54,24 @@ const tag = createInlineContentSpec(
   }
 );
 
-const customInlineContent = {
-  ...defaultInlineContentSpecs,
-  mention,
-  tag,
-} satisfies InlineContentSpecs;
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    mention,
+    tag,
+  },
+});
 
 export const customInlineContentTestCases: EditorTestCases<
   DefaultBlockSchema,
-  InlineContentSchemaFromSpecs<typeof customInlineContent>,
+  typeof schema.inlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom inline content schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      inlineContentSpecs: customInlineContent,
+      schema,
     });
   },
   documents: [
diff --git a/packages/core/src/api/testUtil/cases/customStyles.ts b/packages/core/src/api/testUtil/cases/customStyles.ts
index cd19064a99..de6556deb4 100644
--- a/packages/core/src/api/testUtil/cases/customStyles.ts
+++ b/packages/core/src/api/testUtil/cases/customStyles.ts
@@ -1,14 +1,14 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultInlineContentSchema,
   defaultStyleSpecs,
 } from "../../../blocks/defaultBlocks";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createStyleSpec } from "../../../schema/styles/createSpec";
-import { StyleSchemaFromSpecs, StyleSpecs } from "../../../schema/styles/types";
 
 const small = createStyleSpec(
   {
@@ -43,22 +43,24 @@ const fontSize = createStyleSpec(
   }
 );
 
-const customStyles = {
-  ...defaultStyleSpecs,
-  small,
-  fontSize,
-} satisfies StyleSpecs;
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    small,
+    fontSize,
+  },
+});
 
 export const customStylesTestCases: EditorTestCases<
   DefaultBlockSchema,
   DefaultInlineContentSchema,
-  StyleSchemaFromSpecs<typeof customStyles>
+  typeof schema.styleSchema
 > = {
   name: "custom style schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      styleSpecs: customStyles,
+      schema,
     });
   },
   documents: [
diff --git a/packages/core/src/api/testUtil/index.ts b/packages/core/src/api/testUtil/index.ts
index d52a871781..ccac58d4f6 100644
--- a/packages/core/src/api/testUtil/index.ts
+++ b/packages/core/src/api/testUtil/index.ts
@@ -3,6 +3,7 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { BlockSchema } from "../../schema/blocks/types";
 import { InlineContentSchema } from "../../schema/inlineContent/types";
 import { StyleSchema } from "../../schema/styles/types";
+import { NoInfer } from "../../util/typescript";
 
 export type EditorTestCases<
   B extends BlockSchema,
@@ -13,6 +14,6 @@ export type EditorTestCases<
   createEditor: () => BlockNoteEditor<B, I, S>;
   documents: Array<{
     name: string;
-    blocks: PartialBlock<B, I, S>[];
+    blocks: PartialBlock<NoInfer<B>, NoInfer<I>, NoInfer<S>>[];
   }>;
 };
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 6fd56d7494..8bfc3d4678 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -1,5 +1,4 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { imageToolbarPluginKey } from "../../extensions/ImageToolbar/ImageToolbarPlugin";
 
 import {
   BlockFromConfig,
@@ -235,7 +234,7 @@ export const renderImage = (
   // Opens the image toolbar.
   const addImageButtonClickHandler = () => {
     editor._tiptapEditor.view.dispatch(
-      editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
+      editor._tiptapEditor.state.tr.setMeta(editor.imageToolbar!.plugin, {
         block: block,
       })
     );
diff --git a/packages/core/src/blocks/defaultBlockHelpers.ts b/packages/core/src/blocks/defaultBlockHelpers.ts
index 7769e6a492..7519beed85 100644
--- a/packages/core/src/blocks/defaultBlockHelpers.ts
+++ b/packages/core/src/blocks/defaultBlockHelpers.ts
@@ -1,8 +1,12 @@
 import { blockToNode } from "../api/nodeConversions/nodeConversions";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
-import type { BlockSchema, InlineContentSchema, StyleSchema } from "../schema";
+import type {
+  BlockNoDefaults,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
 import { mergeCSSClasses } from "../util/browser";
-import { Block } from "./defaultBlocks";
 
 // Function that creates a ProseMirror `DOMOutputSpec` for a default block.
 // Since all default blocks have the same structure (`blockContent` div with a
@@ -57,7 +61,7 @@ export const defaultBlockToHTML = <
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  block: Block<BSchema, I, S>,
+  block: BlockNoDefaults<BSchema, I, S>,
   editor: BlockNoteEditor<BSchema, I, S>
 ): {
   dom: HTMLElement;
@@ -66,7 +70,7 @@ export const defaultBlockToHTML = <
   const node = blockToNode(
     block,
     editor._tiptapEditor.schema,
-    editor.styleSchema
+    editor.schema.styleSchema
   ).firstChild!;
   const toDOM = editor._tiptapEditor.schema.nodes[node.type.name].spec.toDOM;
 
diff --git a/packages/core/src/blocks/defaultBlockTypeGuards.ts b/packages/core/src/blocks/defaultBlockTypeGuards.ts
new file mode 100644
index 0000000000..175aabca2b
--- /dev/null
+++ b/packages/core/src/blocks/defaultBlockTypeGuards.ts
@@ -0,0 +1,84 @@
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
+import { BlockFromConfig, InlineContentSchema, StyleSchema } from "../schema";
+import { Block, DefaultBlockSchema, defaultBlockSchema } from "./defaultBlocks";
+import { defaultProps } from "./defaultProps";
+
+export function checkDefaultBlockTypeInSchema<
+  BlockType extends keyof DefaultBlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blockType: BlockType,
+  editor: BlockNoteEditor<any, I, S>
+): editor is BlockNoteEditor<{ Type: DefaultBlockSchema[BlockType] }, I, S> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    editor.schema.blockSchema[blockType] === defaultBlockSchema[blockType]
+  );
+}
+
+export function checkBlockIsDefaultType<
+  BlockType extends keyof DefaultBlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blockType: BlockType,
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<any, I, S>
+): block is BlockFromConfig<DefaultBlockSchema[BlockType], I, S> {
+  return (
+    block.type === blockType &&
+    block.type in editor.schema.blockSchema &&
+    checkDefaultBlockTypeInSchema(block.type, editor)
+  );
+}
+
+export function checkBlockTypeHasDefaultProp<
+  Prop extends keyof typeof defaultProps,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  prop: Prop,
+  blockType: string,
+  editor: BlockNoteEditor<any, I, S>
+): editor is BlockNoteEditor<
+  {
+    [BT in string]: {
+      type: BT;
+      propSchema: {
+        [P in Prop]: (typeof defaultProps)[P];
+      };
+      content: "table" | "inline" | "none";
+    };
+  },
+  I,
+  S
+> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    prop in editor.schema.blockSchema[blockType].propSchema &&
+    editor.schema.blockSchema[blockType].propSchema[prop] === defaultProps[prop]
+  );
+}
+
+export function checkBlockHasDefaultProp<
+  Prop extends keyof typeof defaultProps,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  prop: Prop,
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<any, I, S>
+): block is BlockFromConfig<
+  {
+    type: string;
+    propSchema: {
+      [P in Prop]: (typeof defaultProps)[P];
+    };
+    content: "table" | "inline" | "none";
+  },
+  I,
+  S
+> {
+  return checkBlockTypeHasDefaultProp(prop, block.type, editor);
+}
diff --git a/packages/core/src/blocks/defaultBlocks.ts b/packages/core/src/blocks/defaultBlocks.ts
index df16a70fcf..a6fbb88316 100644
--- a/packages/core/src/blocks/defaultBlocks.ts
+++ b/packages/core/src/blocks/defaultBlocks.ts
@@ -37,7 +37,10 @@ export const defaultBlockSpecs = {
 
 export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);
 
-export type DefaultBlockSchema = typeof defaultBlockSchema;
+// underscore is used that in case a user overrides DefaultBlockSchema,
+// they can still access the original default block schema
+export type _DefaultBlockSchema = typeof defaultBlockSchema;
+export type DefaultBlockSchema = _DefaultBlockSchema;
 
 export const defaultStyleSpecs = {
   bold: createStyleSpecFromTipTapMark(Bold, "boolean"),
@@ -51,7 +54,10 @@ export const defaultStyleSpecs = {
 
 export const defaultStyleSchema = getStyleSchemaFromSpecs(defaultStyleSpecs);
 
-export type DefaultStyleSchema = typeof defaultStyleSchema;
+// underscore is used that in case a user overrides DefaultStyleSchema,
+// they can still access the original default style schema
+export type _DefaultStyleSchema = typeof defaultStyleSchema;
+export type DefaultStyleSchema = _DefaultStyleSchema;
 
 export const defaultInlineContentSpecs = {
   text: { config: "text", implementation: {} as any },
@@ -62,7 +68,10 @@ export const defaultInlineContentSchema = getInlineContentSchemaFromSpecs(
   defaultInlineContentSpecs
 );
 
-export type DefaultInlineContentSchema = typeof defaultInlineContentSchema;
+// underscore is used that in case a user overrides DefaultInlineContentSchema,
+// they can still access the original default inline content schema
+export type _DefaultInlineContentSchema = typeof defaultInlineContentSchema;
+export type DefaultInlineContentSchema = _DefaultInlineContentSchema;
 
 export type PartialBlock<
   BSchema extends BlockSchema = DefaultBlockSchema,
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index b0ed827414..a7ca4391af 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -18,12 +18,8 @@ import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown";
 import {
   Block,
   DefaultBlockSchema,
-  defaultBlockSchema,
-  defaultBlockSpecs,
   DefaultInlineContentSchema,
-  defaultInlineContentSpecs,
   DefaultStyleSchema,
-  defaultStyleSpecs,
   PartialBlock,
 } from "../blocks/defaultBlocks";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
@@ -37,21 +33,15 @@ import {
   BlockIdentifier,
   BlockNoteDOMAttributes,
   BlockSchema,
-  BlockSchemaFromSpecs,
   BlockSpecs,
-  getBlockSchemaFromSpecs,
-  getInlineContentSchemaFromSpecs,
-  getStyleSchemaFromSpecs,
   InlineContentSchema,
-  InlineContentSchemaFromSpecs,
   InlineContentSpecs,
-  Styles,
   StyleSchema,
-  StyleSchemaFromSpecs,
   StyleSpecs,
+  Styles,
 } from "../schema";
 import { mergeCSSClasses } from "../util/browser";
-import { UnreachableCaseError } from "../util/typescript";
+import { NoInfer, UnreachableCaseError } from "../util/typescript";
 
 import { getBlockNoteExtensions } from "./BlockNoteExtensions";
 import { TextCursorPosition } from "./cursorPositionTypes";
@@ -60,20 +50,19 @@ import { Selection } from "./selectionTypes";
 import { transformPasted } from "./transformPasted";
 
 // CSS
+import { checkDefaultBlockTypeInSchema } from "../blocks/defaultBlockTypeGuards";
 import "./Block.css";
+import { BlockNoteSchema } from "./BlockNoteSchema";
 import {
   BlockNoteTipTapEditor,
   BlockNoteTipTapEditorOptions,
 } from "./BlockNoteTipTapEditor";
 import "./editor.css";
 
-// TODO: change for built-in version of typescript 5.4 after upgrade
-export type NoInfer<T> = [T][T extends any ? 0 : never];
-
 export type BlockNoteEditorOptions<
-  BSpecs extends BlockSpecs,
-  ISpecs extends InlineContentSpecs,
-  SSpecs extends StyleSpecs
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
 > = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
@@ -89,9 +78,9 @@ export type BlockNoteEditorOptions<
    * The content that should be in the editor when it's created, represented as an array of partial block objects.
    */
   initialContent: PartialBlock<
-    BlockSchemaFromSpecs<NoInfer<BSpecs>>,
-    InlineContentSchemaFromSpecs<NoInfer<ISpecs>>,
-    StyleSchemaFromSpecs<NoInfer<SSpecs>>
+    NoInfer<BSchema>,
+    NoInfer<ISchema>,
+    NoInfer<SSchema>
   >[];
   /**
    * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
@@ -100,20 +89,7 @@ export type BlockNoteEditorOptions<
    */
   defaultStyles: boolean;
 
-  /**
-   * A list of custom block types that should be available in the editor.
-   */
-  blockSpecs: BSpecs;
-
-  /**
-   * A list of custom InlineContent types that should be available in the editor.
-   */
-  inlineContentSpecs: ISpecs;
-
-  /**
-   * A list of custom Styles that should be available in the editor.
-   */
-  styleSpecs: SSpecs;
+  schema: BlockNoteSchema<BSchema, ISchema, SSchema>;
 
   /**
    * A custom function to handle file uploads.
@@ -166,52 +142,45 @@ export class BlockNoteEditor<
     contentComponent: any;
   };
   public blockCache = new WeakMap<Node, Block<any, any, any>>();
-  public readonly blockSchema: BSchema;
-  public readonly inlineContentSchema: ISchema;
-  public readonly styleSchema: SSchema;
+  public readonly schema: BlockNoteSchema<BSchema, ISchema, SSchema>;
 
   public readonly blockImplementations: BlockSpecs;
   public readonly inlineContentImplementations: InlineContentSpecs;
   public readonly styleImplementations: StyleSpecs;
 
-  public readonly sideMenu: SideMenuProsemirrorPlugin<
-    BSchema,
-    ISchema,
-    SSchema
-  >;
   public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin;
   public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<
     BSchema,
     ISchema,
     SSchema
   >;
-  public readonly imageToolbar: ImageToolbarProsemirrorPlugin<
+  public readonly sideMenu: SideMenuProsemirrorPlugin<
     BSchema,
     ISchema,
     SSchema
   >;
-  public readonly tableHandles:
-    | TableHandlesProsemirrorPlugin<ISchema, SSchema>
-    | undefined;
-
   public readonly suggestionMenus: SuggestionMenuProseMirrorPlugin<
     BSchema,
     ISchema,
     SSchema
   >;
+  public readonly imageToolbar?: ImageToolbarProsemirrorPlugin<
+    ISchema,
+    SSchema
+  >;
+  public readonly tableHandles?: TableHandlesProsemirrorPlugin<
+    ISchema,
+    SSchema
+  >;
 
   public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
 
   public static create<
-    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
-    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
-    SSpecs extends StyleSpecs = typeof defaultStyleSpecs
-  >(options: Partial<BlockNoteEditorOptions<BSpecs, ISpecs, SSpecs>> = {}) {
-    return new BlockNoteEditor(options) as BlockNoteEditor<
-      BlockSchemaFromSpecs<BSpecs>,
-      InlineContentSchemaFromSpecs<ISpecs>,
-      StyleSchemaFromSpecs<SSpecs>
-    >;
+    BSchema extends BlockSchema = DefaultBlockSchema,
+    ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+    SSchema extends StyleSchema = DefaultStyleSchema
+  >(options: Partial<BlockNoteEditorOptions<BSchema, ISchema, SSchema>> = {}) {
+    return new BlockNoteEditor<BSchema, ISchema, SSchema>(options);
   }
 
   private constructor(
@@ -245,41 +214,35 @@ export class BlockNoteEditor<
     // apply defaults
     const newOptions = {
       defaultStyles: true,
-      blockSpecs: options.blockSpecs || defaultBlockSpecs,
-      styleSpecs: options.styleSpecs || defaultStyleSpecs,
-      inlineContentSpecs:
-        options.inlineContentSpecs || defaultInlineContentSpecs,
+      schema: options.schema || BlockNoteSchema.create(),
       ...options,
     };
 
-    this.blockSchema = getBlockSchemaFromSpecs(newOptions.blockSpecs);
-    this.inlineContentSchema = getInlineContentSchemaFromSpecs(
-      newOptions.inlineContentSpecs
-    );
-    this.styleSchema = getStyleSchemaFromSpecs(newOptions.styleSpecs);
-    this.blockImplementations = newOptions.blockSpecs;
-    this.inlineContentImplementations = newOptions.inlineContentSpecs;
-    this.styleImplementations = newOptions.styleSpecs;
+    // @ts-ignore
+    this.schema = newOptions.schema;
+    this.blockImplementations = newOptions.schema.blockSpecs;
+    this.inlineContentImplementations = newOptions.schema.inlineContentSpecs;
+    this.styleImplementations = newOptions.schema.styleSpecs;
 
-    this.sideMenu = new SideMenuProsemirrorPlugin(this);
     this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
-
-    this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
-
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
-    this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);
-
-    if (this.blockSchema.table === defaultBlockSchema.table) {
+    this.sideMenu = new SideMenuProsemirrorPlugin(this);
+    this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
+    if (checkDefaultBlockTypeInSchema("image", this)) {
+      // Type guards only work on `const`s? Not working for `this`
+      this.imageToolbar = new ImageToolbarProsemirrorPlugin(this as any);
+    }
+    if (checkDefaultBlockTypeInSchema("table", this)) {
       this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
     }
 
     const extensions = getBlockNoteExtensions({
       editor: this,
       domAttributes: newOptions.domAttributes || {},
-      blockSchema: this.blockSchema,
-      blockSpecs: newOptions.blockSpecs,
-      styleSpecs: newOptions.styleSpecs,
-      inlineContentSpecs: newOptions.inlineContentSpecs,
+      blockSchema: this.schema.blockSchema,
+      blockSpecs: this.schema.blockSpecs,
+      styleSpecs: this.schema.styleSpecs,
+      inlineContentSpecs: this.schema.inlineContentSpecs,
       collaboration: newOptions.collaboration,
     });
 
@@ -288,11 +251,11 @@ export class BlockNoteEditor<
 
       addProseMirrorPlugins: () => {
         return [
-          this.sideMenu.plugin,
           this.formattingToolbar.plugin,
           this.hyperlinkToolbar.plugin,
-          this.imageToolbar.plugin,
+          this.sideMenu.plugin,
           this.suggestionMenus.plugin,
+          ...(this.imageToolbar ? [this.imageToolbar.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
         ];
       },
@@ -355,7 +318,7 @@ export class BlockNoteEditor<
 
     this._tiptapEditor = new BlockNoteTipTapEditor(
       tiptapOptions,
-      this.styleSchema
+      this.schema.styleSchema
     ) as BlockNoteTipTapEditor & {
       contentComponent: any;
     };
@@ -386,20 +349,27 @@ export class BlockNoteEditor<
     this._tiptapEditor.view.focus();
   }
 
+  /**
+   * @deprecated, use `editor.document` instead
+   */
+  public get topLevelBlocks(): Block<BSchema, ISchema, SSchema>[] {
+    return this.topLevelBlocks;
+  }
+
   /**
    * Gets a snapshot of all top-level (non-nested) blocks in the editor.
    * @returns A snapshot of all top-level (non-nested) blocks in the editor.
    */
-  public get topLevelBlocks(): Block<BSchema, ISchema, SSchema>[] {
+  public get document(): Block<BSchema, ISchema, SSchema>[] {
     const blocks: Block<BSchema, ISchema, SSchema>[] = [];
 
     this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
       blocks.push(
         nodeToBlock(
           node,
-          this.blockSchema,
-          this.inlineContentSchema,
-          this.styleSchema,
+          this.schema.blockSchema,
+          this.schema.inlineContentSchema,
+          this.schema.styleSchema,
           this.blockCache
         )
       );
@@ -435,9 +405,9 @@ export class BlockNoteEditor<
 
       newBlock = nodeToBlock(
         node,
-        this.blockSchema,
-        this.inlineContentSchema,
-        this.styleSchema,
+        this.schema.blockSchema,
+        this.schema.inlineContentSchema,
+        this.schema.styleSchema,
         this.blockCache
       );
 
@@ -456,7 +426,7 @@ export class BlockNoteEditor<
     callback: (block: Block<BSchema, ISchema, SSchema>) => boolean,
     reverse = false
   ): void {
-    const blocks = this.topLevelBlocks.slice();
+    const blocks = this.document.slice();
 
     if (reverse) {
       blocks.reverse();
@@ -539,9 +509,9 @@ export class BlockNoteEditor<
     return {
       block: nodeToBlock(
         node,
-        this.blockSchema,
-        this.inlineContentSchema,
-        this.styleSchema,
+        this.schema.blockSchema,
+        this.schema.inlineContentSchema,
+        this.schema.styleSchema,
         this.blockCache
       ),
       prevBlock:
@@ -549,9 +519,9 @@ export class BlockNoteEditor<
           ? undefined
           : nodeToBlock(
               prevNode,
-              this.blockSchema,
-              this.inlineContentSchema,
-              this.styleSchema,
+              this.schema.blockSchema,
+              this.schema.inlineContentSchema,
+              this.schema.styleSchema,
               this.blockCache
             ),
       nextBlock:
@@ -559,9 +529,9 @@ export class BlockNoteEditor<
           ? undefined
           : nodeToBlock(
               nextNode,
-              this.blockSchema,
-              this.inlineContentSchema,
-              this.styleSchema,
+              this.schema.blockSchema,
+              this.schema.inlineContentSchema,
+              this.schema.styleSchema,
               this.blockCache
             ),
     };
@@ -586,7 +556,7 @@ export class BlockNoteEditor<
     )!;
 
     const contentType: "none" | "inline" | "table" =
-      this.blockSchema[contentNode.type.name]!.content;
+      this.schema.blockSchema[contentNode.type.name]!.content;
 
     if (contentType === "none") {
       this._tiptapEditor.commands.setNodeSelection(startPos);
@@ -650,9 +620,9 @@ export class BlockNoteEditor<
       blocks.push(
         nodeToBlock(
           this._tiptapEditor.state.doc.resolve(pos).node(),
-          this.blockSchema,
-          this.inlineContentSchema,
-          this.styleSchema,
+          this.schema.blockSchema,
+          this.schema.inlineContentSchema,
+          this.schema.styleSchema,
           this.blockCache
         )
       );
@@ -739,7 +709,7 @@ export class BlockNoteEditor<
     const marks = this._tiptapEditor.state.selection.$to.marks();
 
     for (const mark of marks) {
-      const config = this.styleSchema[mark.type.name];
+      const config = this.schema.styleSchema[mark.type.name];
       if (!config) {
         console.warn("mark not found in styleschema", mark.type.name);
         continue;
@@ -762,7 +732,7 @@ export class BlockNoteEditor<
     this._tiptapEditor.view.focus();
 
     for (const [style, value] of Object.entries(styles)) {
-      const config = this.styleSchema[style];
+      const config = this.schema.styleSchema[style];
       if (!config) {
         throw new Error(`style ${style} not found in styleSchema`);
       }
@@ -796,7 +766,7 @@ export class BlockNoteEditor<
     this._tiptapEditor.view.focus();
 
     for (const [style, value] of Object.entries(styles)) {
-      const config = this.styleSchema[style];
+      const config = this.schema.styleSchema[style];
       if (!config) {
         throw new Error(`style ${style} not found in styleSchema`);
       }
@@ -898,7 +868,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as an HTML string.
    */
   public async blocksToHTMLLossy(
-    blocks: Block<BSchema, ISchema, SSchema>[] = this.topLevelBlocks
+    blocks: Block<BSchema, ISchema, SSchema>[] = this.document
   ): Promise<string> {
     const exporter = createExternalHTMLExporter(
       this._tiptapEditor.schema,
@@ -919,9 +889,9 @@ export class BlockNoteEditor<
   ): Promise<Block<BSchema, ISchema, SSchema>[]> {
     return HTMLToBlocks(
       html,
-      this.blockSchema,
-      this.inlineContentSchema,
-      this.styleSchema,
+      this.schema.blockSchema,
+      this.schema.inlineContentSchema,
+      this.schema.styleSchema,
       this._tiptapEditor.schema
     );
   }
@@ -933,7 +903,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as a Markdown string.
    */
   public async blocksToMarkdownLossy(
-    blocks: Block<BSchema, ISchema, SSchema>[] = this.topLevelBlocks
+    blocks: Block<BSchema, ISchema, SSchema>[] = this.document
   ): Promise<string> {
     return blocksToMarkdown(blocks, this._tiptapEditor.schema, this);
   }
@@ -950,9 +920,9 @@ export class BlockNoteEditor<
   ): Promise<Block<BSchema, ISchema, SSchema>[]> {
     return markdownToBlocks(
       markdown,
-      this.blockSchema,
-      this.inlineContentSchema,
-      this.styleSchema,
+      this.schema.blockSchema,
+      this.schema.inlineContentSchema,
+      this.schema.styleSchema,
       this._tiptapEditor.schema
     );
   }
diff --git a/packages/core/src/editor/BlockNoteSchema.ts b/packages/core/src/editor/BlockNoteSchema.ts
new file mode 100644
index 0000000000..90ebd3748d
--- /dev/null
+++ b/packages/core/src/editor/BlockNoteSchema.ts
@@ -0,0 +1,98 @@
+import {
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+} from "../blocks/defaultBlocks";
+import {
+  BlockSchema,
+  BlockSchemaFromSpecs,
+  BlockSpecs,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
+  getBlockSchemaFromSpecs,
+  getInlineContentSchemaFromSpecs,
+  getStyleSchemaFromSpecs,
+} from "../schema";
+import type {
+  BlockNoDefaults,
+  PartialBlockNoDefaults,
+} from "../schema/blocks/types";
+import type { BlockNoteEditor } from "./BlockNoteEditor";
+
+export class BlockNoteSchema<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+> {
+  public readonly blockSpecs: BlockSpecs;
+  public readonly inlineContentSpecs: InlineContentSpecs;
+  public readonly styleSpecs: StyleSpecs;
+
+  public readonly blockSchema: BSchema;
+  public readonly inlineContentSchema: ISchema;
+  public readonly styleSchema: SSchema;
+
+  // Helper so that you can use typeof schema.BlockNoteEditor
+  public readonly BlockNoteEditor: BlockNoteEditor<BSchema, ISchema, SSchema> =
+    "only for types" as any;
+
+  public readonly Block: BlockNoDefaults<BSchema, ISchema, SSchema> =
+    "only for types" as any;
+
+  public readonly PartialBlock: PartialBlockNoDefaults<
+    BSchema,
+    ISchema,
+    SSchema
+  > = "only for types" as any;
+
+  public static create<
+    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
+    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
+    SSpecs extends StyleSpecs = typeof defaultStyleSpecs
+  >(options?: {
+    /**
+     * A list of custom block types that should be available in the editor.
+     */
+    blockSpecs?: BSpecs;
+    /**
+     * A list of custom InlineContent types that should be available in the editor.
+     */
+    inlineContentSpecs?: ISpecs;
+    /**
+     * A list of custom Styles that should be available in the editor.
+     */
+    styleSpecs?: SSpecs;
+  }) {
+    return new BlockNoteSchema<
+      BlockSchemaFromSpecs<BSpecs>,
+      InlineContentSchemaFromSpecs<ISpecs>,
+      StyleSchemaFromSpecs<SSpecs>
+    >(options);
+    // as BlockNoteSchema<
+    // BlockSchemaFromSpecs<BSpecs>,
+    // InlineContentSchemaFromSpecs<ISpecs>,
+    // StyleSchemaFromSpecs<SSpecs>
+    // >;
+  }
+
+  constructor(opts?: {
+    blockSpecs?: BlockSpecs;
+    inlineContentSpecs?: InlineContentSpecs;
+    styleSpecs?: StyleSpecs;
+  }) {
+    this.blockSpecs = opts?.blockSpecs || defaultBlockSpecs;
+    this.inlineContentSpecs =
+      opts?.inlineContentSpecs || defaultInlineContentSpecs;
+    this.styleSpecs = opts?.styleSpecs || defaultStyleSpecs;
+
+    this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
+    this.inlineContentSchema = getInlineContentSchemaFromSpecs(
+      this.inlineContentSpecs
+    ) as any;
+    this.styleSchema = getStyleSchemaFromSpecs(this.styleSpecs) as any;
+  }
+}
diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts
index 6bd1b35998..789c5b44f9 100644
--- a/packages/core/src/editor/BlockNoteTipTapEditor.ts
+++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts
@@ -148,7 +148,6 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    * @param element DOM element to mount to, ur null / undefined to destroy
    */
   public mount = (element?: HTMLElement | null) => {
-    console.log("mount", element);
     if (!element) {
       this.destroy();
     } else {
diff --git a/packages/core/src/extensions/ImageToolbar/ImageToolbarPlugin.ts b/packages/core/src/extensions/ImageToolbar/ImageToolbarPlugin.ts
index abc9b0bee7..26a28c13c2 100644
--- a/packages/core/src/extensions/ImageToolbar/ImageToolbarPlugin.ts
+++ b/packages/core/src/extensions/ImageToolbar/ImageToolbarPlugin.ts
@@ -2,29 +2,28 @@ import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import {
-  BlockSchema,
+import type {
+  BlockFromConfig,
   InlineContentSchema,
-  SpecificBlock,
   StyleSchema,
 } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { EventEmitter } from "../../util/EventEmitter";
+import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 
 export type ImageToolbarState<
-  B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > = UiElementPosition & {
-  block: SpecificBlock<B, "image", I, S>;
+  // TODO: This typing is not quite right (children should be from BSchema)
+  block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
 };
 
 export class ImageToolbarView<
-  BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > {
-  public state?: ImageToolbarState<BSchema, I, S>;
+  public state?: ImageToolbarState<I, S>;
   public emitUpdate: () => void;
 
   public prevWasEditable: boolean | null = null;
@@ -32,7 +31,7 @@ export class ImageToolbarView<
   constructor(
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
-    emitUpdate: (state: ImageToolbarState<BSchema, I, S>) => void
+    emitUpdate: (state: ImageToolbarState<I, S>) => void
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -101,7 +100,7 @@ export class ImageToolbarView<
 
   update(view: EditorView, prevState: EditorState) {
     const pluginState: {
-      block: SpecificBlock<BSchema, "image", I, S>;
+      block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
     } = this.pluginKey.getState(view.state);
 
     if (!this.state?.show && pluginState.block) {
@@ -143,20 +142,21 @@ export class ImageToolbarView<
   }
 }
 
-export const imageToolbarPluginKey = new PluginKey("ImageToolbarPlugin");
+const imageToolbarPluginKey = new PluginKey("ImageToolbarPlugin");
 
 export class ImageToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: ImageToolbarView<BSchema, I, S> | undefined;
+  private view: ImageToolbarView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(_editor: BlockNoteEditor<BSchema, I, S>) {
+  constructor(
+    _editor: BlockNoteEditor<{ image: DefaultBlockSchema["image"] }, I, S>
+  ) {
     super();
     this.plugin = new Plugin<{
-      block: SpecificBlock<BSchema, "image", I, S> | undefined;
+      block: BlockFromConfig<DefaultBlockSchema["image"], I, S> | undefined;
     }>({
       key: imageToolbarPluginKey,
       view: (editorView) => {
@@ -177,8 +177,9 @@ export class ImageToolbarProsemirrorPlugin<
           };
         },
         apply: (transaction) => {
-          const block: SpecificBlock<BSchema, "image", I, S> | undefined =
-            transaction.getMeta(imageToolbarPluginKey)?.block;
+          const block:
+            | BlockFromConfig<DefaultBlockSchema["image"], I, S>
+            | undefined = transaction.getMeta(imageToolbarPluginKey)?.block;
 
           return {
             block,
@@ -188,7 +189,7 @@ export class ImageToolbarProsemirrorPlugin<
     });
   }
 
-  public onUpdate(callback: (state: ImageToolbarState<BSchema, I, S>) => void) {
+  public onUpdate(callback: (state: ImageToolbarState<I, S>) => void) {
     return this.on("update", callback);
   }
 }
diff --git a/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts b/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts
new file mode 100644
index 0000000000..4505a3aaa9
--- /dev/null
+++ b/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts
@@ -0,0 +1,8 @@
+export type DefaultSuggestionItem = {
+  title: string;
+  onItemClick: () => void;
+  subtext?: string;
+  badge?: string;
+  aliases?: string[];
+  group?: string;
+};
diff --git a/packages/core/src/extensions/SuggestionMenu/defaultSlashMenuItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
similarity index 61%
rename from packages/core/src/extensions/SuggestionMenu/defaultSlashMenuItems.ts
rename to packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
index 628ef510b3..d110436173 100644
--- a/packages/core/src/extensions/SuggestionMenu/defaultSlashMenuItems.ts
+++ b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
@@ -1,17 +1,14 @@
-import {
-  Block,
-  DefaultBlockSchema,
-  PartialBlock,
-} from "../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { Block, PartialBlock } from "../../blocks/defaultBlocks";
+import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
   BlockSchema,
   InlineContentSchema,
-  StyleSchema,
   isStyledTextInlineContent,
+  StyleSchema,
 } from "../../schema";
 import { formatKeyboardShortcut } from "../../util/browser";
-import { imageToolbarPluginKey } from "../ImageToolbar/ImageToolbarPlugin";
+import { DefaultSuggestionItem } from "./DefaultSuggestionItem";
 
 // Sets the editor's text cursor position to the next content editable block,
 // so either a block with inline content or a table. The last block is always a
@@ -23,11 +20,11 @@ function setSelectionToNextContentEditableBlock<
   S extends StyleSchema
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   let block = editor.getTextCursorPosition().block;
-  let contentType = editor.blockSchema[block.type].content;
+  let contentType = editor.schema.blockSchema[block.type].content;
 
   while (contentType === "none") {
     block = editor.getTextCursorPosition().nextBlock!;
-    contentType = editor.blockSchema[block.type].content as
+    contentType = editor.schema.blockSchema[block.type].content as
       | "inline"
       | "table"
       | "none";
@@ -76,89 +73,106 @@ export function insertOrUpdateBlock<
   return insertedBlock;
 }
 
-export function getDefaultSlashMenuItems() {
-  return [
-    {
-      title: "Heading 1",
-      // Unfortunately, we can't use a more specific BlockNoteEditor type here,
-      // Typescript seems to get in the way there
-      // This means that we don't have type checking for calling insertOrUpdateBlock etc. :(
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
-        insertOrUpdateBlock(editor, {
-          type: "heading",
-          props: { level: 1 },
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
-      },
-      subtext: "Used for a top-level heading",
-      badge: formatKeyboardShortcut("Mod-Alt-1"),
-      aliases: ["h", "heading1", "h1"],
-      group: "Headings",
-    },
-    {
-      title: "Heading 2",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
-        insertOrUpdateBlock(editor, {
-          type: "heading",
-          props: { level: 2 },
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+export function getDefaultSlashMenuItems<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>) {
+  const items: DefaultSuggestionItem[] = [];
+
+  if (checkDefaultBlockTypeInSchema("heading", editor)) {
+    items.push(
+      {
+        title: "Heading 1",
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 1 },
+          });
+        },
+        subtext: "Used for a top-level heading",
+        badge: formatKeyboardShortcut("Mod-Alt-1"),
+        aliases: ["h", "heading1", "h1"],
+        group: "Headings",
       },
-      subtext: "Used for key sections",
-      badge: formatKeyboardShortcut("Mod-Alt-2"),
-      aliases: ["h2", "heading2", "subheading"],
-      group: "Headings",
-    },
-    {
-      title: "Heading 3",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
-        insertOrUpdateBlock(editor, {
-          type: "heading",
-          props: { level: 3 },
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+      {
+        title: "Heading 2",
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 2 },
+          });
+        },
+        subtext: "Used for key sections",
+        badge: formatKeyboardShortcut("Mod-Alt-2"),
+        aliases: ["h2", "heading2", "subheading"],
+        group: "Headings",
       },
-      subtext: "Used for subsections and group headings",
-      badge: formatKeyboardShortcut("Mod-Alt-3"),
-      aliases: ["h3", "heading3", "subheading"],
-      group: "Headings",
-    },
-    {
+      {
+        title: "Heading 3",
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 3 },
+          });
+        },
+        subtext: "Used for subsections and group headings",
+        badge: formatKeyboardShortcut("Mod-Alt-3"),
+        aliases: ["h3", "heading3", "subheading"],
+        group: "Headings",
+      }
+    );
+  }
+
+  if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
+    items.push({
       title: "Numbered List",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "numberedListItem",
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+        });
       },
       subtext: "Used to display a numbered list",
       badge: formatKeyboardShortcut("Mod-Shift-7"),
       aliases: ["ol", "li", "list", "numberedlist", "numbered list"],
       group: "Basic blocks",
-    },
-    {
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("bulletListItem", editor)) {
+    items.push({
       title: "Bullet List",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "bulletListItem",
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+        });
       },
       subtext: "Used to display an unordered list",
       badge: formatKeyboardShortcut("Mod-Shift-8"),
       aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
       group: "Basic blocks",
-    },
-    {
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("paragraph", editor)) {
+    items.push({
       title: "Paragraph",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "paragraph",
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+        });
       },
       subtext: "Used for the body of your document",
       badge: formatKeyboardShortcut("Mod-Alt-0"),
       aliases: ["p", "paragraph"],
       group: "Basic blocks",
-    },
-    {
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("table", editor)) {
+    items.push({
       title: "Table",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "table",
           content: {
@@ -172,23 +186,26 @@ export function getDefaultSlashMenuItems() {
               },
             ],
           },
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+        });
       },
       subtext: "Used for for tables",
       aliases: ["table"],
       group: "Advanced",
       badge: undefined,
-    },
-    {
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("image", editor)) {
+    items.push({
       title: "Image",
-      onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+      onItemClick: () => {
         const insertedBlock = insertOrUpdateBlock(editor, {
           type: "image",
-        } satisfies PartialBlock<DefaultBlockSchema, any, any>);
+        });
 
         // Immediately open the image toolbar
-        editor._tiptapEditor.view.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.imageToolbar!.plugin, {
             block: insertedBlock,
           })
         );
@@ -206,8 +223,10 @@ export function getDefaultSlashMenuItems() {
         "dropbox",
       ],
       group: "Media",
-    },
-  ] as const;
+    });
+  }
+
+  return items;
 }
 
 export function filterSuggestionItems<
diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
index f379981f47..8b1918d8e5 100644
--- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
+++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
@@ -177,9 +177,9 @@ export class TableHandlesView<
 
       block = nodeToBlock(
         node,
-        this.editor.blockSchema,
-        this.editor.inlineContentSchema,
-        this.editor.styleSchema,
+        this.editor.schema.blockSchema,
+        this.editor.schema.inlineContentSchema,
+        this.editor.schema.styleSchema,
         this.editor.blockCache
       );
       this.tablePos = pos + 1;
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1c6603c158..0a809fae0d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -2,19 +2,22 @@ export * from "./api/exporters/html/externalHTMLExporter";
 export * from "./api/exporters/html/internalHTMLSerializer";
 export * from "./api/testUtil";
 export * from "./blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./blocks/defaultBlockTypeGuards";
 export * from "./blocks/defaultBlocks";
 export * from "./blocks/defaultProps";
 export * from "./editor/BlockNoteEditor";
 export * from "./editor/BlockNoteExtensions";
+export * from "./editor/BlockNoteSchema";
 export * from "./editor/selectionTypes";
+export * from "./extensions-shared/UiElementPosition";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
 export * from "./extensions/ImageToolbar/ImageToolbarPlugin";
-export * from "./extensions/SuggestionMenu/defaultSlashMenuItems";
-export * from "./extensions/SuggestionMenu/SuggestionPlugin";
 export * from "./extensions/SideMenu/SideMenuPlugin";
+export * from "./extensions/SuggestionMenu/DefaultSuggestionItem";
+export * from "./extensions/SuggestionMenu/SuggestionPlugin";
+export * from "./extensions/SuggestionMenu/getDefaultSlashMenuItems";
 export * from "./extensions/TableHandles/TableHandlesPlugin";
-export * from "./extensions-shared/UiElementPosition";
 export * from "./schema";
 export * from "./util/browser";
 export * from "./util/string";
diff --git a/packages/core/src/pm-nodes/BlockContainer.ts b/packages/core/src/pm-nodes/BlockContainer.ts
index b4467ffd01..7fce1e716a 100644
--- a/packages/core/src/pm-nodes/BlockContainer.ts
+++ b/packages/core/src/pm-nodes/BlockContainer.ts
@@ -183,7 +183,7 @@ export const BlockContainer = Node.create<{
                   blockToNode(
                     child,
                     state.schema,
-                    this.options.editor.styleSchema
+                    this.options.editor.schema.styleSchema
                   )
                 );
               }
@@ -223,13 +223,13 @@ export const BlockContainer = Node.create<{
                 content = inlineContentToNodes(
                   block.content,
                   state.schema,
-                  this.options.editor.styleSchema
+                  this.options.editor.schema.styleSchema
                 );
               } else if (block.content.type === "tableContent") {
                 content = tableContentToNodes(
                   block.content,
                   state.schema,
-                  this.options.editor.styleSchema
+                  this.options.editor.schema.styleSchema
                 );
               } else {
                 throw new UnreachableCaseError(block.content.type);
diff --git a/packages/core/src/schema/blocks/types.ts b/packages/core/src/schema/blocks/types.ts
index 6872e48e39..745ca3c436 100644
--- a/packages/core/src/schema/blocks/types.ts
+++ b/packages/core/src/schema/blocks/types.ts
@@ -1,14 +1,14 @@
 /** Define the main block types **/
-import { Extension, Node } from "@tiptap/core";
+import type { Extension, Node } from "@tiptap/core";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import {
+import type {
   InlineContent,
   InlineContentSchema,
   PartialInlineContent,
 } from "../inlineContent/types";
-import { PropSchema, Props } from "../propTypes";
-import { StyleSchema } from "../styles/types";
+import type { PropSchema, Props } from "../propTypes";
+import type { StyleSchema } from "../styles/types";
 
 export type BlockNoteDOMElement =
   | "editor"
diff --git a/packages/core/src/schema/inlineContent/createSpec.ts b/packages/core/src/schema/inlineContent/createSpec.ts
index 693fdc7b9e..2c49475a45 100644
--- a/packages/core/src/schema/inlineContent/createSpec.ts
+++ b/packages/core/src/schema/inlineContent/createSpec.ts
@@ -98,8 +98,8 @@ export function createInlineContentSpec<
       const output = inlineContentImplementation.render(
         nodeToCustomInlineContent(
           node,
-          editor.inlineContentSchema,
-          editor.styleSchema
+          editor.schema.inlineContentSchema,
+          editor.schema.styleSchema
         ) as any as InlineContentFromConfig<T, S> // TODO: fix cast
       );
 
diff --git a/packages/core/src/util/typescript.ts b/packages/core/src/util/typescript.ts
index 93b94f8b51..edda7588e9 100644
--- a/packages/core/src/util/typescript.ts
+++ b/packages/core/src/util/typescript.ts
@@ -1,5 +1,8 @@
 export class UnreachableCaseError extends Error {
-    constructor(val: never) {
-        super(`Unreachable case: ${val}`);
-    }
-}
\ No newline at end of file
+  constructor(val: never) {
+    super(`Unreachable case: ${val}`);
+  }
+}
+
+// TODO: change for built-in version of typescript 5.4 after upgrade
+export type NoInfer<T> = [T][T extends any ? 0 : never];
diff --git a/packages/dev-scripts/examples/genDocs.ts b/packages/dev-scripts/examples/genDocs.ts
index dbdf41db9c..4f31ff41c5 100644
--- a/packages/dev-scripts/examples/genDocs.ts
+++ b/packages/dev-scripts/examples/genDocs.ts
@@ -43,17 +43,19 @@ ${file.code}
   </Tabs>
 </ExampleBlock>`;
 
+const COMPONENT_DIR = path.resolve(
+  dir,
+  "../../../docs/components/example/generated/"
+);
+
+const EXAMPLES_PAGES_DIR = path.resolve(dir, "../../../docs/pages/examples/");
+
 /**
  * Generates the <ExampleBlock> component that has all the source code of the example
  * This block can be used both in the /docs and in the /example page
  */
 async function generateCodeForExample(project: Project) {
-  const target = path.resolve(
-    dir,
-    "../../../docs/components/example/generated/mdx/" +
-      project.fullSlug +
-      ".mdx"
-  );
+  const target = path.join(COMPONENT_DIR, "mdx", project.fullSlug + ".mdx");
 
   const files = getProjectFiles(project);
   const filtered = Object.fromEntries(
@@ -82,10 +84,7 @@ ${readme}
  * Consists of the contents of the readme + the interactive example
  */
 async function generatePageForExample(project: Project) {
-  const target = path.resolve(
-    dir,
-    "../../../docs/pages/examples/" + project.fullSlug + ".mdx"
-  );
+  const target = path.join(EXAMPLES_PAGES_DIR, project.fullSlug + ".mdx");
 
   const files = getProjectFiles(project);
 
@@ -102,23 +101,21 @@ async function generateMetaForExampleGroup(group: {
   slug: string;
   projects: Project[];
 }) {
-  if (
-    !fs.existsSync(
-      path.resolve(dir, "../../../docs/pages/examples/" + group.slug)
-    )
-  ) {
-    fs.mkdirSync(
-      path.resolve(dir, "../../../docs/pages/examples/" + group.slug)
-    );
+  if (!fs.existsSync(path.join(EXAMPLES_PAGES_DIR, group.slug))) {
+    fs.mkdirSync(path.join(EXAMPLES_PAGES_DIR, group.slug));
   }
 
-  const target = path.resolve(
-    dir,
-    "../../../docs/pages/examples/" + group.slug + "/_meta.json"
-  );
+  const target = path.join(EXAMPLES_PAGES_DIR, group.slug, "_meta.json");
 
   const meta = Object.fromEntries(
-    group.projects.map((project) => [project.projectSlug, ""])
+    group.projects.map((project) => [
+      project.projectSlug,
+      {
+        ...(project.config.shortTitle
+          ? { title: project.config.shortTitle }
+          : {}),
+      },
+    ])
   );
 
   const code = JSON.stringify(meta, undefined, 2);
@@ -133,17 +130,19 @@ import dynamic from "next/dynamic";
   
 export const examples = {
 ${projects
-  .map(
-    (p) => `  "${p.fullSlug}": {
+  .map((p) => {
+    const importPath = `../../../../${p.pathFromRoot}/App`;
+
+    return `  "${p.fullSlug}": {
     // App: () => <div>hello</div>,
-    App: dynamic(() => import("../../../../${p.pathFromRoot}/App"), {
+    App: dynamic(() => import(${JSON.stringify(importPath)}), {
       ssr: false,
     }),
     ExampleWithCode: dynamic(() => import("./mdx/${p.fullSlug}.mdx"), {
       //ssr: false,
     }),
-  },`
-  )
+  },`;
+  })
   .join("\n")}  
 };`;
 
@@ -151,10 +150,7 @@ ${projects
  * Generate the file with all the dynamic imports for examples (exampleComponents.gen.tsx)
  */
 async function generateExampleComponents(projects: Project[]) {
-  const target = path.resolve(
-    dir,
-    "../../../docs/components/example/generated/exampleComponents.gen.tsx"
-  );
+  const target = path.join(COMPONENT_DIR, "exampleComponents.gen.tsx");
 
   const code = templateExampleComponents(projects);
 
@@ -165,10 +161,7 @@ async function generateExampleComponents(projects: Project[]) {
  * generates exampleList.gen.ts file with data about all the examples
  */
 async function generateExampleList(projects: Project[]) {
-  const target = path.resolve(
-    dir,
-    "../../../docs/components/example/generated/exampleList.gen.ts"
-  );
+  const target = path.join(COMPONENT_DIR, "exampleList.gen.ts");
 
   const groups = groupProjects(projects);
 
@@ -190,6 +183,19 @@ async function generateExampleList(projects: Project[]) {
   fs.writeFileSync(target, code);
 }
 
+// clean old files / dirs
+fs.rmSync(COMPONENT_DIR, { recursive: true, force: true });
+
+fs.readdirSync(EXAMPLES_PAGES_DIR, { withFileTypes: true }).forEach((file) => {
+  if (file.isDirectory()) {
+    fs.rmSync(path.join(EXAMPLES_PAGES_DIR, file.name), {
+      recursive: true,
+      force: true,
+    });
+  }
+});
+
+// generate new files
 const projects = getExampleProjects(); // TODO: .filter((p) => p.config?.docs === true);
 const groups = groupProjects(projects);
 
diff --git a/packages/dev-scripts/examples/template-react/tsconfig.json.template.tsx.bak b/packages/dev-scripts/examples/template-react/tsconfig.json.template.tsx.bak
new file mode 100644
index 0000000000..8135220dfd
--- /dev/null
+++ b/packages/dev-scripts/examples/template-react/tsconfig.json.template.tsx.bak
@@ -0,0 +1,38 @@
+import type { Project } from "../util";
+
+const template = (project: Project) => ({
+  __comment: "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  compilerOptions: {
+    target: "ESNext",
+    useDefineForClassFields: true,
+    lib: ["DOM", "DOM.Iterable", "ESNext"],
+    allowJs: false,
+    skipLibCheck: true,
+    esModuleInterop: false,
+    allowSyntheticDefaultImports: true,
+    strict: true,
+    forceConsistentCasingInFileNames: true,
+    module: "ESNext",
+    moduleResolution: "Node",
+    resolveJsonModule: true,
+    isolatedModules: true,
+    noEmit: false,
+    jsx: "react-jsx",
+    composite: true,
+    outDir: "dist",
+    declarationDir: "types",
+    declaration: true,
+    declarationMap: true,
+  },
+  include: ["."],
+  references: [
+    {
+      path: "../../../packages/core/",
+    },
+    {
+      path: "../../../packages/react/",
+    },
+  ],
+});
+
+export default template;
diff --git a/packages/dev-scripts/examples/util.ts b/packages/dev-scripts/examples/util.ts
index 28231ab04a..b2e7e503e7 100644
--- a/packages/dev-scripts/examples/util.ts
+++ b/packages/dev-scripts/examples/util.ts
@@ -39,6 +39,7 @@ export type Project = {
     docs: boolean;
     dependencies?: any;
     devDependencies?: any;
+    shortTitle?: string;
     author: string;
   };
 };
diff --git a/packages/react/src/components-shared/UiComponentTypes.ts b/packages/react/src/components-shared/UiComponentTypes.ts
deleted file mode 100644
index cc2b299455..0000000000
--- a/packages/react/src/components-shared/UiComponentTypes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { BlockNoteEditor } from "@blocknote/core";
-import { CSSProperties } from "react";
-
-export type UiComponentData<
-  UiElementData,
-  UiElementPluginName extends keyof BlockNoteEditor<any, any, any>
-> = UiElementData &
-  Omit<
-    BlockNoteEditor<any, any, any>[UiElementPluginName],
-    "plugin" | "on" | "onPositionUpdate" | "onDataUpdate" | "off"
-  >;
-
-export type UiComponentPosition = {
-  isMounted: boolean;
-  ref: (node: HTMLElement | null) => void;
-  style: CSSProperties;
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
deleted file mode 100644
index bf2f52efb2..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { Menu } from "@mantine/core";
-import { useCallback, useMemo, useState } from "react";
-
-import { ColorIcon } from "../../../components-shared/ColorPicker/ColorIcon";
-import { ColorPicker } from "../../../components-shared/ColorPicker/ColorPicker";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange";
-import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-
-export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
-
-  const [currentTextColor, setCurrentTextColor] = useState<string>(
-    props.editor.getActiveStyles().textColor || "default"
-  );
-  const [currentBackgroundColor, setCurrentBackgroundColor] = useState<string>(
-    props.editor.getActiveStyles().backgroundColor || "default"
-  );
-
-  useEditorContentOrSelectionChange(() => {
-    setCurrentTextColor(props.editor.getActiveStyles().textColor || "default");
-    setCurrentBackgroundColor(
-      props.editor.getActiveStyles().backgroundColor || "default"
-    );
-  }, props.editor);
-
-  const { ref, updateMaxHeight } = usePreventMenuOverflow();
-
-  const setTextColor = useCallback(
-    (color: string) => {
-      props.editor.focus();
-      color === "default"
-        ? props.editor.removeStyles({ textColor: color })
-        : props.editor.addStyles({ textColor: color });
-    },
-    [props.editor]
-  );
-
-  const setBackgroundColor = useCallback(
-    (color: string) => {
-      props.editor.focus();
-      color === "default"
-        ? props.editor.removeStyles({ backgroundColor: color })
-        : props.editor.addStyles({ backgroundColor: color });
-    },
-    [props.editor]
-  );
-
-  const show = useMemo(() => {
-    for (const block of selectedBlocks) {
-      if (block.content !== undefined) {
-        return true;
-      }
-    }
-
-    return false;
-  }, [selectedBlocks]);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <Menu withinPortal={false} onOpen={updateMaxHeight}>
-      <Menu.Target>
-        <ToolbarButton
-          mainTooltip={"Colors"}
-          icon={() => (
-            <ColorIcon
-              textColor={currentTextColor}
-              backgroundColor={currentBackgroundColor}
-              size={20}
-            />
-          )}
-        />
-      </Menu.Target>
-      <div ref={ref}>
-        <Menu.Dropdown>
-          <ColorPicker
-            text={{
-              color: currentTextColor,
-              setColor: setTextColor,
-            }}
-            background={{
-              color: currentBackgroundColor,
-              setColor: setBackgroundColor,
-            }}
-          />
-        </Menu.Dropdown>
-      </div>
-    </Menu>
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
deleted file mode 100644
index b3e29c5ba8..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { useCallback, useMemo, useState } from "react";
-import { RiLink } from "react-icons/ri";
-
-import { formatKeyboardShortcut } from "@blocknote/core";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdownButton } from "../../../components-shared/Toolbar/ToolbarInputDropdownButton";
-import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-import { EditHyperlinkMenu } from "../../HyperlinkToolbar/EditHyperlinkMenu/components/EditHyperlinkMenu";
-
-export const CreateLinkButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
-
-  const [url, setUrl] = useState<string>(
-    props.editor.getSelectedLinkUrl() || ""
-  );
-  const [text, setText] = useState<string>(props.editor.getSelectedText());
-
-  useEditorContentOrSelectionChange(() => {
-    setText(props.editor.getSelectedText() || "");
-    setUrl(props.editor.getSelectedLinkUrl() || "");
-  }, props.editor);
-
-  const update = useCallback(
-    (url: string, text: string) => {
-      props.editor.createLink(url, text);
-      props.editor.focus();
-    },
-    [props.editor]
-  );
-
-  const show = useMemo(() => {
-    for (const block of selectedBlocks) {
-      if (block.content === undefined) {
-        return false;
-      }
-    }
-
-    return true;
-  }, [selectedBlocks]);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <ToolbarInputDropdownButton
-      target={
-        <ToolbarButton
-          mainTooltip={"Create Link"}
-          secondaryTooltip={formatKeyboardShortcut("Mod+K")}
-          icon={RiLink}
-        />
-      }
-      dropdown={<EditHyperlinkMenu url={url} text={text} update={update} />}
-    />
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx
deleted file mode 100644
index bb114abcc1..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ImageCaptionButton.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { BlockNoteEditor, BlockSchema, PartialBlock } from "@blocknote/core";
-import {
-  ChangeEvent,
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { RiText } from "react-icons/ri";
-
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdown } from "../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownButton } from "../../../components-shared/Toolbar/ToolbarInputDropdownButton";
-import { ToolbarInputDropdownItem } from "../../../components-shared/Toolbar/ToolbarInputDropdownItem";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-
-export const ImageCaptionButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema, any, any>;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
-
-  const show = useMemo(
-    () =>
-      // Checks if only one block is selected.
-      selectedBlocks.length === 1 &&
-      // Checks if the selected block is an image.
-      selectedBlocks[0].type === "image" &&
-      // Checks if the block has a `caption` prop which can take any string
-      // value.
-      "caption" in props.editor.blockSchema["image"].propSchema &&
-      typeof props.editor.blockSchema["image"].propSchema.caption.default ===
-        "string" &&
-      props.editor.blockSchema["image"].propSchema.caption.values ===
-        undefined &&
-      // Checks if the block has a `url` prop which can take any string value.
-      "url" in props.editor.blockSchema["image"].propSchema &&
-      typeof props.editor.blockSchema["image"].propSchema.url.default ===
-        "string" &&
-      props.editor.blockSchema["image"].propSchema.url.values === undefined &&
-      // Checks if the `url` prop is not set to an empty string.
-      selectedBlocks[0].props.url !== "",
-    [props.editor.blockSchema, selectedBlocks]
-  );
-
-  const [currentCaption, setCurrentCaption] = useState<string>(
-    show ? (selectedBlocks[0].props.caption as string) : ""
-  );
-
-  useEffect(
-    () =>
-      setCurrentCaption(
-        show ? (selectedBlocks[0].props.caption as string) : ""
-      ),
-    [selectedBlocks, show]
-  );
-
-  const handleEnter = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        props.editor.updateBlock(selectedBlocks[0], {
-          type: "image",
-          props: {
-            caption: currentCaption,
-          },
-        } as PartialBlock<BSchema, any, any>);
-      }
-    },
-    [currentCaption, props.editor, selectedBlocks]
-  );
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) =>
-      setCurrentCaption(event.currentTarget.value),
-    []
-  );
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <ToolbarInputDropdownButton
-      target={
-        <ToolbarButton
-          mainTooltip={"Edit Caption"}
-          icon={RiText}
-          isSelected={selectedBlocks[0].props.caption !== ""}
-        />
-      }
-      dropdown={
-        <ToolbarInputDropdown>
-          <ToolbarInputDropdownItem
-            type={"text"}
-            icon={RiText}
-            inputProps={{
-              autoFocus: true,
-              placeholder: "Edit Caption",
-              value: currentCaption,
-              onKeyDown: handleEnter,
-              onChange: handleChange,
-            }}
-          />
-        </ToolbarInputDropdown>
-      }
-    />
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
deleted file mode 100644
index 28abeafaa3..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { useCallback, useState } from "react";
-import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
-
-import { formatKeyboardShortcut } from "@blocknote/core";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange";
-
-export const NestBlockButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
-}) => {
-  const [canNestBlock, setCanNestBlock] = useState<boolean>(() =>
-    props.editor.canNestBlock()
-  );
-
-  useEditorContentOrSelectionChange(() => {
-    props.editor.canNestBlock();
-    setCanNestBlock(props.editor.canNestBlock());
-  }, props.editor);
-
-  const nestBlock = useCallback(() => {
-    props.editor.focus();
-    props.editor.nestBlock();
-  }, [props.editor]);
-
-  return (
-    <ToolbarButton
-      onClick={nestBlock}
-      isDisabled={!canNestBlock}
-      mainTooltip="Nest Block"
-      secondaryTooltip={formatKeyboardShortcut("Tab")}
-      icon={RiIndentIncrease}
-    />
-  );
-};
-
-export const UnnestBlockButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
-}) => {
-  const [canUnnestBlock, setCanUnnestBlock] = useState<boolean>(() =>
-    props.editor.canUnnestBlock()
-  );
-
-  useEditorContentOrSelectionChange(() => {
-    setCanUnnestBlock(props.editor.canUnnestBlock());
-  }, props.editor);
-
-  const unnestBlock = useCallback(() => {
-    props.editor.focus();
-    props.editor.unnestBlock();
-  }, [props]);
-
-  return (
-    <ToolbarButton
-      onClick={unnestBlock}
-      isDisabled={!canUnnestBlock}
-      mainTooltip="Unnest Block"
-      secondaryTooltip={formatKeyboardShortcut("Shift+Tab")}
-      icon={RiIndentDecrease}
-    />
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx
deleted file mode 100644
index 6a3df0e517..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ReplaceImageButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { Popover } from "@mantine/core";
-import { useEffect, useState } from "react";
-import { RiImageEditFill } from "react-icons/ri";
-
-import { DefaultImageToolbar } from "../../ImageToolbar/DefaultImageToolbar";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-
-export const ReplaceImageButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsOpen(false);
-  }, [selectedBlocks]);
-
-  const show =
-    // Checks if only one block is selected.
-    selectedBlocks.length === 1 &&
-    // Checks if the selected block is an image.
-    selectedBlocks[0].type === "image";
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <Popover withinPortal={false} opened={isOpen} position={"bottom"}>
-      <Popover.Target>
-        <ToolbarButton
-          onClick={() => setIsOpen(!isOpen)}
-          isSelected={isOpen}
-          mainTooltip={"Replace Image"}
-          icon={RiImageEditFill}
-        />
-      </Popover.Target>
-      <Popover.Dropdown>
-        <DefaultImageToolbar editor={props.editor} block={selectedBlocks[0]} />
-      </Popover.Dropdown>
-    </Popover>
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ToggledStyleButton.tsx
deleted file mode 100644
index 8c537844e0..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ToggledStyleButton.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  BlockNoteEditor,
-  BlockSchema,
-  formatKeyboardShortcut,
-  InlineContentSchema,
-  StyleSchema,
-} from "@blocknote/core";
-import { useMemo, useState } from "react";
-import {
-  RiBold,
-  RiCodeFill,
-  RiItalic,
-  RiStrikethrough,
-  RiUnderline,
-} from "react-icons/ri";
-
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-
-const shortcuts = {
-  bold: "Mod+B",
-  italic: "Mod+I",
-  underline: "Mod+U",
-  strike: "Mod+Shift+X",
-  code: "",
-};
-
-const icons = {
-  bold: RiBold,
-  italic: RiItalic,
-  underline: RiUnderline,
-  strike: RiStrikethrough,
-  code: RiCodeFill,
-};
-
-export const ToggledStyleButton = <
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
->(props: {
-  editor: BlockNoteEditor<BSchema, I, S>;
-  toggledStyle: keyof typeof shortcuts;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
-
-  const [active, setActive] = useState<boolean>(
-    props.toggledStyle in props.editor.getActiveStyles()
-  );
-
-  useEditorContentOrSelectionChange(() => {
-    setActive(props.toggledStyle in props.editor.getActiveStyles());
-  }, props.editor);
-
-  const toggleStyle = (style: typeof props.toggledStyle) => {
-    props.editor.focus();
-    if (props.editor.styleSchema[style].propSchema !== "boolean") {
-      throw new Error("can only toggle boolean styles");
-    }
-    props.editor.toggleStyles({ [style]: true } as any);
-  };
-
-  const show = useMemo(() => {
-    return !!selectedBlocks.find((block) => block.content !== undefined);
-  }, [selectedBlocks]);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <ToolbarButton
-      onClick={() => toggleStyle(props.toggledStyle)}
-      isSelected={active}
-      mainTooltip={
-        props.toggledStyle.slice(0, 1).toUpperCase() +
-        props.toggledStyle.slice(1)
-      }
-      secondaryTooltip={formatKeyboardShortcut(shortcuts[props.toggledStyle])}
-      icon={icons[props.toggledStyle]}
-    />
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultFormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/DefaultFormattingToolbar.tsx
deleted file mode 100644
index 794e14830d..0000000000
--- a/packages/react/src/components/FormattingToolbar/DefaultFormattingToolbar.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  BlockNoteEditor,
-  BlockSchema,
-  DefaultBlockSchema,
-} from "@blocknote/core";
-
-import { Toolbar } from "../../components-shared/Toolbar/Toolbar";
-import {
-  BlockTypeDropdown,
-  BlockTypeDropdownItem,
-} from "./DefaultDropdowns/BlockTypeDropdown";
-import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
-import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
-import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton";
-import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
-import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton";
-import {
-  NestBlockButton,
-  UnnestBlockButton,
-} from "./DefaultButtons/NestBlockButtons";
-import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
-
-export type FormattingToolbarProps<BSchema extends BlockSchema> = {
-  editor: BlockNoteEditor<BSchema, any, any>;
-};
-
-export const DefaultFormattingToolbar = <
-  BSchema extends BlockSchema = DefaultBlockSchema
->(
-  props: FormattingToolbarProps<BSchema> & {
-    blockTypeDropdownItems?: BlockTypeDropdownItem[];
-  }
-) => {
-  return (
-    <Toolbar>
-      <BlockTypeDropdown {...props} items={props.blockTypeDropdownItems} />
-
-      <ImageCaptionButton editor={props.editor} />
-      <ReplaceImageButton editor={props.editor} />
-
-      <ToggledStyleButton editor={props.editor} toggledStyle={"bold"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"italic"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"underline"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"strike"} />
-
-      <TextAlignButton editor={props.editor as any} textAlignment={"left"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"center"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"right"} />
-
-      <ColorStyleButton editor={props.editor} />
-
-      <NestBlockButton editor={props.editor} />
-      <UnnestBlockButton editor={props.editor} />
-
-      <CreateLinkButton editor={props.editor} />
-    </Toolbar>
-  );
-};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultPositionedFormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
similarity index 69%
rename from packages/react/src/components/FormattingToolbar/DefaultPositionedFormattingToolbar.tsx
rename to packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
index 1c855daa14..839903c172 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultPositionedFormattingToolbar.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -1,19 +1,18 @@
 import {
-  BlockNoteEditor,
   BlockSchema,
-  DefaultBlockSchema,
   DefaultProps,
+  InlineContentSchema,
+  StyleSchema,
 } from "@blocknote/core";
 import { flip, offset } from "@floating-ui/react";
 import { FC, useState } from "react";
 
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useEditorContentOrSelectionChange } from "../../hooks/useEditorContentOrSelectionChange";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
 import { useUIPluginState } from "../../hooks/useUIPluginState";
-import {
-  DefaultFormattingToolbar,
-  FormattingToolbarProps,
-} from "./DefaultFormattingToolbar";
+import { FormattingToolbarProps } from "./FormattingToolbarProps";
+import { FormattingToolbar } from "./mantine/FormattingToolbar";
 
 const textAlignmentToPlacement = (
   textAlignment: DefaultProps["textAlignment"]
@@ -30,15 +29,18 @@ const textAlignmentToPlacement = (
   }
 };
 
-export const DefaultPositionedFormattingToolbar = <
-  BSchema extends BlockSchema = DefaultBlockSchema
->(props: {
-  editor: BlockNoteEditor<BSchema, any, any>;
-  formattingToolbar?: FC<FormattingToolbarProps<BSchema>>;
+export const FormattingToolbarController = (props: {
+  formattingToolbar?: FC<FormattingToolbarProps>;
 }) => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
   const [placement, setPlacement] = useState<"top-start" | "top" | "top-end">(
     () => {
-      const block = props.editor.getTextCursorPosition().block;
+      const block = editor.getTextCursorPosition().block;
 
       if (!("textAlignment" in block.props)) {
         return "top-start";
@@ -51,7 +53,7 @@ export const DefaultPositionedFormattingToolbar = <
   );
 
   useEditorContentOrSelectionChange(() => {
-    const block = props.editor.getTextCursorPosition().block;
+    const block = editor.getTextCursorPosition().block;
 
     if (!("textAlignment" in block.props)) {
       setPlacement("top-start");
@@ -62,10 +64,10 @@ export const DefaultPositionedFormattingToolbar = <
         )
       );
     }
-  }, props.editor);
+  }, editor);
 
   const state = useUIPluginState(
-    props.editor.formattingToolbar.onUpdate.bind(props.editor.formattingToolbar)
+    editor.formattingToolbar.onUpdate.bind(editor.formattingToolbar)
   );
   const { isMounted, ref, style } = useUIElementPositioning(
     state?.show || false,
@@ -81,11 +83,11 @@ export const DefaultPositionedFormattingToolbar = <
     return null;
   }
 
-  const FormattingToolbar = props.formattingToolbar || DefaultFormattingToolbar;
+  const Component = props.formattingToolbar || FormattingToolbar;
 
   return (
     <div ref={ref} style={style}>
-      <FormattingToolbar editor={props.editor} />
+      <Component />
     </div>
   );
 };
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
new file mode 100644
index 0000000000..158ac4ec32
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
@@ -0,0 +1,5 @@
+import { BlockTypeDropdownItem } from "./mantine/DefaultDropdowns/BlockTypeDropdown";
+
+export type FormattingToolbarProps = {
+  blockTypeDropdownItems?: BlockTypeDropdownItem[];
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
new file mode 100644
index 0000000000..1f5d58bd93
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
@@ -0,0 +1,123 @@
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  formatKeyboardShortcut,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { useMemo, useState } from "react";
+import { IconType } from "react-icons";
+import {
+  RiBold,
+  RiCodeFill,
+  RiItalic,
+  RiStrikethrough,
+  RiUnderline,
+} from "react-icons/ri";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+
+type BasicTextStyle = "bold" | "italic" | "underline" | "strike" | "code";
+
+const icons = {
+  bold: RiBold,
+  italic: RiItalic,
+  underline: RiUnderline,
+  strike: RiStrikethrough,
+  code: RiCodeFill,
+} satisfies Record<BasicTextStyle, IconType>;
+
+const shortcuts = {
+  bold: "Mod+B",
+  italic: "Mod+I",
+  underline: "Mod+U",
+  strike: "Mod+Shift+X",
+  code: "",
+} satisfies Record<BasicTextStyle, string>;
+
+function checkBasicTextStyleInSchema<Style extends BasicTextStyle>(
+  style: Style,
+  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>
+): editor is BlockNoteEditor<
+  BlockSchema,
+  InlineContentSchema,
+  {
+    [k in Style]: {
+      type: k;
+      propSchema: "boolean";
+    };
+  }
+> {
+  return (
+    style in editor.schema.styleSchema &&
+    editor.schema.styleSchema[style].type === style &&
+    editor.schema.styleSchema[style].propSchema === "boolean"
+  );
+}
+
+export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
+  basicTextStyle: Style;
+}) => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const basicTextStyleInSchema = checkBasicTextStyleInSchema(
+    props.basicTextStyle,
+    editor
+  );
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const [active, setActive] = useState<boolean>(
+    props.basicTextStyle in editor.getActiveStyles()
+  );
+
+  useEditorContentOrSelectionChange(() => {
+    if (basicTextStyleInSchema) {
+      setActive(props.basicTextStyle in editor.getActiveStyles());
+    }
+  }, editor);
+
+  const toggleStyle = (style: typeof props.basicTextStyle) => {
+    if (!basicTextStyleInSchema) {
+      return;
+    }
+
+    editor.focus();
+    if (editor.schema.styleSchema[style].propSchema !== "boolean") {
+      throw new Error("can only toggle boolean styles");
+    }
+    editor.toggleStyles({ [style]: true } as any);
+  };
+
+  const show = useMemo(() => {
+    if (!basicTextStyleInSchema) {
+      return false;
+    }
+    // Also don't show when none of the selected blocks have text content
+    return !!selectedBlocks.find((block) => block.content !== undefined);
+  }, [basicTextStyleInSchema, selectedBlocks]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <ToolbarButton
+      onClick={() => toggleStyle(props.basicTextStyle)}
+      isSelected={active}
+      mainTooltip={
+        props.basicTextStyle.slice(0, 1).toUpperCase() +
+        props.basicTextStyle.slice(1)
+      }
+      secondaryTooltip={formatKeyboardShortcut(shortcuts[props.basicTextStyle])}
+      icon={icons[props.basicTextStyle]}
+    />
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
new file mode 100644
index 0000000000..e3be88f467
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
@@ -0,0 +1,169 @@
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { Menu } from "@mantine/core";
+import { useCallback, useMemo, useState } from "react";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
+import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ColorIcon } from "../../../mantine-shared/ColorPicker/ColorIcon";
+import { ColorPicker } from "../../../mantine-shared/ColorPicker/ColorPicker";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+
+function checkColorInSchema<Color extends "text" | "background">(
+  color: Color,
+  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>
+): editor is BlockNoteEditor<
+  BlockSchema,
+  InlineContentSchema,
+  Color extends "text"
+    ? {
+        textColor: {
+          type: "textColor";
+          propSchema: "string";
+        };
+      }
+    : {
+        backgroundColor: {
+          type: "backgroundColor";
+          propSchema: "string";
+        };
+      }
+> {
+  return (
+    `${color}Color` in editor.schema.styleSchema &&
+    editor.schema.styleSchema[`${color}Color`].type === `${color}Color` &&
+    editor.schema.styleSchema[`${color}Color`].propSchema === "string"
+  );
+}
+
+export const ColorStyleButton = () => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const textColorInSchema = checkColorInSchema("text", editor);
+  const backgroundColorInSchema = checkColorInSchema("background", editor);
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const [currentTextColor, setCurrentTextColor] = useState<string>(
+    textColorInSchema
+      ? editor.getActiveStyles().textColor || "default"
+      : "default"
+  );
+  const [currentBackgroundColor, setCurrentBackgroundColor] = useState<string>(
+    backgroundColorInSchema
+      ? editor.getActiveStyles().backgroundColor || "default"
+      : "default"
+  );
+
+  useEditorContentOrSelectionChange(() => {
+    if (textColorInSchema) {
+      setCurrentTextColor(editor.getActiveStyles().textColor || "default");
+    }
+    if (backgroundColorInSchema) {
+      setCurrentBackgroundColor(
+        editor.getActiveStyles().backgroundColor || "default"
+      );
+    }
+  }, editor);
+
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
+  const setTextColor = useCallback(
+    (color: string) => {
+      if (!textColorInSchema) {
+        throw Error(
+          "Tried to set text color, but style does not exist in editor schema."
+        );
+      }
+
+      editor.focus();
+      color === "default"
+        ? editor.removeStyles({ textColor: color })
+        : editor.addStyles({ textColor: color });
+    },
+    [editor, textColorInSchema]
+  );
+
+  const setBackgroundColor = useCallback(
+    (color: string) => {
+      if (!backgroundColorInSchema) {
+        throw Error(
+          "Tried to set background color, but style does not exist in editor schema."
+        );
+      }
+
+      editor.focus();
+      color === "default"
+        ? editor.removeStyles({ backgroundColor: color })
+        : editor.addStyles({ backgroundColor: color });
+    },
+    [backgroundColorInSchema, editor]
+  );
+
+  const show = useMemo(() => {
+    if (!textColorInSchema && !backgroundColorInSchema) {
+      return false;
+    }
+
+    for (const block of selectedBlocks) {
+      if (block.content !== undefined) {
+        return true;
+      }
+    }
+
+    return false;
+  }, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Menu withinPortal={false} onOpen={updateMaxHeight}>
+      <Menu.Target>
+        <ToolbarButton
+          mainTooltip={"Colors"}
+          icon={() => (
+            <ColorIcon
+              textColor={currentTextColor}
+              backgroundColor={currentBackgroundColor}
+              size={20}
+            />
+          )}
+        />
+      </Menu.Target>
+      <div ref={ref}>
+        <Menu.Dropdown>
+          <ColorPicker
+            text={
+              textColorInSchema
+                ? {
+                    color: currentTextColor,
+                    setColor: setTextColor,
+                  }
+                : undefined
+            }
+            background={
+              backgroundColorInSchema
+                ? {
+                    color: currentBackgroundColor,
+                    setColor: setBackgroundColor,
+                  }
+                : undefined
+            }
+          />
+        </Menu.Dropdown>
+      </div>
+    </Menu>
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
new file mode 100644
index 0000000000..9de18b94db
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
@@ -0,0 +1,70 @@
+import { useCallback, useMemo, useState } from "react";
+import { RiLink } from "react-icons/ri";
+
+import {
+  BlockSchema,
+  formatKeyboardShortcut,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { EditHyperlinkMenu } from "../../../HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
+
+// TODO: Make sure Link is in inline content schema
+export const CreateLinkButton = () => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const [url, setUrl] = useState<string>(editor.getSelectedLinkUrl() || "");
+  const [text, setText] = useState<string>(editor.getSelectedText());
+
+  useEditorContentOrSelectionChange(() => {
+    setText(editor.getSelectedText() || "");
+    setUrl(editor.getSelectedLinkUrl() || "");
+  }, editor);
+
+  const update = useCallback(
+    (url: string, text: string) => {
+      editor.createLink(url, text);
+      editor.focus();
+    },
+    [editor]
+  );
+
+  const show = useMemo(() => {
+    for (const block of selectedBlocks) {
+      if (block.content === undefined) {
+        return false;
+      }
+    }
+
+    return true;
+  }, [selectedBlocks]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <ToolbarInputDropdownButton
+      target={
+        <ToolbarButton
+          mainTooltip={"Create Link"}
+          secondaryTooltip={formatKeyboardShortcut("Mod+K")}
+          icon={RiLink}
+        />
+      }
+      dropdown={<EditHyperlinkMenu url={url} text={text} update={update} />}
+    />
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
new file mode 100644
index 0000000000..91811faff1
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
@@ -0,0 +1,107 @@
+import {
+  BlockSchema,
+  checkBlockIsDefaultType,
+  checkDefaultBlockTypeInSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import { RiText } from "react-icons/ri";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
+
+export const ImageCaptionButton = () => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const [currentEditingCaption, setCurrentEditingCaption] = useState<string>();
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const imageBlock = useMemo(() => {
+    // Checks if only one block is selected.
+    if (selectedBlocks.length !== 1) {
+      return undefined;
+    }
+
+    const block = selectedBlocks[0];
+
+    if (checkBlockIsDefaultType("image", block, editor)) {
+      return block;
+    }
+
+    return undefined;
+  }, [editor, selectedBlocks]);
+
+  const handleEnter = useCallback(
+    (event: KeyboardEvent) => {
+      if (
+        imageBlock &&
+        checkDefaultBlockTypeInSchema("image", editor) &&
+        event.key === "Enter"
+      ) {
+        event.preventDefault();
+        editor.updateBlock(imageBlock, {
+          type: "image",
+          props: {
+            caption: currentEditingCaption,
+          },
+        });
+      }
+    },
+    [currentEditingCaption, editor, imageBlock]
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      setCurrentEditingCaption(event.currentTarget.value),
+    []
+  );
+
+  if (!imageBlock) {
+    return null;
+  }
+
+  return (
+    <ToolbarInputDropdownButton
+      target={
+        <ToolbarButton
+          mainTooltip={"Edit Caption"}
+          icon={RiText}
+          isSelected={imageBlock.props.caption !== ""}
+        />
+      }
+      dropdown={
+        <ToolbarInputDropdown>
+          <ToolbarInputDropdownItem
+            type={"text"}
+            icon={RiText}
+            inputProps={{
+              // TODO: weird pattern of props passing?
+              value: currentEditingCaption,
+              autoFocus: true,
+              placeholder: "Edit Caption",
+              onKeyDown: handleEnter,
+              defaultValue: imageBlock.props.caption,
+              onChange: handleChange,
+            }}
+          />
+        </ToolbarInputDropdown>
+      }
+    />
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx
new file mode 100644
index 0000000000..9ca661fd40
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx
@@ -0,0 +1,71 @@
+import {
+  BlockSchema,
+  formatKeyboardShortcut,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { useCallback, useState } from "react";
+import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+
+export const NestBlockButton = () => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const [canNestBlock, setCanNestBlock] = useState<boolean>(() =>
+    editor.canNestBlock()
+  );
+
+  useEditorContentOrSelectionChange(() => {
+    editor.canNestBlock();
+    setCanNestBlock(editor.canNestBlock());
+  }, editor);
+
+  const nestBlock = useCallback(() => {
+    editor.focus();
+    editor.nestBlock();
+  }, [editor]);
+
+  return (
+    <ToolbarButton
+      onClick={nestBlock}
+      isDisabled={!canNestBlock}
+      mainTooltip="Nest Block"
+      secondaryTooltip={formatKeyboardShortcut("Tab")}
+      icon={RiIndentIncrease}
+    />
+  );
+};
+
+export const UnnestBlockButton = () => {
+  const editor = useBlockNoteEditor<any, any, any>();
+
+  const [canUnnestBlock, setCanUnnestBlock] = useState<boolean>(() =>
+    editor.canUnnestBlock()
+  );
+
+  useEditorContentOrSelectionChange(() => {
+    setCanUnnestBlock(editor.canUnnestBlock());
+  }, editor);
+
+  const unnestBlock = useCallback(() => {
+    editor.focus();
+    editor.unnestBlock();
+  }, [editor]);
+
+  return (
+    <ToolbarButton
+      onClick={unnestBlock}
+      isDisabled={!canUnnestBlock}
+      mainTooltip="Unnest Block"
+      secondaryTooltip={formatKeyboardShortcut("Shift+Tab")}
+      icon={RiIndentDecrease}
+    />
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
new file mode 100644
index 0000000000..d878532d87
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
@@ -0,0 +1,56 @@
+import {
+  BlockSchema,
+  checkBlockIsDefaultType,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { Popover } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { RiImageEditFill } from "react-icons/ri";
+
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ImageToolbar } from "../../../ImageToolbar/mantine/ImageToolbar";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+
+export const ReplaceImageButton = () => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [selectedBlocks]);
+
+  const block = selectedBlocks.length === 1 ? selectedBlocks[0] : undefined;
+
+  if (
+    block === undefined ||
+    block.type !== "image" ||
+    !checkBlockIsDefaultType("image", block, editor)
+  ) {
+    return null;
+  }
+
+  return (
+    <Popover withinPortal={false} opened={isOpen} position={"bottom"}>
+      <Popover.Target>
+        <ToolbarButton
+          onClick={() => setIsOpen(!isOpen)}
+          isSelected={isOpen}
+          mainTooltip={"Replace Image"}
+          icon={RiImageEditFill}
+        />
+      </Popover.Target>
+      <Popover.Dropdown>
+        <ImageToolbar block={block} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
similarity index 56%
rename from packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
rename to packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
index 9e6231c394..8c8fc711d3 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
@@ -1,11 +1,13 @@
 import {
-  BlockNoteEditor,
   BlockSchema,
+  checkBlockHasDefaultProp,
+  checkBlockTypeHasDefaultProp,
   DefaultProps,
-  PartialBlock,
+  InlineContentSchema,
+  StyleSchema,
 } from "@blocknote/core";
 import { useCallback, useMemo } from "react";
-import type { IconType } from "react-icons";
+import { IconType } from "react-icons";
 import {
   RiAlignCenter,
   RiAlignJustify,
@@ -13,8 +15,9 @@ import {
   RiAlignRight,
 } from "react-icons/ri";
 
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type TextAlignment = DefaultProps["textAlignment"];
 
@@ -25,33 +28,38 @@ const icons: Record<TextAlignment, IconType> = {
   justify: RiAlignJustify,
 };
 
-export const TextAlignButton = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema, any, any>;
-  textAlignment: TextAlignment;
-}) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
+export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const selectedBlocks = useSelectedBlocks(editor);
 
   const textAlignment = useMemo(() => {
     const block = selectedBlocks[0];
 
-    if ("textAlignment" in block.props) {
-      return block.props.textAlignment as TextAlignment;
+    if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
+      return block.props.textAlignment;
     }
 
     return;
-  }, [selectedBlocks]);
+  }, [editor, selectedBlocks]);
 
   const setTextAlignment = useCallback(
     (textAlignment: TextAlignment) => {
-      props.editor.focus();
+      editor.focus();
 
       for (const block of selectedBlocks) {
-        props.editor.updateBlock(block, {
-          props: { textAlignment: textAlignment },
-        } as PartialBlock<BSchema, any, any>);
+        if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
+          editor.updateBlock(block, {
+            props: { textAlignment: textAlignment },
+          });
+        }
       }
     },
-    [props.editor, selectedBlocks]
+    [editor, selectedBlocks]
   );
 
   const show = useMemo(() => {
diff --git a/packages/react/src/components/FormattingToolbar/DefaultDropdowns/BlockTypeDropdown.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
similarity index 65%
rename from packages/react/src/components/FormattingToolbar/DefaultDropdowns/BlockTypeDropdown.tsx
rename to packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
index f1e8b92fae..1218753798 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultDropdowns/BlockTypeDropdown.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
@@ -1,4 +1,9 @@
-import { Block, BlockNoteEditor, BlockSchema } from "@blocknote/core";
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
 import { useMemo, useState } from "react";
 import type { IconType } from "react-icons";
 import {
@@ -10,20 +15,24 @@ import {
   RiText,
 } from "react-icons/ri";
 
-import { ToolbarDropdown } from "../../../components-shared/Toolbar/ToolbarDropdown";
-import type { ToolbarDropdownItemProps } from "../../../components-shared/Toolbar/ToolbarDropdownItem";
-import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
+import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
+import { ToolbarDropdown } from "../../../mantine-shared/Toolbar/ToolbarDropdown";
+import { ToolbarDropdownItemProps } from "../../../mantine-shared/Toolbar/ToolbarDropdownItem";
 
 export type BlockTypeDropdownItem = {
   name: string;
   type: string;
   props?: Record<string, boolean | number | string>;
   icon: IconType;
-  isSelected: (block: Block<BlockSchema, any, any>) => boolean;
+  isSelected: (
+    block: Block<BlockSchema, InlineContentSchema, StyleSchema>
+  ) => boolean;
 };
 
-export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
+// TODO: Filtering from schema should be done here, not in component?
+export const blockTypeDropdownItems: BlockTypeDropdownItem[] = [
   {
     name: "Paragraph",
     type: "paragraph",
@@ -74,26 +83,29 @@ export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
   },
 ];
 
-export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema>;
+export const BlockTypeDropdown = (props: {
   items?: BlockTypeDropdownItem[];
 }) => {
-  const selectedBlocks = useSelectedBlocks(props.editor);
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
 
-  const [block, setBlock] = useState(
-    props.editor.getTextCursorPosition().block
-  );
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const [block, setBlock] = useState(editor.getTextCursorPosition().block);
 
   const filteredItems: BlockTypeDropdownItem[] = useMemo(() => {
-    return (props.items || defaultBlockTypeDropdownItems).filter((item) => {
+    return (props.items || blockTypeDropdownItems).filter((item) => {
       // Checks if block type exists in the schema
-      if (!(item.type in props.editor.blockSchema)) {
+      if (!(item.type in editor.schema.blockSchema)) {
         return false;
       }
 
       // Checks if props for the block type are valid
       for (const [prop, value] of Object.entries(item.props || {})) {
-        const propSchema = props.editor.blockSchema[item.type].propSchema;
+        const propSchema = editor.schema.blockSchema[item.type].propSchema;
 
         // Checks if the prop exists for the block type
         if (!(prop in propSchema)) {
@@ -111,7 +123,7 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
 
       return true;
     });
-  }, [props.editor, props.items]);
+  }, [editor, props.items]);
 
   const shouldShow: boolean = useMemo(
     () => filteredItems.find((item) => item.type === block.type) !== undefined,
@@ -120,10 +132,10 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
 
   const fullItems: ToolbarDropdownItemProps[] = useMemo(() => {
     const onClick = (item: BlockTypeDropdownItem) => {
-      props.editor.focus();
+      editor.focus();
 
       for (const block of selectedBlocks) {
-        props.editor.updateBlock(block, {
+        editor.updateBlock(block, {
           type: item.type as any,
           props: item.props as any,
         });
@@ -134,13 +146,13 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
       text: item.name,
       icon: item.icon,
       onClick: () => onClick(item),
-      isSelected: item.isSelected(block as Block<BlockSchema, any, any>),
+      isSelected: item.isSelected(block),
     }));
-  }, [block, filteredItems, props.editor, selectedBlocks]);
+  }, [block, filteredItems, editor, selectedBlocks]);
 
   useEditorContentOrSelectionChange(() => {
-    setBlock(props.editor.getTextCursorPosition().block);
-  }, props.editor);
+    setBlock(editor.getTextCursorPosition().block);
+  }, editor);
 
   if (!shouldShow) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
new file mode 100644
index 0000000000..ef5b6fea49
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
@@ -0,0 +1,66 @@
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
+import { FormattingToolbarProps } from "../FormattingToolbarProps";
+import { BasicTextStyleButton } from "./DefaultButtons/BasicTextStyleButton";
+import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton";
+import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
+import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
+import {
+  NestBlockButton,
+  UnnestBlockButton,
+} from "./DefaultButtons/NestBlockButtons";
+import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
+import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
+import {
+  BlockTypeDropdown,
+  BlockTypeDropdownItem,
+} from "./DefaultDropdowns/BlockTypeDropdown";
+
+export const getFormattingToolbarItems = (
+  blockTypeDropdownItems?: BlockTypeDropdownItem[]
+): JSX.Element[] => [
+  <BlockTypeDropdown
+    key={"blockTypeDropdown"}
+    items={blockTypeDropdownItems}
+  />,
+  <ImageCaptionButton key={"imageCaptionButton"} />,
+  <ReplaceImageButton key={"replaceImageButton"} />,
+  <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />,
+  <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />,
+  <BasicTextStyleButton
+    basicTextStyle={"underline"}
+    key={"underlineStyleButton"}
+  />,
+  <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />,
+  <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />,
+  <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />,
+  <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />,
+  <ColorStyleButton key={"colorStyleButton"} />,
+  <NestBlockButton key={"nestBlockButton"} />,
+  <UnnestBlockButton key={"unnestBlockButton"} />,
+  <CreateLinkButton key={"createLinkButton"} />,
+];
+
+// TODO: props.blockTypeDropdownItems should only be available if no children
+//  are passed
+/**
+ * By default, the FormattingToolbar component will render with default
+ * dropdowns/buttons. However, you can override the dropdowns/buttons to render
+ * by passing children. The children you pass should be:
+ *
+ * - Default dropdowns: Components found within the `/DefaultDropdowns` directory.
+ * - Default buttons: Components found within the `/DefaultButtons` directory.
+ * - Custom dropdowns: The `ToolbarDropdown` component in the
+ * `components/mantine-shared/Toolbar` directory.
+ * - Custom buttons: The `ToolbarButton` component in the
+ * `components/mantine-shared/Toolbar` directory.
+ */
+export const FormattingToolbar = (
+  props: FormattingToolbarProps & { children?: React.ReactNode }
+) => {
+  return (
+    <Toolbar>
+      {props.children ||
+        getFormattingToolbarItems(props.blockTypeDropdownItems)}
+    </Toolbar>
+  );
+};
diff --git a/packages/react/src/components/HyperlinkToolbar/DefaultPositionedHyperlinkToolbar.tsx b/packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarController.tsx
similarity index 60%
rename from packages/react/src/components/HyperlinkToolbar/DefaultPositionedHyperlinkToolbar.tsx
rename to packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarController.tsx
index b6b59a7db4..3433267745 100644
--- a/packages/react/src/components/HyperlinkToolbar/DefaultPositionedHyperlinkToolbar.tsx
+++ b/packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarController.tsx
@@ -1,5 +1,4 @@
 import {
-  BlockNoteEditor,
   BlockSchema,
   DefaultBlockSchema,
   DefaultInlineContentSchema,
@@ -10,30 +9,30 @@ import {
 import { flip, offset } from "@floating-ui/react";
 import { FC } from "react";
 
-import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
-import {
-  DefaultHyperlinkToolbar,
-  HyperlinkToolbarProps,
-} from "./DefaultHyperlinkToolbar";
+import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { HyperlinkToolbarProps } from "./HyperlinkToolbarProps";
+import { HyperlinkToolbar } from "./mantine/HyperlinkToolbar";
 
-export const DefaultPositionedHyperlinkToolbar = <
+export const HyperlinkToolbarController = <
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
-  editor: BlockNoteEditor<BSchema, I, S>;
   hyperlinkToolbar?: FC<HyperlinkToolbarProps>;
 }) => {
+  const editor = useBlockNoteEditor<BSchema, I, S>();
+
   const callbacks = {
-    deleteHyperlink: props.editor.hyperlinkToolbar.deleteHyperlink,
-    editHyperlink: props.editor.hyperlinkToolbar.editHyperlink,
-    startHideTimer: props.editor.hyperlinkToolbar.startHideTimer,
-    stopHideTimer: props.editor.hyperlinkToolbar.stopHideTimer,
+    deleteHyperlink: editor.hyperlinkToolbar.deleteHyperlink,
+    editHyperlink: editor.hyperlinkToolbar.editHyperlink,
+    startHideTimer: editor.hyperlinkToolbar.startHideTimer,
+    stopHideTimer: editor.hyperlinkToolbar.stopHideTimer,
   };
 
   const state = useUIPluginState(
-    props.editor.hyperlinkToolbar.onUpdate.bind(props.editor.hyperlinkToolbar)
+    editor.hyperlinkToolbar.onUpdate.bind(editor.hyperlinkToolbar)
   );
   const { isMounted, ref, style } = useUIElementPositioning(
     state?.show || false,
@@ -51,11 +50,11 @@ export const DefaultPositionedHyperlinkToolbar = <
 
   const { show, referencePos, ...data } = state;
 
-  const HyperlinkToolbar = props.hyperlinkToolbar || DefaultHyperlinkToolbar;
+  const Component = props.hyperlinkToolbar || HyperlinkToolbar;
 
   return (
     <div ref={ref} style={style}>
-      <HyperlinkToolbar {...data} {...callbacks} />
+      <Component {...data} {...callbacks} />
     </div>
   );
 };
diff --git a/packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarProps.ts b/packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarProps.ts
new file mode 100644
index 0000000000..864b5dbd48
--- /dev/null
+++ b/packages/react/src/components/HyperlinkToolbar/HyperlinkToolbarProps.ts
@@ -0,0 +1,21 @@
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  HyperlinkToolbarState,
+  InlineContentSchema,
+  StyleSchema,
+  UiElementPosition,
+} from "@blocknote/core";
+
+export type HyperlinkToolbarProps = Omit<
+  HyperlinkToolbarState,
+  keyof UiElementPosition
+> &
+  Pick<
+    BlockNoteEditor<
+      BlockSchema,
+      InlineContentSchema,
+      StyleSchema
+    >["hyperlinkToolbar"],
+    "deleteHyperlink" | "editHyperlink" | "startHideTimer" | "stopHideTimer"
+  >;
\ No newline at end of file
diff --git a/packages/react/src/components/HyperlinkToolbar/EditHyperlinkMenu/components/EditHyperlinkMenu.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
similarity index 91%
rename from packages/react/src/components/HyperlinkToolbar/EditHyperlinkMenu/components/EditHyperlinkMenu.tsx
rename to packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
index 82ecb898dd..d5a71daff6 100644
--- a/packages/react/src/components/HyperlinkToolbar/EditHyperlinkMenu/components/EditHyperlinkMenu.tsx
+++ b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
@@ -8,8 +8,9 @@ import {
   useState,
 } from "react";
 import { RiLink, RiText } from "react-icons/ri";
-import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem";
+
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
 
 export type EditHyperlinkMenuProps = {
   url: string;
diff --git a/packages/react/src/components/HyperlinkToolbar/DefaultHyperlinkToolbar.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
similarity index 60%
rename from packages/react/src/components/HyperlinkToolbar/DefaultHyperlinkToolbar.tsx
rename to packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
index 1bbbc2334c..ba931b5d31 100644
--- a/packages/react/src/components/HyperlinkToolbar/DefaultHyperlinkToolbar.tsx
+++ b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
@@ -1,28 +1,32 @@
-import {
-  BlockNoteEditor,
-  HyperlinkToolbarState,
-  UiElementPosition,
-} from "@blocknote/core";
 import { useRef, useState } from "react";
 import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
 
-import { Toolbar } from "../../components-shared/Toolbar/Toolbar";
-import { ToolbarButton } from "../../components-shared/Toolbar/ToolbarButton";
-import { EditHyperlinkMenu } from "./EditHyperlinkMenu/components/EditHyperlinkMenu";
+import { HyperlinkToolbarProps } from "../HyperlinkToolbarProps";
+import { EditHyperlinkMenu } from "./EditHyperlinkMenu/EditHyperlinkMenu";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
+import { ToolbarButton } from "../../mantine-shared/Toolbar/ToolbarButton";
 
-export type HyperlinkToolbarProps = Omit<
-  HyperlinkToolbarState,
-  keyof UiElementPosition
-> &
-  Pick<
-    BlockNoteEditor<any, any, any>["hyperlinkToolbar"],
-    "deleteHyperlink" | "editHyperlink" | "startHideTimer" | "stopHideTimer"
-  >;
-
-export const DefaultHyperlinkToolbar = (props: HyperlinkToolbarProps) => {
+/**
+ * By default, the HyperlinkToolbar component will render with default buttons.
+ * However, you can override the dropdowns/buttons to render by passing
+ * children. The children you pass should be:
+ *
+ * TODO: Refactor and export default buttons
+ * - Custom dropdowns: The `ToolbarDropdown` component in the
+ * `components/mantine-shared/Toolbar` directory.
+ * - Custom buttons: The `ToolbarButton` component in the
+ * `components/mantine-shared/Toolbar` directory.
+ */
+export const HyperlinkToolbar = (
+  props: HyperlinkToolbarProps & { children?: React.ReactNode }
+) => {
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const editMenuRef = useRef<HTMLDivElement | null>(null);
 
+  if (props.children) {
+    return <Toolbar>{props.children}</Toolbar>;
+  }
+
   const {
     text,
     url,
diff --git a/packages/react/src/components/ImageToolbar/DefaultPositionedImageToolbar.tsx b/packages/react/src/components/ImageToolbar/DefaultPositionedImageToolbar.tsx
deleted file mode 100644
index 6fc7455138..0000000000
--- a/packages/react/src/components/ImageToolbar/DefaultPositionedImageToolbar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  BlockNoteEditor,
-  BlockSchema,
-  DefaultBlockSchema,
-} from "@blocknote/core";
-import { FC } from "react";
-import { flip, offset } from "@floating-ui/react";
-
-import { useUIPluginState } from "../../hooks/useUIPluginState";
-import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
-import { DefaultImageToolbar, ImageToolbarProps } from "./DefaultImageToolbar";
-
-export const DefaultPositionedImageToolbar = <
-  BSchema extends BlockSchema = DefaultBlockSchema
->(props: {
-  editor: BlockNoteEditor<BSchema, any, any>;
-  imageToolbar?: FC<ImageToolbarProps<BSchema>>;
-}) => {
-  const state = useUIPluginState(
-    props.editor.imageToolbar.onUpdate.bind(props.editor.imageToolbar)
-  );
-  const { isMounted, ref, style } = useUIElementPositioning(
-    state?.show || false,
-    state?.referencePos || null,
-    5000,
-    {
-      placement: "bottom",
-      middleware: [offset(10), flip()],
-    }
-  );
-
-  if (!isMounted || !state) {
-    return null;
-  }
-
-  const { show, referencePos, ...data } = state;
-
-  const ImageToolbar = props.imageToolbar || DefaultImageToolbar;
-
-  return (
-    <div ref={ref} style={style}>
-      <ImageToolbar editor={props.editor} {...data} />
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ImageToolbar/ImageToolbarController.tsx b/packages/react/src/components/ImageToolbar/ImageToolbarController.tsx
new file mode 100644
index 0000000000..67da6a8071
--- /dev/null
+++ b/packages/react/src/components/ImageToolbar/ImageToolbarController.tsx
@@ -0,0 +1,61 @@
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { flip, offset } from "@floating-ui/react";
+import { FC } from "react";
+
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
+import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
+import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { ImageToolbarProps } from "./ImageToolbarProps";
+import { ImageToolbar } from "./mantine/ImageToolbar";
+
+export const ImageToolbarController = <
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  imageToolbar?: FC<ImageToolbarProps<I, S>>;
+}) => {
+  const editor = useBlockNoteEditor<
+    { image: DefaultBlockSchema["image"] },
+    I,
+    S
+  >();
+
+  if (!editor.imageToolbar) {
+    throw new Error(
+      "ImageToolbarController can only be used when BlockNote editor schema contains image block"
+    );
+  }
+
+  const state = useUIPluginState(
+    editor.imageToolbar.onUpdate.bind(editor.imageToolbar)
+  );
+  const { isMounted, ref, style } = useUIElementPositioning(
+    state?.show || false,
+    state?.referencePos || null,
+    5000,
+    {
+      placement: "bottom",
+      middleware: [offset(10), flip()],
+    }
+  );
+
+  if (!isMounted || !state) {
+    return null;
+  }
+
+  const { show, referencePos, ...data } = state;
+
+  const Component = props.imageToolbar || ImageToolbar;
+
+  return (
+    <div ref={ref} style={style}>
+      <Component {...data} />
+    </div>
+  );
+};
diff --git a/packages/react/src/components/ImageToolbar/ImageToolbarProps.ts b/packages/react/src/components/ImageToolbar/ImageToolbarProps.ts
new file mode 100644
index 0000000000..3485227125
--- /dev/null
+++ b/packages/react/src/components/ImageToolbar/ImageToolbarProps.ts
@@ -0,0 +1,13 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  ImageToolbarState,
+  InlineContentSchema,
+  StyleSchema,
+  UiElementPosition,
+} from "@blocknote/core";
+
+export type ImageToolbarProps<
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+> = Omit<ImageToolbarState<I, S>, keyof UiElementPosition>;
\ No newline at end of file
diff --git a/packages/react/src/components/ImageToolbar/DefaultImageToolbar.tsx b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
similarity index 74%
rename from packages/react/src/components/ImageToolbar/DefaultImageToolbar.tsx
rename to packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
index b8444e5f7c..22a5f6c93a 100644
--- a/packages/react/src/components/ImageToolbar/DefaultImageToolbar.tsx
+++ b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
@@ -1,10 +1,9 @@
 import {
-  BlockNoteEditor,
-  BlockSchema,
   DefaultBlockSchema,
-  ImageToolbarState,
-  PartialBlock,
-  UiElementPosition,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
 } from "@blocknote/core";
 import {
   Button,
@@ -22,19 +21,24 @@ import {
   useState,
 } from "react";
 
-import { Toolbar } from "../../components-shared/Toolbar/Toolbar";
+import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
+import { ImageToolbarProps } from "../ImageToolbarProps";
 
-export type ImageToolbarProps<
-  BSchema extends BlockSchema = DefaultBlockSchema
-> = {
-  editor: BlockNoteEditor<BSchema, any>;
-} & Omit<ImageToolbarState<BSchema, any, any>, keyof UiElementPosition>;
-
-export const DefaultImageToolbar = <BSchema extends BlockSchema>(
-  props: ImageToolbarProps<BSchema>
+export const ImageToolbar = <
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: ImageToolbarProps<I, S>
 ) => {
+  const editor = useBlockNoteEditor<
+    { image: DefaultBlockSchema["image"] },
+    I,
+    S
+  >();
+
   const [openTab, setOpenTab] = useState<"upload" | "embed">(
-    props.editor.uploadFile !== undefined ? "upload" : "embed"
+    editor.uploadFile !== undefined ? "upload" : "embed"
   );
   const [uploading, setUploading] = useState<boolean>(false);
   const [uploadFailed, setUploadFailed] = useState<boolean>(false);
@@ -56,15 +60,15 @@ export const DefaultImageToolbar = <BSchema extends BlockSchema>(
       async function upload(file: File) {
         setUploading(true);
 
-        if (props.editor.uploadFile !== undefined) {
+        if (editor.uploadFile !== undefined) {
           try {
-            const uploaded = await props.editor.uploadFile(file);
-            props.editor.updateBlock(props.block, {
+            const uploaded = await editor.uploadFile(file);
+            editor.updateBlock(props.block, {
               type: "image",
               props: {
                 url: uploaded,
               },
-            } as PartialBlock<BSchema, any, any>);
+            });
           } catch (e) {
             setUploadFailed(true);
           } finally {
@@ -75,7 +79,7 @@ export const DefaultImageToolbar = <BSchema extends BlockSchema>(
 
       upload(file);
     },
-    [props.block, props.editor]
+    [editor, props.block]
   );
 
   const [currentURL, setCurrentURL] = useState<string>("");
@@ -91,25 +95,25 @@ export const DefaultImageToolbar = <BSchema extends BlockSchema>(
     (event: KeyboardEvent) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        props.editor.updateBlock(props.block, {
+        editor.updateBlock(props.block, {
           type: "image",
           props: {
             url: currentURL,
           },
-        } as PartialBlock<BSchema, any, any>);
+        });
       }
     },
-    [currentURL, props.block, props.editor]
+    [editor, props.block, currentURL]
   );
 
   const handleURLClick = useCallback(() => {
-    props.editor.updateBlock(props.block, {
+    editor.updateBlock(props.block, {
       type: "image",
       props: {
         url: currentURL,
       },
-    } as PartialBlock<BSchema, any, any>);
-  }, [currentURL, props.block, props.editor]);
+    });
+  }, [editor, props.block, currentURL]);
 
   return (
     <Toolbar className={"bn-image-toolbar"}>
@@ -117,7 +121,7 @@ export const DefaultImageToolbar = <BSchema extends BlockSchema>(
         {uploading && <LoadingOverlay visible={uploading} />}
 
         <Tabs.List>
-          {props.editor.uploadFile !== undefined && (
+          {editor.uploadFile !== undefined && (
             <Tabs.Tab value="upload" data-test={"upload-tab"}>
               Upload
             </Tabs.Tab>
@@ -127,7 +131,7 @@ export const DefaultImageToolbar = <BSchema extends BlockSchema>(
           </Tabs.Tab>
         </Tabs.List>
 
-        {props.editor.uploadFile !== undefined && (
+        {editor.uploadFile !== undefined && (
           <Tabs.Panel className={"bn-upload-image-panel"} value="upload">
             <div>
               <FileInput
diff --git a/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx b/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx
deleted file mode 100644
index f234f55486..0000000000
--- a/packages/react/src/components/SideMenu/DefaultButtons/AddBlockButton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AiOutlinePlus } from "react-icons/ai";
-import { SideMenuButton } from "../SideMenuButton";
-
-export const AddBlockButton = (props: { addBlock: () => void }) => (
-  <SideMenuButton>
-    <AiOutlinePlus
-      size={24}
-      onClick={props.addBlock}
-      data-test={"dragHandleAdd"}
-    />
-  </SideMenuButton>
-);
diff --git a/packages/react/src/components/SideMenu/DefaultButtons/DragHandle.tsx b/packages/react/src/components/SideMenu/DefaultButtons/DragHandle.tsx
deleted file mode 100644
index 4e3a1c9294..0000000000
--- a/packages/react/src/components/SideMenu/DefaultButtons/DragHandle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Block, BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { Menu } from "@mantine/core";
-import { MdDragIndicator } from "react-icons/md";
-import { DefaultDragHandleMenu } from "../DragHandleMenu/DefaultDragHandleMenu";
-import { SideMenuButton } from "../SideMenuButton";
-import { FC } from "react";
-import type { DragHandleMenuProps } from "../DragHandleMenu/DragHandleMenu";
-
-export const DragHandle = <BSchema extends BlockSchema>(props: {
-  editor: BlockNoteEditor<BSchema, any, any>;
-  block: Block<BSchema, any, any>;
-  blockDragStart: (event: {
-    dataTransfer: DataTransfer | null;
-    clientY: number;
-  }) => void;
-  blockDragEnd: () => void;
-  freezeMenu: () => void;
-  unfreezeMenu: () => void;
-  dragHandleMenu?: FC<DragHandleMenuProps<BSchema, any, any>>;
-}) => {
-  const DragHandleMenu = props.dragHandleMenu || DefaultDragHandleMenu;
-
-  return (
-    <Menu
-      withinPortal={false}
-      trigger={"click"}
-      onOpen={props.freezeMenu}
-      onClose={props.unfreezeMenu}
-      width={100}
-      position={"left"}>
-      <Menu.Target>
-        <div
-          className={"bn-drag-handle"}
-          draggable="true"
-          onDragStart={props.blockDragStart}
-          onDragEnd={props.blockDragEnd}>
-          <SideMenuButton>
-            <MdDragIndicator size={24} data-test={"dragHandle"} />
-          </SideMenuButton>
-        </div>
-      </Menu.Target>
-      <DragHandleMenu editor={props.editor} block={props.block} />
-    </Menu>
-  );
-};
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/RemoveBlockButton.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/RemoveBlockButton.tsx
deleted file mode 100644
index 1be12bd629..0000000000
--- a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/RemoveBlockButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { BlockSchema } from "@blocknote/core";
-import { ReactNode } from "react";
-
-import type { DragHandleMenuProps } from "../DragHandleMenu";
-import { DragHandleMenuItem } from "../DragHandleMenuItem";
-
-export const RemoveBlockButton = <BSchema extends BlockSchema>(
-  props: DragHandleMenuProps<BSchema, any, any> & { children: ReactNode }
-) => {
-  return (
-    <DragHandleMenuItem
-      onClick={() => props.editor.removeBlocks([props.block])}>
-      {props.children}
-    </DragHandleMenuItem>
-  );
-};
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultDragHandleMenu.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultDragHandleMenu.tsx
deleted file mode 100644
index 1a03a1b29c..0000000000
--- a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultDragHandleMenu.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { BlockSchema } from "@blocknote/core";
-
-import { BlockColorsButton } from "./DefaultButtons/BlockColorsButton";
-import { RemoveBlockButton } from "./DefaultButtons/RemoveBlockButton";
-import { DragHandleMenu, DragHandleMenuProps } from "./DragHandleMenu";
-
-export const DefaultDragHandleMenu = <BSchema extends BlockSchema>(
-  props: DragHandleMenuProps<BSchema, any, any>
-) => (
-  <DragHandleMenu>
-    <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
-    <BlockColorsButton {...props}>Colors</BlockColorsButton>
-  </DragHandleMenu>
-);
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenu.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenuProps.ts
similarity index 57%
rename from packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenu.tsx
rename to packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenuProps.ts
index e15ba6017e..35d0827306 100644
--- a/packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenu.tsx
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenuProps.ts
@@ -1,6 +1,5 @@
 import {
   Block,
-  BlockNoteEditor,
   BlockSchema,
   DefaultBlockSchema,
   DefaultInlineContentSchema,
@@ -8,20 +7,11 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { Menu } from "@mantine/core";
-import { ReactNode } from "react";
 
 export type DragHandleMenuProps<
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 > = {
-  editor: BlockNoteEditor<BSchema, I, S>;
   block: Block<BSchema, I, S>;
-};
-
-export const DragHandleMenu = (props: { children: ReactNode }) => (
-  <Menu.Dropdown className={"bn-drag-handle-menu"}>
-    {props.children}
-  </Menu.Dropdown>
-);
+};
\ No newline at end of file
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/BlockColorsItem.tsx
similarity index 57%
rename from packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx
rename to packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/BlockColorsItem.tsx
index 1489ac43cd..768efcae62 100644
--- a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/BlockColorsItem.tsx
@@ -1,16 +1,34 @@
-import { BlockSchema, PartialBlock } from "@blocknote/core";
+import {
+  BlockSchema,
+  checkBlockHasDefaultProp,
+  checkBlockTypeHasDefaultProp,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
 import { Box, Menu } from "@mantine/core";
 import { ReactNode, useCallback, useRef, useState } from "react";
 import { HiChevronRight } from "react-icons/hi";
 
-import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
-import { ColorPicker } from "../../../../components-shared/ColorPicker/ColorPicker";
-import type { DragHandleMenuProps } from "../DragHandleMenu";
+import { useBlockNoteEditor } from "../../../../../hooks/useBlockNoteEditor";
+import { usePreventMenuOverflow } from "../../../../../hooks/usePreventMenuOverflow";
+import { ColorPicker } from "../../../../mantine-shared/ColorPicker/ColorPicker";
+import { DragHandleMenuProps } from "../../DragHandleMenuProps";
 import { DragHandleMenuItem } from "../DragHandleMenuItem";
 
-export const BlockColorsButton = <BSchema extends BlockSchema>(
-  props: DragHandleMenuProps<BSchema, any, any> & { children: ReactNode }
+export const BlockColorsItem = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: DragHandleMenuProps<BSchema, I, S> & {
+    children: ReactNode;
+  }
 ) => {
+  const editor = useBlockNoteEditor<BSchema, I, S>();
+
   const [opened, setOpened] = useState(false);
 
   const { ref, updateMaxHeight } = usePreventMenuOverflow();
@@ -39,8 +57,8 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
   }, [opened, updateMaxHeight]);
 
   if (
-    !("textColor" in props.block.props) &&
-    !("backgroundColor" in props.block.props)
+    !checkBlockTypeHasDefaultProp("textColor", props.block.type, editor) &&
+    !checkBlockTypeHasDefaultProp("backgroundColor", props.block.type, editor)
   ) {
     return null;
   }
@@ -66,26 +84,34 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
             <ColorPicker
               iconSize={18}
               text={
-                "textColor" in props.block.props &&
-                typeof props.block.props.textColor === "string"
+                checkBlockTypeHasDefaultProp(
+                  "textColor",
+                  props.block.type,
+                  editor
+                ) && checkBlockHasDefaultProp("textColor", props.block, editor)
                   ? {
                       color: props.block.props.textColor,
                       setColor: (color) =>
-                        props.editor.updateBlock(props.block, {
+                        editor.updateBlock(props.block, {
+                          type: props.block.type,
                           props: { textColor: color },
-                        } as PartialBlock<BSchema, any, any>),
+                        }),
                     }
                   : undefined
               }
               background={
-                "backgroundColor" in props.block.props &&
-                typeof props.block.props.backgroundColor === "string"
+                checkBlockTypeHasDefaultProp(
+                  "backgroundColor",
+                  props.block.type,
+                  editor
+                ) &&
+                checkBlockHasDefaultProp("backgroundColor", props.block, editor)
                   ? {
                       color: props.block.props.backgroundColor,
                       setColor: (color) =>
-                        props.editor.updateBlock(props.block, {
+                        editor.updateBlock(props.block, {
                           props: { backgroundColor: color },
-                        } as PartialBlock<BSchema, any, any>),
+                        }),
                     }
                   : undefined
               }
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/RemoveBlockItem.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/RemoveBlockItem.tsx
new file mode 100644
index 0000000000..05a24707d8
--- /dev/null
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultItems/RemoveBlockItem.tsx
@@ -0,0 +1,31 @@
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { ReactNode } from "react";
+
+import { useBlockNoteEditor } from "../../../../../hooks/useBlockNoteEditor";
+import { DragHandleMenuProps } from "../../DragHandleMenuProps";
+import { DragHandleMenuItem } from "../DragHandleMenuItem";
+
+export const RemoveBlockItem = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: DragHandleMenuProps<BSchema, I, S> & {
+    children: ReactNode;
+  }
+) => {
+  const editor = useBlockNoteEditor<BSchema, I, S>();
+
+  return (
+    <DragHandleMenuItem onClick={() => editor.removeBlocks([props.block])}>
+      {props.children}
+    </DragHandleMenuItem>
+  );
+};
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx
new file mode 100644
index 0000000000..6d1245a446
--- /dev/null
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx
@@ -0,0 +1,38 @@
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+
+import { Menu } from "@mantine/core";
+import { DragHandleMenuProps } from "../DragHandleMenuProps";
+import { BlockColorsItem } from "./DefaultItems/BlockColorsItem";
+import { RemoveBlockItem } from "./DefaultItems/RemoveBlockItem";
+
+/**
+ * By default, the DragHandleMenu component will render with default items.
+ * However, you can override the items to render by passing children. The
+ * children you pass should be:
+ *
+ * - Default items: Components found within the `/DefaultItems` directory.
+ * - Custom items: The `DragHandleMenuItem` component.
+ */
+export const DragHandleMenu = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: DragHandleMenuProps<BSchema, I, S> & { children?: React.ReactNode }
+) => (
+  <Menu.Dropdown className={"bn-drag-handle-menu"}>
+    {props.children || (
+      <>
+        <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
+        <BlockColorsItem {...props}>Colors</BlockColorsItem>
+      </>
+    )}
+  </Menu.Dropdown>
+);
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenuItem.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem.tsx
similarity index 100%
rename from packages/react/src/components/SideMenu/DragHandleMenu/DragHandleMenuItem.tsx
rename to packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem.tsx
diff --git a/packages/react/src/components/SideMenu/SideMenu.tsx b/packages/react/src/components/SideMenu/SideMenu.tsx
deleted file mode 100644
index ad16e7c334..0000000000
--- a/packages/react/src/components/SideMenu/SideMenu.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Group } from "@mantine/core";
-import { ReactNode } from "react";
-
-export const SideMenu = (props: { children: ReactNode }) => (
-  <Group className={"bn-side-menu"} gap={0}>
-    {props.children}
-  </Group>
-);
diff --git a/packages/react/src/components/SideMenu/DefaultPositionedSideMenu.tsx b/packages/react/src/components/SideMenu/SideMenuController.tsx
similarity index 60%
rename from packages/react/src/components/SideMenu/DefaultPositionedSideMenu.tsx
rename to packages/react/src/components/SideMenu/SideMenuController.tsx
index bdefa9592a..bc33c6e4ce 100644
--- a/packages/react/src/components/SideMenu/DefaultPositionedSideMenu.tsx
+++ b/packages/react/src/components/SideMenu/SideMenuController.tsx
@@ -1,5 +1,4 @@
 import {
-  BlockNoteEditor,
   BlockSchema,
   DefaultBlockSchema,
   DefaultInlineContentSchema,
@@ -9,28 +8,31 @@ import {
 } from "@blocknote/core";
 import { FC } from "react";
 
-import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
-import { DefaultSideMenu, SideMenuProps } from "./DefaultSideMenu";
+import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { SideMenuProps } from "./SideMenuProps";
+import { SideMenu } from "./mantine/SideMenu";
 
-export const DefaultPositionedSideMenu = <
+export const SideMenuController = <
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
-  editor: BlockNoteEditor<BSchema, I, S>;
   sideMenu?: FC<SideMenuProps<BSchema, I, S>>;
 }) => {
+  const editor = useBlockNoteEditor<BSchema, I, S>();
+
   const callbacks = {
-    addBlock: props.editor.sideMenu.addBlock,
-    blockDragStart: props.editor.sideMenu.blockDragStart,
-    blockDragEnd: props.editor.sideMenu.blockDragEnd,
-    freezeMenu: props.editor.sideMenu.freezeMenu,
-    unfreezeMenu: props.editor.sideMenu.unfreezeMenu,
+    addBlock: editor.sideMenu.addBlock,
+    blockDragStart: editor.sideMenu.blockDragStart,
+    blockDragEnd: editor.sideMenu.blockDragEnd,
+    freezeMenu: editor.sideMenu.freezeMenu,
+    unfreezeMenu: editor.sideMenu.unfreezeMenu,
   };
 
   const state = useUIPluginState(
-    props.editor.sideMenu.onUpdate.bind(props.editor.sideMenu)
+    editor.sideMenu.onUpdate.bind(editor.sideMenu)
   );
   const { isMounted, ref, style } = useUIElementPositioning(
     state?.show || false,
@@ -47,11 +49,11 @@ export const DefaultPositionedSideMenu = <
 
   const { show, referencePos, ...data } = state;
 
-  const SideMenu = props.sideMenu || DefaultSideMenu;
+  const Component = props.sideMenu || SideMenu;
 
   return (
     <div ref={ref} style={style}>
-      <SideMenu editor={props.editor} {...data} {...callbacks} />
+      <Component {...data} {...callbacks} />
     </div>
   );
 };
diff --git a/packages/react/src/components/SideMenu/DefaultSideMenu.tsx b/packages/react/src/components/SideMenu/SideMenuProps.ts
similarity index 51%
rename from packages/react/src/components/SideMenu/DefaultSideMenu.tsx
rename to packages/react/src/components/SideMenu/SideMenuProps.ts
index 63db4a328d..409b3d4c0c 100644
--- a/packages/react/src/components/SideMenu/DefaultSideMenu.tsx
+++ b/packages/react/src/components/SideMenu/SideMenuProps.ts
@@ -9,18 +9,15 @@ import {
   StyleSchema,
   UiElementPosition,
 } from "@blocknote/core";
-import { AddBlockButton } from "./DefaultButtons/AddBlockButton";
-import { DragHandle } from "./DefaultButtons/DragHandle";
-import { SideMenu } from "./SideMenu";
 import { FC } from "react";
-import type { DragHandleMenuProps } from "./DragHandleMenu/DragHandleMenu";
+
+import { DragHandleMenuProps } from "./DragHandleMenu/DragHandleMenuProps";
 
 export type SideMenuProps<
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 > = {
-  editor: BlockNoteEditor<BSchema, I, S>;
   dragHandleMenu?: FC<DragHandleMenuProps<BSchema, I, S>>;
 } & Omit<SideMenuState<BSchema, I, S>, keyof UiElementPosition> &
   Pick<
@@ -31,20 +28,3 @@ export type SideMenuProps<
     | "freezeMenu"
     | "unfreezeMenu"
   >;
-
-export const DefaultSideMenu = <
-  BSchema extends BlockSchema = DefaultBlockSchema,
-  I extends InlineContentSchema = DefaultInlineContentSchema,
-  S extends StyleSchema = DefaultStyleSchema
->(
-  props: SideMenuProps<BSchema, I, S>
-) => {
-  const { addBlock, ...rest } = props;
-
-  return (
-    <SideMenu>
-      <AddBlockButton addBlock={addBlock} />
-      <DragHandle {...rest} />
-    </SideMenu>
-  );
-};
diff --git a/packages/react/src/components/SideMenu/mantine/DefaultButtons/AddBlockButton.tsx b/packages/react/src/components/SideMenu/mantine/DefaultButtons/AddBlockButton.tsx
new file mode 100644
index 0000000000..c97ec04e2a
--- /dev/null
+++ b/packages/react/src/components/SideMenu/mantine/DefaultButtons/AddBlockButton.tsx
@@ -0,0 +1,28 @@
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { AiOutlinePlus } from "react-icons/ai";
+
+import { SideMenuProps } from "../../SideMenuProps";
+import { SideMenuButton } from "../SideMenuButton";
+
+export const AddBlockButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: Pick<SideMenuProps<BSchema, I, S>, "addBlock">
+) => (
+  <SideMenuButton>
+    <AiOutlinePlus
+      size={24}
+      onClick={props.addBlock}
+      data-test={"dragHandleAdd"}
+    />
+  </SideMenuButton>
+);
diff --git a/packages/react/src/components/SideMenu/mantine/DefaultButtons/DragHandleButton.tsx b/packages/react/src/components/SideMenu/mantine/DefaultButtons/DragHandleButton.tsx
new file mode 100644
index 0000000000..78d9343197
--- /dev/null
+++ b/packages/react/src/components/SideMenu/mantine/DefaultButtons/DragHandleButton.tsx
@@ -0,0 +1,47 @@
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { Menu } from "@mantine/core";
+import { MdDragIndicator } from "react-icons/md";
+
+import { SideMenuProps } from "../../SideMenuProps";
+import { SideMenuButton } from "../SideMenuButton";
+import { DragHandleMenu } from "../../DragHandleMenu/mantine/DragHandleMenu";
+
+export const DragHandleButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: Omit<SideMenuProps<BSchema, I, S>, "addBlock">
+) => {
+  const Component = props.dragHandleMenu || DragHandleMenu;
+
+  return (
+    <Menu
+      withinPortal={false}
+      trigger={"click"}
+      onOpen={props.freezeMenu}
+      onClose={props.unfreezeMenu}
+      width={100}
+      position={"left"}>
+      <Menu.Target>
+        <div
+          className={"bn-drag-handle"}
+          draggable="true"
+          onDragStart={props.blockDragStart}
+          onDragEnd={props.blockDragEnd}>
+          <SideMenuButton>
+            <MdDragIndicator size={24} data-test={"dragHandle"} />
+          </SideMenuButton>
+        </div>
+      </Menu.Target>
+      <Component block={props.block} />
+    </Menu>
+  );
+};
diff --git a/packages/react/src/components/SideMenu/mantine/SideMenu.tsx b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx
new file mode 100644
index 0000000000..1a2c2ed49f
--- /dev/null
+++ b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx
@@ -0,0 +1,43 @@
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+
+import { Group } from "@mantine/core";
+import { SideMenuProps } from "../SideMenuProps";
+import { AddBlockButton } from "./DefaultButtons/AddBlockButton";
+import { DragHandleButton } from "./DefaultButtons/DragHandleButton";
+
+// TODO: props.dragHandleMenu should only be available if no children are passed
+/**
+ * By default, the SideMenu component will render with default buttons. However,
+ * you can override the buttons to render by passing children. The children you
+ * pass should be:
+ *
+ * - Default buttons: Components found within the `/DefaultButtons` directory.
+ * - Custom buttons: The `SideMenuButton` component.
+ */
+export const SideMenu = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: SideMenuProps<BSchema, I, S> & { children?: React.ReactNode }
+) => {
+  const { addBlock, ...rest } = props;
+
+  return (
+    <Group className={"bn-side-menu"} gap={0}>
+      {props.children || (
+        <>
+          <AddBlockButton addBlock={addBlock} />
+          <DragHandleButton {...rest} />
+        </>
+      )}
+    </Group>
+  );
+};
diff --git a/packages/react/src/components/SideMenu/SideMenuButton.tsx b/packages/react/src/components/SideMenu/mantine/SideMenuButton.tsx
similarity index 100%
rename from packages/react/src/components/SideMenu/SideMenuButton.tsx
rename to packages/react/src/components/SideMenu/mantine/SideMenuButton.tsx
diff --git a/packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.test.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx
similarity index 71%
rename from packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.test.tsx
rename to packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx
index a797d5fe2f..f580b5697a 100644
--- a/packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.test.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx
@@ -1,33 +1,37 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { it } from "vitest";
-import { DefaultPositionedSuggestionMenu } from "./DefaultPositionedSuggestionMenu";
+import { SuggestionMenuController } from "./SuggestionMenuController";
 
 it("has good typing", () => {
   // invalid, because DefaultSuggestionItem doesn't have a title property, so the default MantineSuggestionMenu doesn't wrok
   let menu = (
     // @ts-expect-error
-    <DefaultPositionedSuggestionMenu
+    <SuggestionMenuController
       getItems={async () => [{ name: "hello" }]}
-      editor={undefined as any}
       triggerCharacter="/"
     />
   );
 
   // valid, because getItems returns DefaultSuggestionItem so suggestionMenuComponent is optional
   menu = (
-    <DefaultPositionedSuggestionMenu
-      getItems={async () => [{ title: "hello" }]}
-      editor={undefined as any}
+    <SuggestionMenuController
+      getItems={async () => [
+        {
+          title: "hello",
+          onItemClick: () => {
+            return;
+          },
+        },
+      ]}
       triggerCharacter="/"
     />
   );
 
   // validate type of onItemClick
   menu = (
-    <DefaultPositionedSuggestionMenu
+    <SuggestionMenuController
       suggestionMenuComponent={undefined as any}
       getItems={async () => [{ hello: "hello" }]}
-      editor={undefined as any}
       onItemClick={(item) => {
         console.log(item.hello);
       }}
diff --git a/packages/react/src/components/SuggestionMenu/DefaultPositionedSuggestionMenu.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
similarity index 57%
rename from packages/react/src/components/SuggestionMenu/DefaultPositionedSuggestionMenu.tsx
rename to packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
index d4c11ced18..cf1775fd51 100644
--- a/packages/react/src/components/SuggestionMenu/DefaultPositionedSuggestionMenu.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx
@@ -1,58 +1,67 @@
 import {
-  BlockNoteEditor,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
   SuggestionMenuState,
+  filterSuggestionItems,
 } from "@blocknote/core";
 import { flip, offset, size } from "@floating-ui/react";
 import { FC } from "react";
 
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning";
 import { useUIPluginState } from "../../hooks/useUIPluginState";
-import { DefaultSuggestionMenu } from "./DefaultSuggestionMenu";
-import { MantineSuggestionMenu } from "./mantine/MantineSuggestionMenu";
-import { DefaultSuggestionItem, SuggestionMenuProps } from "./types";
+import { SuggestionMenuWrapper } from "./SuggestionMenuWrapper";
+import { getDefaultReactSlashMenuItems } from "./getDefaultReactSlashMenuItems";
+import { SuggestionMenu } from "./mantine/SuggestionMenu";
+import { DefaultReactSuggestionItem, SuggestionMenuProps } from "./types";
 
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
 type ItemType<GetItemsType extends (query: string) => Promise<any[]>> =
   ArrayElement<Awaited<ReturnType<GetItemsType>>>;
 
-export function DefaultPositionedSuggestionMenu<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
+export function SuggestionMenuController<
   // This is a bit hacky, but only way I found to make types work so the optionality
   // of suggestionMenuComponent depends on the return type of getItems
-  GetItemsType extends (query: string) => Promise<any[]>
+  GetItemsType extends (query: string) => Promise<any[]> = (
+    query: string
+  ) => Promise<DefaultReactSuggestionItem[]>
 >(
   props: {
-    editor: BlockNoteEditor<BSchema, I, S>;
     triggerCharacter: string;
-    getItems: GetItemsType;
-    onItemClick?: (item: ItemType<GetItemsType>) => void;
-  } & (ItemType<GetItemsType> extends DefaultSuggestionItem
+    getItems?: GetItemsType;
+  } & (ItemType<GetItemsType> extends DefaultReactSuggestionItem
     ? {
         // can be undefined
         suggestionMenuComponent?: FC<
           SuggestionMenuProps<ItemType<GetItemsType>>
         >;
+        onItemClick?: (item: ItemType<GetItemsType>) => void;
       }
     : {
         // getItems doesn't return DefaultSuggestionItem, so suggestionMenuComponent is required
         suggestionMenuComponent: FC<
           SuggestionMenuProps<ItemType<GetItemsType>>
         >;
+        onItemClick: (item: ItemType<GetItemsType>) => void;
       })
 ) {
-  const {
-    editor,
-    triggerCharacter,
-    onItemClick,
-    getItems,
-    suggestionMenuComponent,
-  } = props;
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const { triggerCharacter, suggestionMenuComponent } = props;
+
+  let { onItemClick, getItems } = props;
+
+  if (!onItemClick) {
+    onItemClick = (item: ItemType<GetItemsType>) => {
+      item.onItemClick(editor);
+    };
+  }
 
   const callbacks = {
     closeMenu: editor.suggestionMenus.closeMenu,
@@ -61,7 +70,7 @@ export function DefaultPositionedSuggestionMenu<
 
   const state = useUIPluginState(
     (callback: (state: SuggestionMenuState) => void) =>
-      props.editor.suggestionMenus.onUpdate.bind(editor.suggestionMenus)(
+      editor.suggestionMenus.onUpdate.bind(editor.suggestionMenus)(
         triggerCharacter,
         callback
       )
@@ -92,19 +101,23 @@ export function DefaultPositionedSuggestionMenu<
     return null;
   }
 
-  const { show, referencePos, ...data } = state;
+  if (!getItems) {
+    getItems = (async (query: string) =>
+      filterSuggestionItems(
+        getDefaultReactSlashMenuItems(editor),
+        query
+      )) as any;
+  }
 
   return (
     <div ref={ref} style={style}>
-      <DefaultSuggestionMenu
-        editor={editor}
-        getItems={getItems}
-        suggestionMenuComponent={
-          suggestionMenuComponent || MantineSuggestionMenu
-        }
+      <SuggestionMenuWrapper
+        query={state.query}
+        closeMenu={callbacks.closeMenu}
+        clearQuery={callbacks.clearQuery}
+        getItems={getItems!}
+        suggestionMenuComponent={suggestionMenuComponent || SuggestionMenu}
         onItemClick={onItemClick}
-        {...data}
-        {...callbacks}
       />
     </div>
   );
diff --git a/packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
similarity index 72%
rename from packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.tsx
rename to packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
index 4243c1dde5..1a1137cda9 100644
--- a/packages/react/src/components/SuggestionMenu/DefaultSuggestionMenu.tsx
+++ b/packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
@@ -1,23 +1,13 @@
-import {
-  BlockNoteEditor,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "@blocknote/core";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
 import { FC, useCallback } from "react";
 
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useCloseSuggestionMenuNoItems } from "./hooks/useCloseSuggestionMenuNoItems";
 import { useLoadSuggestionMenuItems } from "./hooks/useLoadSuggestionMenuItems";
 import { useSuggestionMenuKeyboardNavigation } from "./hooks/useSuggestionMenuKeyboardNavigation";
 import { SuggestionMenuProps } from "./types";
 
-export function DefaultSuggestionMenu<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-  Item
->(props: {
-  editor: BlockNoteEditor<BSchema, I, S>;
+export function SuggestionMenuWrapper<Item>(props: {
   query: string;
   closeMenu: () => void;
   clearQuery: () => void;
@@ -25,8 +15,13 @@ export function DefaultSuggestionMenu<
   onItemClick?: (item: Item) => void;
   suggestionMenuComponent: FC<SuggestionMenuProps<Item>>;
 }) {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
   const {
-    editor,
     getItems,
     suggestionMenuComponent,
     query,
@@ -35,7 +30,7 @@ export function DefaultSuggestionMenu<
     onItemClick,
   } = props;
 
-  const clickHandler = useCallback(
+  const onItemClickCloseMenu = useCallback(
     (item: Item) => {
       closeMenu();
       clearQuery();
@@ -55,14 +50,15 @@ export function DefaultSuggestionMenu<
     editor,
     items,
     closeMenu,
-    onItemClick
+    onItemClickCloseMenu
   );
 
-  const Comp = suggestionMenuComponent;
+  const Component = suggestionMenuComponent;
+
   return (
-    <Comp
+    <Component
       items={items}
-      onItemClick={clickHandler}
+      onItemClick={onItemClickCloseMenu}
       loadingState={loadingState}
       selectedIndex={selectedIndex}
     />
diff --git a/packages/react/src/components/SuggestionMenu/defaultReactSlashMenuItems.tsx b/packages/react/src/components/SuggestionMenu/defaultReactSlashMenuItems.tsx
deleted file mode 100644
index 34fabe491a..0000000000
--- a/packages/react/src/components/SuggestionMenu/defaultReactSlashMenuItems.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { getDefaultSlashMenuItems } from "@blocknote/core";
-import {
-  RiH1,
-  RiH2,
-  RiH3,
-  RiImage2Fill,
-  RiListOrdered,
-  RiListUnordered,
-  RiTable2,
-  RiText,
-} from "react-icons/ri";
-
-const icons = {
-  "Heading 1": RiH1,
-  "Heading 2": RiH2,
-  "Heading 3": RiH3,
-  "Numbered List": RiListOrdered,
-  "Bullet List": RiListUnordered,
-  Paragraph: RiText,
-  Table: RiTable2,
-  Image: RiImage2Fill,
-};
-
-export function getDefaultReactSlashMenuItems() {
-  return getDefaultSlashMenuItems().map((item) => {
-    const Icon = icons[item.title];
-    return {
-      ...item,
-      icon: <Icon size={18} />,
-    };
-  });
-}
diff --git a/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx b/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx
new file mode 100644
index 0000000000..a912700d27
--- /dev/null
+++ b/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx
@@ -0,0 +1,44 @@
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  getDefaultSlashMenuItems,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { IconType } from "react-icons";
+import {
+  RiH1,
+  RiH2,
+  RiH3,
+  RiImage2Fill,
+  RiListOrdered,
+  RiListUnordered,
+  RiTable2,
+  RiText,
+} from "react-icons/ri";
+import { DefaultReactSuggestionItem } from "./types";
+
+const icons: Record<string, IconType> = {
+  "Heading 1": RiH1,
+  "Heading 2": RiH2,
+  "Heading 3": RiH3,
+  "Numbered List": RiListOrdered,
+  "Bullet List": RiListUnordered,
+  Paragraph: RiText,
+  Table: RiTable2,
+  Image: RiImage2Fill,
+};
+
+export function getDefaultReactSlashMenuItems<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>): DefaultReactSuggestionItem[] {
+  return getDefaultSlashMenuItems(editor).map((item) => {
+    const Icon = icons[item.title];
+    return {
+      ...item,
+      icon: <Icon size={18} />,
+    };
+  });
+}
diff --git a/packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenu.tsx b/packages/react/src/components/SuggestionMenu/mantine/SuggestionMenu.tsx
similarity index 88%
rename from packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenu.tsx
rename to packages/react/src/components/SuggestionMenu/mantine/SuggestionMenu.tsx
index 2030edebee..1c375c52e8 100644
--- a/packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenu.tsx
+++ b/packages/react/src/components/SuggestionMenu/mantine/SuggestionMenu.tsx
@@ -1,9 +1,10 @@
 import { Loader, Menu } from "@mantine/core";
 import { Children, useMemo } from "react";
-import { DefaultSuggestionItem, SuggestionMenuProps } from "../types";
-import { MantineSuggestionMenuItem } from "./MantineSuggestionMenuItem";
 
-export function MantineSuggestionMenu<T extends DefaultSuggestionItem>(
+import { DefaultReactSuggestionItem, SuggestionMenuProps } from "../types";
+import { SuggestionMenuItem } from "./SuggestionMenuItem";
+
+export function SuggestionMenu<T extends DefaultReactSuggestionItem>(
   props: SuggestionMenuProps<T>
 ) {
   const { items, loadingState, selectedIndex, onItemClick } = props;
@@ -27,7 +28,7 @@ export function MantineSuggestionMenu<T extends DefaultSuggestionItem>(
       }
 
       renderedItems.push(
-        <MantineSuggestionMenuItem
+        <SuggestionMenuItem
           {...item}
           isSelected={i === selectedIndex}
           key={item.title}
diff --git a/packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenuItem.tsx b/packages/react/src/components/SuggestionMenu/mantine/SuggestionMenuItem.tsx
similarity index 97%
rename from packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenuItem.tsx
rename to packages/react/src/components/SuggestionMenu/mantine/SuggestionMenuItem.tsx
index 2dac1583ab..99eceb225f 100644
--- a/packages/react/src/components/SuggestionMenu/mantine/MantineSuggestionMenuItem.tsx
+++ b/packages/react/src/components/SuggestionMenu/mantine/SuggestionMenuItem.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
 
 const MIN_LEFT_MARGIN = 5;
 
-export function MantineSuggestionMenuItem(props: {
+export function SuggestionMenuItem(props: {
   title: string;
   onClick: () => void;
   subtext?: string;
diff --git a/packages/react/src/components/SuggestionMenu/types.tsx b/packages/react/src/components/SuggestionMenu/types.tsx
index 5e0f0efbb2..01fe74c84a 100644
--- a/packages/react/src/components/SuggestionMenu/types.tsx
+++ b/packages/react/src/components/SuggestionMenu/types.tsx
@@ -1,18 +1,18 @@
+import { DefaultSuggestionItem } from "@blocknote/core";
+
 /**
  * Although any arbitrary data can be passed as suggestion items, the built-in
  * UI components such as `MantineSuggestionMenu` expect a shape that conforms to DefaultSuggestionItem
  */
-export type DefaultSuggestionItem = {
-  title: string;
-  group?: string;
-  subtext?: string;
+export type DefaultReactSuggestionItem = DefaultSuggestionItem & {
   icon?: JSX.Element;
-  badge?: string;
 };
 
 /**
  * Props passed to a suggestion menu component
  */
+// TODO: onItemClick should be required when T extends
+//  DefaultReactSuggestionItem
 export type SuggestionMenuProps<T> = {
   items: T[];
   loadingState: "loading-initial" | "loading" | "loaded";
diff --git a/packages/react/src/components/TableHandles/BlockSchemaWithTable.ts b/packages/react/src/components/TableHandles/BlockSchemaWithTable.ts
deleted file mode 100644
index 92b2cf9fa4..0000000000
--- a/packages/react/src/components/TableHandles/BlockSchemaWithTable.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { BlockSchemaWithBlock, DefaultBlockSchema } from "@blocknote/core";
-
-export type BlockSchemaWithTable = BlockSchemaWithBlock<
-  "table",
-  DefaultBlockSchema["table"]
->;
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenu.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenuProps.ts
similarity index 61%
rename from packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenu.tsx
rename to packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenuProps.ts
index 4b622c9a3d..c4c3dcf31a 100644
--- a/packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenu.tsx
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenuProps.ts
@@ -3,8 +3,6 @@ import {
   DefaultBlockSchema,
   SpecificBlock,
 } from "@blocknote/core";
-import { Menu } from "@mantine/core";
-import { ReactNode } from "react";
 
 export type TableHandleMenuProps<
   BSchema extends { table: DefaultBlockSchema["table"] }
@@ -18,10 +16,4 @@ export type TableHandleMenuProps<
     any
   >;
   index: number;
-};
-
-export const TableHandleMenu = (props: { children: ReactNode }) => (
-  <Menu.Dropdown className={"bn-table-handle-menu"}>
-    {props.children}
-  </Menu.Dropdown>
-);
+};
\ No newline at end of file
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/AddButton.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/AddButton.tsx
similarity index 96%
rename from packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/AddButton.tsx
rename to packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/AddButton.tsx
index 67c008b427..b6760e6f47 100644
--- a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/AddButton.tsx
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/AddButton.tsx
@@ -3,7 +3,8 @@ import {
   PartialBlock,
   TableContent,
 } from "@blocknote/core";
-import { TableHandleMenuProps } from "../TableHandleMenu";
+
+import { TableHandleMenuProps } from "../../TableHandleMenuProps";
 import { TableHandleMenuItem } from "../TableHandleMenuItem";
 
 export const AddRowButton = <
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/DeleteButton.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/DeleteButton.tsx
similarity index 95%
rename from packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/DeleteButton.tsx
rename to packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/DeleteButton.tsx
index 2a8af93c37..728f49e588 100644
--- a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/DeleteButton.tsx
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultButtons/DeleteButton.tsx
@@ -3,7 +3,8 @@ import {
   PartialBlock,
   TableContent,
 } from "@blocknote/core";
-import { TableHandleMenuProps } from "../TableHandleMenu";
+
+import { TableHandleMenuProps } from "../../TableHandleMenuProps";
 import { TableHandleMenuItem } from "../TableHandleMenuItem";
 
 export const DeleteRowButton = <
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultTableHandleMenu.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultTableHandleMenu.tsx
similarity index 88%
rename from packages/react/src/components/TableHandles/TableHandleMenu/DefaultTableHandleMenu.tsx
rename to packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultTableHandleMenu.tsx
index 28b418abdd..612da16309 100644
--- a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultTableHandleMenu.tsx
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/DefaultTableHandleMenu.tsx
@@ -1,5 +1,7 @@
 import { DefaultBlockSchema } from "@blocknote/core";
-import { TableHandleMenu, TableHandleMenuProps } from "./TableHandleMenu";
+
+import { TableHandleMenuProps } from "../TableHandleMenuProps";
+import { TableHandleMenu } from "./TableHandleMenu";
 import { AddButton } from "./DefaultButtons/AddButton";
 import { DeleteButton } from "./DefaultButtons/DeleteButton";
 
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/mantine/TableHandleMenu.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/TableHandleMenu.tsx
new file mode 100644
index 0000000000..9eca8eede9
--- /dev/null
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/TableHandleMenu.tsx
@@ -0,0 +1,8 @@
+import { Menu } from "@mantine/core";
+import { ReactNode } from "react";
+
+export const TableHandleMenu = (props: { children: ReactNode }) => (
+  <Menu.Dropdown className={"bn-table-handle-menu"}>
+    {props.children}
+  </Menu.Dropdown>
+);
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenuItem.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/mantine/TableHandleMenuItem.tsx
similarity index 100%
rename from packages/react/src/components/TableHandles/TableHandleMenu/TableHandleMenuItem.tsx
rename to packages/react/src/components/TableHandles/TableHandleMenu/mantine/TableHandleMenuItem.tsx
diff --git a/packages/react/src/components/TableHandles/TableHandleProps.ts b/packages/react/src/components/TableHandles/TableHandleProps.ts
new file mode 100644
index 0000000000..e37c7436ec
--- /dev/null
+++ b/packages/react/src/components/TableHandles/TableHandleProps.ts
@@ -0,0 +1,53 @@
+import {
+  BlockNoteEditor,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+  TableHandlesState,
+} from "@blocknote/core";
+import { DragEvent, FC } from "react";
+
+import { DragHandleMenuProps } from "../SideMenu/DragHandleMenu/DragHandleMenuProps";
+
+type NonUndefined<T> = T extends undefined ? never : T;
+
+export type TableHandleProps<
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+> = {
+  editor: BlockNoteEditor<
+    {
+      table: DefaultBlockSchema["table"];
+    },
+    I,
+    S
+  >;
+  orientation: "row" | "column";
+  index: number;
+  dragStart: (e: DragEvent<HTMLDivElement>) => void;
+  showOtherSide: () => void;
+  hideOtherSide: () => void;
+  tableHandleMenu?: FC<
+    DragHandleMenuProps<
+      {
+        table: DefaultBlockSchema["table"];
+      },
+      I,
+      S
+    >
+  >;
+} & Pick<TableHandlesState<I, S>, "block"> &
+  Pick<
+    NonUndefined<
+      BlockNoteEditor<
+        {
+          table: DefaultBlockSchema["table"];
+        },
+        I,
+        S
+      >["tableHandles"]
+    >,
+    "dragEnd" | "freezeHandles" | "unfreezeHandles"
+  >;
diff --git a/packages/react/src/components/TableHandles/DefaultPositionedTableHandles.tsx b/packages/react/src/components/TableHandles/TableHandlesController.tsx
similarity index 56%
rename from packages/react/src/components/TableHandles/DefaultPositionedTableHandles.tsx
rename to packages/react/src/components/TableHandles/TableHandlesController.tsx
index e7882af7c1..2e4553a3f9 100644
--- a/packages/react/src/components/TableHandles/DefaultPositionedTableHandles.tsx
+++ b/packages/react/src/components/TableHandles/TableHandlesController.tsx
@@ -1,55 +1,42 @@
 import {
-  BlockNoteEditor,
+  BlockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
-  TableHandlesState,
 } from "@blocknote/core";
-import { DragEvent, FC, useState } from "react";
+import { FC, useState } from "react";
 
-import { DragHandleMenuProps } from "../SideMenu/DragHandleMenu/DragHandleMenu";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor";
 import { useUIPluginState } from "../../hooks/useUIPluginState";
+import { TableHandleProps } from "./TableHandleProps";
 import { useTableHandlesPositioning } from "./hooks/useTableHandlesPositioning";
-import { DefaultTableHandle } from "./DefaultTableHandle";
-import { BlockSchemaWithTable } from "./BlockSchemaWithTable";
+import { TableHandle } from "./mantine/TableHandle";
 
-type NonUndefined<T> = T extends undefined ? never : T;
-
-export type TableHandleProps<
-  I extends InlineContentSchema = DefaultInlineContentSchema,
-  S extends StyleSchema = DefaultStyleSchema
-> = {
-  editor: BlockNoteEditor<BlockSchemaWithTable, I, S>;
-  orientation: "row" | "column";
-  index: number;
-  dragStart: (e: DragEvent<HTMLDivElement>) => void;
-  showOtherSide: () => void;
-  hideOtherSide: () => void;
-  tableHandleMenu?: FC<DragHandleMenuProps<BlockSchemaWithTable, I, S>>;
-} & Pick<TableHandlesState<I, S>, "block"> &
-  Pick<
-    NonUndefined<BlockNoteEditor<BlockSchemaWithTable, I, S>["tableHandles"]>,
-    "dragEnd" | "freezeHandles" | "unfreezeHandles"
-  >;
-
-export const DefaultPositionedTableHandles = <
+export const TableHandlesController = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
-  editor: BlockNoteEditor<BlockSchemaWithTable, I, S>;
   tableHandle?: FC<TableHandleProps<I, S>>;
 }) => {
+  const editor = useBlockNoteEditor<BlockSchema, I, S>();
+
+  if (!editor.tableHandles) {
+    throw new Error(
+      "TableHandlesController can only be used when BlockNote editor schema contains table block"
+    );
+  }
+
   const callbacks = {
-    rowDragStart: props.editor.tableHandles!.rowDragStart,
-    colDragStart: props.editor.tableHandles!.colDragStart,
-    dragEnd: props.editor.tableHandles!.dragEnd,
-    freezeHandles: props.editor.tableHandles!.freezeHandles,
-    unfreezeHandles: props.editor.tableHandles!.unfreezeHandles,
+    rowDragStart: editor.tableHandles.rowDragStart,
+    colDragStart: editor.tableHandles.colDragStart,
+    dragEnd: editor.tableHandles.dragEnd,
+    freezeHandles: editor.tableHandles.freezeHandles,
+    unfreezeHandles: editor.tableHandles.unfreezeHandles,
   };
 
   const state = useUIPluginState(
-    props.editor.tableHandles!.onUpdate.bind(props.editor.tableHandles)
+    editor.tableHandles.onUpdate.bind(editor.tableHandles)
   );
   const { rowHandle, colHandle } = useTableHandlesPositioning(
     state?.show || false,
@@ -62,9 +49,6 @@ export const DefaultPositionedTableHandles = <
         }
       : undefined
   );
-  console.log(state);
-  console.log(rowHandle);
-  console.log(colHandle);
 
   const [hideRow, setHideRow] = useState<boolean>(false);
   const [hideCol, setHideCol] = useState<boolean>(false);
@@ -73,15 +57,15 @@ export const DefaultPositionedTableHandles = <
     return null;
   }
 
-  const TableHandle = props.tableHandle || DefaultTableHandle;
+  const Component = props.tableHandle || TableHandle;
 
   return (
     <>
       {!hideRow && (
         <div ref={rowHandle.ref} style={rowHandle.style}>
-          <TableHandle
+          <Component
             // This "as any" unfortunately seems complicated to fix
-            editor={props.editor as any}
+            editor={editor as any}
             orientation={"row"}
             showOtherSide={() => setHideCol(false)}
             hideOtherSide={() => setHideCol(true)}
@@ -96,8 +80,8 @@ export const DefaultPositionedTableHandles = <
       )}
       {!hideCol && (
         <div ref={colHandle.ref} style={colHandle.style}>
-          <TableHandle
-            editor={props.editor as any}
+          <Component
+            editor={editor as any}
             orientation={"column"}
             showOtherSide={() => setHideRow(false)}
             hideOtherSide={() => setHideRow(true)}
diff --git a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
index 4f1406a81e..1c46a8f1a2 100644
--- a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
+++ b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
@@ -1,7 +1,7 @@
 import { offset, useFloating, useTransitionStyles } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "../../../components-shared/UiComponentTypes";
+import { UiComponentPosition } from "../../../hooks/UiComponentPosition";
 
 function getBoundingClientRectRow(
   referencePosCell: DOMRect | null,
diff --git a/packages/react/src/components/TableHandles/DefaultTableHandle.tsx b/packages/react/src/components/TableHandles/mantine/TableHandle.tsx
similarity index 65%
rename from packages/react/src/components/TableHandles/DefaultTableHandle.tsx
rename to packages/react/src/components/TableHandles/mantine/TableHandle.tsx
index c59aa7e031..ed8dd67835 100644
--- a/packages/react/src/components/TableHandles/DefaultTableHandle.tsx
+++ b/packages/react/src/components/TableHandles/mantine/TableHandle.tsx
@@ -5,16 +5,17 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 import { MdDragIndicator } from "react-icons/md";
-import { TableHandle } from "./TableHandle";
-import type { TableHandleProps } from "./DefaultPositionedTableHandles";
 
-export const DefaultTableHandle = <
+import { TableHandleProps } from "../TableHandleProps";
+import { TableHandleWrapper } from "./TableHandleWrapper";
+
+export const TableHandle = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(
   props: TableHandleProps<I, S>
 ) => (
-  <TableHandle {...props}>
+  <TableHandleWrapper {...props}>
     <MdDragIndicator size={24} data-test={"tableHandle"} />
-  </TableHandle>
+  </TableHandleWrapper>
 );
diff --git a/packages/react/src/components/TableHandles/TableHandle.tsx b/packages/react/src/components/TableHandles/mantine/TableHandleWrapper.tsx
similarity index 89%
rename from packages/react/src/components/TableHandles/TableHandle.tsx
rename to packages/react/src/components/TableHandles/mantine/TableHandleWrapper.tsx
index 555226ad7b..af89e03aae 100644
--- a/packages/react/src/components/TableHandles/TableHandle.tsx
+++ b/packages/react/src/components/TableHandles/mantine/TableHandleWrapper.tsx
@@ -8,10 +8,10 @@ import {
 import { Menu } from "@mantine/core";
 import { ReactNode, useState } from "react";
 
-import type { TableHandleProps } from "./DefaultPositionedTableHandles";
-import { DefaultTableHandleMenu } from "./TableHandleMenu/DefaultTableHandleMenu";
+import { TableHandleProps } from "../TableHandleProps";
+import { DefaultTableHandleMenu } from "../TableHandleMenu/mantine/DefaultTableHandleMenu";
 
-export const TableHandle = <
+export const TableHandleWrapper = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(
diff --git a/packages/react/src/components-shared/ColorPicker/ColorIcon.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx
similarity index 100%
rename from packages/react/src/components-shared/ColorPicker/ColorIcon.tsx
rename to packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx
diff --git a/packages/react/src/components-shared/ColorPicker/ColorPicker.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx
similarity index 100%
rename from packages/react/src/components-shared/ColorPicker/ColorPicker.tsx
rename to packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx
diff --git a/packages/react/src/components-shared/Toolbar/Toolbar.tsx b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/Toolbar.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
index 03b7bb97b4..1bdd7c6202 100644
--- a/packages/react/src/components-shared/Toolbar/Toolbar.tsx
+++ b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
@@ -1,6 +1,6 @@
+import { mergeCSSClasses } from "@blocknote/core";
 import { Group } from "@mantine/core";
 import { forwardRef, HTMLAttributes } from "react";
-import { mergeCSSClasses } from "@blocknote/core";
 
 export const Toolbar = forwardRef<
   HTMLDivElement,
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarButton.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
similarity index 93%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
index 41739565d0..d0f76e9649 100644
--- a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx
+++ b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
@@ -4,7 +4,7 @@ import {
   ToolbarDropdownItemProps,
 } from "./ToolbarDropdownItem";
 import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
-import { usePreventMenuOverflow } from "../../hooks/usePreventMenuOverflow";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export type ToolbarDropdownProps = {
   items: ToolbarDropdownItemProps[];
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx
diff --git a/packages/react/src/components-shared/Tooltip/TooltipContent.tsx b/packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx
similarity index 100%
rename from packages/react/src/components-shared/Tooltip/TooltipContent.tsx
rename to packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx
diff --git a/packages/react/src/editor/BlockNoteContext.ts b/packages/react/src/editor/BlockNoteContext.ts
index 5de44dc28b..f1e7e8b7f2 100644
--- a/packages/react/src/editor/BlockNoteContext.ts
+++ b/packages/react/src/editor/BlockNoteContext.ts
@@ -1,5 +1,6 @@
 import {
   BlockNoteEditor,
+  BlockNoteSchema,
   BlockSchema,
   DefaultBlockSchema,
   DefaultInlineContentSchema,
@@ -22,11 +23,17 @@ export const BlockNoteContext = createContext<
   BlockNoteContextValue | undefined
 >(undefined);
 
+/**
+ * Get the BlockNoteContext instance from the nearest BlockNoteContext provider
+ * @param _schema: optional, pass in the schema to return type-safe Context if you're using a custom schema
+ */
 export function useBlockNoteContext<
   BSchema extends BlockSchema = DefaultBlockSchema,
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
   SSchema extends StyleSchema = DefaultStyleSchema
->(): BlockNoteContextValue<BSchema, ISchema, SSchema> | undefined {
+>(
+  _schema?: BlockNoteSchema<BSchema, ISchema, SSchema>
+): BlockNoteContextValue<BSchema, ISchema, SSchema> | undefined {
   const context = useContext(BlockNoteContext) as any;
 
   return context;
diff --git a/packages/react/src/editor/BlockNoteDefaultUI.tsx b/packages/react/src/editor/BlockNoteDefaultUI.tsx
index 8f61af2b04..df74cc0b45 100644
--- a/packages/react/src/editor/BlockNoteDefaultUI.tsx
+++ b/packages/react/src/editor/BlockNoteDefaultUI.tsx
@@ -1,12 +1,12 @@
 import { filterSuggestionItems } from "@blocknote/core";
-import { DefaultPositionedFormattingToolbar } from "../components/FormattingToolbar/DefaultPositionedFormattingToolbar";
-import { DefaultPositionedHyperlinkToolbar } from "../components/HyperlinkToolbar/DefaultPositionedHyperlinkToolbar";
-import { DefaultPositionedImageToolbar } from "../components/ImageToolbar/DefaultPositionedImageToolbar";
-import { DefaultPositionedSideMenu } from "../components/SideMenu/DefaultPositionedSideMenu";
-import { DefaultPositionedSuggestionMenu } from "../components/SuggestionMenu/DefaultPositionedSuggestionMenu";
-import { getDefaultReactSlashMenuItems } from "../components/SuggestionMenu/defaultReactSlashMenuItems";
-import { DefaultPositionedTableHandles } from "../components/TableHandles/DefaultPositionedTableHandles";
-import { useBlockNoteContext } from "./BlockNoteContext";
+import { FormattingToolbarController } from "../components/FormattingToolbar/FormattingToolbarController";
+import { HyperlinkToolbarController } from "../components/HyperlinkToolbar/HyperlinkToolbarController";
+import { ImageToolbarController } from "../components/ImageToolbar/ImageToolbarController";
+import { SideMenuController } from "../components/SideMenu/SideMenuController";
+import { getDefaultReactSlashMenuItems } from "../components/SuggestionMenu/getDefaultReactSlashMenuItems";
+import { SuggestionMenuController } from "../components/SuggestionMenu/SuggestionMenuController";
+import { TableHandlesController } from "../components/TableHandles/TableHandlesController";
+import { useBlockNoteEditor } from "../hooks/useBlockNoteEditor";
 
 export type BlockNoteDefaultUIProps = {
   formattingToolbar?: boolean;
@@ -18,7 +18,7 @@ export type BlockNoteDefaultUIProps = {
 };
 
 export function BlockNoteDefaultUI(props: BlockNoteDefaultUIProps) {
-  const editor = useBlockNoteContext()?.editor;
+  const editor = useBlockNoteEditor();
 
   if (!editor) {
     throw new Error(
@@ -26,36 +26,28 @@ export function BlockNoteDefaultUI(props: BlockNoteDefaultUIProps) {
     );
   }
 
-  // TODO also remove editor passing to each component, use context
   return (
     <>
-      {props.formattingToolbar !== false && (
-        <DefaultPositionedFormattingToolbar editor={editor} />
-      )}
-      {props.hyperlinkToolbar !== false && (
-        <DefaultPositionedHyperlinkToolbar editor={editor} />
-      )}
+      {props.formattingToolbar !== false && <FormattingToolbarController />}
+      {props.hyperlinkToolbar !== false && <HyperlinkToolbarController />}
       {props.slashMenu !== false && (
-        <DefaultPositionedSuggestionMenu
-          editor={editor}
+        <SuggestionMenuController
           getItems={async (query) =>
-            filterSuggestionItems(getDefaultReactSlashMenuItems(), query)
+            filterSuggestionItems(getDefaultReactSlashMenuItems(editor), query)
           }
           // suggestionMenuComponent={MantineSuggestionMenu}
           onItemClick={(item) => {
-            item.onItemClick(editor);
+            item.onItemClick();
           }}
           triggerCharacter="/"
         />
       )}
-      {props.sideMenu !== false && (
-        <DefaultPositionedSideMenu editor={editor} />
-      )}
-      {props.imageToolbar !== false && (
-        <DefaultPositionedImageToolbar editor={editor} />
+      {props.sideMenu !== false && <SideMenuController />}
+      {editor.imageToolbar && props.imageToolbar !== false && (
+        <ImageToolbarController />
       )}
-      {editor.blockSchema.table && props.tableHandles !== false && (
-        <DefaultPositionedTableHandles editor={editor as any} />
+      {editor.tableHandles && props.tableHandles !== false && (
+        <TableHandlesController />
       )}
     </>
   );
diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx
index b33d147b7e..764159418a 100644
--- a/packages/react/src/editor/BlockNoteView.tsx
+++ b/packages/react/src/editor/BlockNoteView.tsx
@@ -38,7 +38,7 @@ const mantineTheme = {
   activeClassName: "",
 };
 
-const emptyFn = (_editor: any) => {
+const emptyFn = () => {
   // noop
 };
 
@@ -65,14 +65,12 @@ function BlockNoteViewComponent<
     /**
      * A callback function that runs whenever the text cursor position or selection changes.
      */
-    onSelectionChange?: (
-      editor: BlockNoteEditor<BSchema, ISchema, SSchema>
-    ) => void;
+    onSelectionChange?: () => void;
 
     /**
      * A callback function that runs whenever the editor's contents change.
      */
-    onChange?: (editor: BlockNoteEditor<BSchema, ISchema, SSchema>) => void;
+    onChange?: () => void;
 
     children?: ReactNode;
 
@@ -156,11 +154,7 @@ function BlockNoteViewComponent<
   useEditorSelectionChange(onSelectionChange || emptyFn, editor);
 
   useEffect(() => {
-    if (editable === false) {
-      editor.isEditable = false;
-    } else {
-      editor.isEditable = true;
-    }
+    editor.isEditable = editable !== false;
   }, [editable, editor]);
 
   const renderChildren = useMemo(() => {
diff --git a/packages/react/src/hooks/UiComponentPosition.ts b/packages/react/src/hooks/UiComponentPosition.ts
new file mode 100644
index 0000000000..d2f5a18dce
--- /dev/null
+++ b/packages/react/src/hooks/UiComponentPosition.ts
@@ -0,0 +1,7 @@
+import { CSSProperties } from "react";
+
+export type UiComponentPosition = {
+  isMounted: boolean;
+  ref: (node: HTMLElement | null) => void;
+  style: CSSProperties;
+};
diff --git a/packages/react/src/hooks/useActiveStyles.ts b/packages/react/src/hooks/useActiveStyles.ts
index b53a3a26e8..57cc360bb5 100644
--- a/packages/react/src/hooks/useActiveStyles.ts
+++ b/packages/react/src/hooks/useActiveStyles.ts
@@ -1,22 +1,37 @@
 import { BlockNoteEditor, StyleSchema } from "@blocknote/core";
+
 import { useState } from "react";
+import { useBlockNoteContext } from "../editor/BlockNoteContext";
 import { useEditorChange } from "./useEditorChange";
 import { useEditorSelectionChange } from "./useEditorSelectionChange";
 
 export function useActiveStyles<T extends StyleSchema>(
-  editor: BlockNoteEditor<any, any, T>
+  editor?: BlockNoteEditor<any, any, T>
 ) {
-  const [styles, setStyles] = useState(() => editor.getActiveStyles());
+  const editorContext = useBlockNoteContext<any, any, T>();
+  if (!editor) {
+    editor = editorContext?.editor;
+  }
+
+  if (!editor) {
+    throw new Error(
+      "'editor' is required, either from BlockNoteContext or as a function argument"
+    );
+  }
+
+  const e = editor;
+
+  const [styles, setStyles] = useState(() => e.getActiveStyles());
 
   // Updates state on editor content change.
-  useEditorChange((editor) => {
-    setStyles(editor.getActiveStyles());
-  }, editor);
+  useEditorChange(() => {
+    setStyles(e.getActiveStyles());
+  }, e);
 
   // Updates state on selection change.
   useEditorSelectionChange(() => {
-    setStyles(editor.getActiveStyles());
-  }, editor);
+    setStyles(e.getActiveStyles());
+  }, e);
 
   return styles;
 }
diff --git a/packages/react/src/hooks/useBlockNote.ts b/packages/react/src/hooks/useBlockNote.ts
deleted file mode 100644
index 1a1608ab1f..0000000000
--- a/packages/react/src/hooks/useBlockNote.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  BlockNoteEditor,
-  BlockNoteEditorOptions,
-  BlockSpecs,
-  InlineContentSpecs,
-  StyleSpecs,
-  defaultBlockSpecs,
-  defaultInlineContentSpecs,
-  defaultStyleSpecs,
-} from "@blocknote/core";
-import { DependencyList, useMemo } from "react";
-
-// TODO: document in docs
-export const createBlockNoteEditor = <
-  BSpecs extends BlockSpecs,
-  ISpecs extends InlineContentSpecs,
-  SSpecs extends StyleSpecs
->(
-  options: Partial<BlockNoteEditorOptions<BSpecs, ISpecs, SSpecs>>
-) => BlockNoteEditor.create(options);
-
-/**
- * Main hook for importing a BlockNote editor into a React project
- *
- * TODO: document in docs
- */
-export const useBlockNote = <
-  BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
-  ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
-  SSpecs extends StyleSpecs = typeof defaultStyleSpecs
->(
-  options: Partial<BlockNoteEditorOptions<BSpecs, ISpecs, SSpecs>> = {},
-  deps: DependencyList = []
-) => {
-  return useMemo(() => {
-    const editor = createBlockNoteEditor(options);
-    if (window) {
-      // for testing / dev purposes
-      (window as any).ProseMirror = editor._tiptapEditor;
-    }
-    return editor;
-  }, deps); //eslint-disable-line react-hooks/exhaustive-deps
-};
diff --git a/packages/react/src/hooks/useBlockNoteEditor.ts b/packages/react/src/hooks/useBlockNoteEditor.ts
new file mode 100644
index 0000000000..67a59754d0
--- /dev/null
+++ b/packages/react/src/hooks/useBlockNoteEditor.ts
@@ -0,0 +1,34 @@
+import {
+  BlockNoteEditor,
+  BlockNoteSchema,
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+
+import { useBlockNoteContext } from "../editor/BlockNoteContext";
+
+/**
+ * Get the BlockNoteEditor instance from the nearest BlockNoteContext provider
+ * @param _schema: optional, pass in the schema to return type-safe BlockNoteEditor if you're using a custom schema
+ */
+export function useBlockNoteEditor<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema
+>(
+  _schema?: BlockNoteSchema<BSchema, ISchema, SSchema>
+): BlockNoteEditor<BSchema, ISchema, SSchema> {
+  const context = useBlockNoteContext(_schema);
+
+  if (!context?.editor) {
+    throw new Error(
+      "useBlockNoteEditor was called outside of a BlockNoteContext provider or BlockNoteView component"
+    );
+  }
+
+  return context.editor;
+}
diff --git a/packages/react/src/hooks/useCreateBlockNote.ts b/packages/react/src/hooks/useCreateBlockNote.ts
new file mode 100644
index 0000000000..4183922e87
--- /dev/null
+++ b/packages/react/src/hooks/useCreateBlockNote.ts
@@ -0,0 +1,39 @@
+import {
+  BlockNoteEditor,
+  BlockNoteEditorOptions,
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { DependencyList, useMemo } from "react";
+
+/**
+ * Main hook for importing a BlockNote editor into a React project
+ *
+ * TODO: document in docs
+ */
+export const useCreateBlockNote = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema
+>(
+  options: Partial<BlockNoteEditorOptions<BSchema, ISchema, SSchema>> = {},
+  deps: DependencyList = []
+) => {
+  return useMemo(() => {
+    const editor = BlockNoteEditor.create<BSchema, ISchema, SSchema>(options);
+    if (window) {
+      // for testing / dev purposes
+      (window as any).ProseMirror = editor._tiptapEditor;
+    }
+    return editor;
+  }, deps); //eslint-disable-line react-hooks/exhaustive-deps
+};
+
+/**
+ * @deprecated use useCreateBlockNote instead
+ */
+export const useBlockNote = useCreateBlockNote;
diff --git a/packages/react/src/hooks/useEditorChange.ts b/packages/react/src/hooks/useEditorChange.ts
index d4e81f8114..5275ea3980 100644
--- a/packages/react/src/hooks/useEditorChange.ts
+++ b/packages/react/src/hooks/useEditorChange.ts
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useBlockNoteContext } from "../editor/BlockNoteContext";
 
 export function useEditorChange(
-  callback: (editor: BlockNoteEditor<any, any, any>) => void,
+  callback: () => void,
   editor?: BlockNoteEditor<any, any, any>
 ) {
   const editorContext = useBlockNoteContext();
diff --git a/packages/react/src/hooks/useEditorContentOrSelectionChange.ts b/packages/react/src/hooks/useEditorContentOrSelectionChange.ts
index ca48c68fb9..f38e01a670 100644
--- a/packages/react/src/hooks/useEditorContentOrSelectionChange.ts
+++ b/packages/react/src/hooks/useEditorContentOrSelectionChange.ts
@@ -3,7 +3,7 @@ import { useEditorChange } from "./useEditorChange";
 import { useEditorSelectionChange } from "./useEditorSelectionChange";
 
 export function useEditorContentOrSelectionChange(
-  callback: (editor: BlockNoteEditor<any, any, any>) => void,
+  callback: () => void,
   editor?: BlockNoteEditor<any, any, any>
 ) {
   useEditorChange(callback, editor);
diff --git a/packages/react/src/hooks/useEditorSelectionChange.ts b/packages/react/src/hooks/useEditorSelectionChange.ts
index ff9d298bd9..bfadf27752 100644
--- a/packages/react/src/hooks/useEditorSelectionChange.ts
+++ b/packages/react/src/hooks/useEditorSelectionChange.ts
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useBlockNoteContext } from "../editor/BlockNoteContext";
 
 export function useEditorSelectionChange(
-  callback: (editor: BlockNoteEditor<any, any, any>) => void,
+  callback: () => void,
   editor?: BlockNoteEditor<any, any, any>
 ) {
   const editorContext = useBlockNoteContext();
diff --git a/packages/react/src/hooks/useUIElementPositioning.ts b/packages/react/src/hooks/useUIElementPositioning.ts
index d691063120..51e0fffab1 100644
--- a/packages/react/src/hooks/useUIElementPositioning.ts
+++ b/packages/react/src/hooks/useUIElementPositioning.ts
@@ -5,7 +5,7 @@ import {
 } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "../components-shared/UiComponentTypes";
+import { UiComponentPosition } from "./UiComponentPosition";
 
 export function useUIElementPositioning(
   show: boolean,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ef21b5544a..c73cb3abe8 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -5,55 +5,60 @@ export * from "./editor/BlockNoteTheme";
 export * from "./editor/BlockNoteView";
 export * from "./editor/defaultThemes";
 
-export * from "./components/FormattingToolbar/DefaultButtons/ColorStyleButton";
-export * from "./components/FormattingToolbar/DefaultButtons/CreateLinkButton";
-export * from "./components/FormattingToolbar/DefaultButtons/ImageCaptionButton";
-export * from "./components/FormattingToolbar/DefaultButtons/NestBlockButtons";
-export * from "./components/FormattingToolbar/DefaultButtons/ReplaceImageButton";
-export * from "./components/FormattingToolbar/DefaultButtons/TextAlignButton";
-export * from "./components/FormattingToolbar/DefaultButtons/ToggledStyleButton";
-export * from "./components/FormattingToolbar/DefaultDropdowns/BlockTypeDropdown";
-export * from "./components/FormattingToolbar/DefaultFormattingToolbar";
-export * from "./components/FormattingToolbar/DefaultPositionedFormattingToolbar";
+export * from "./components/FormattingToolbar/FormattingToolbarController";
+export * from "./components/FormattingToolbar/FormattingToolbarProps";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton";
+export * from "./components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown";
+export * from "./components/FormattingToolbar/mantine/FormattingToolbar";
 
-export * from "./components/HyperlinkToolbar/DefaultHyperlinkToolbar";
-export * from "./components/HyperlinkToolbar/DefaultPositionedHyperlinkToolbar";
+export * from "./components/HyperlinkToolbar/HyperlinkToolbarController";
+export * from "./components/HyperlinkToolbar/HyperlinkToolbarProps";
+export * from "./components/HyperlinkToolbar/mantine/HyperlinkToolbar";
 
-export * from "./components/SideMenu/DefaultButtons/AddBlockButton";
-export * from "./components/SideMenu/DefaultButtons/DragHandle";
-export * from "./components/SideMenu/DefaultPositionedSideMenu";
-export * from "./components/SideMenu/DefaultSideMenu";
-export * from "./components/SideMenu/SideMenu";
-export * from "./components/SideMenu/SideMenuButton";
+export * from "./components/SideMenu/SideMenuController";
+export * from "./components/SideMenu/SideMenuProps";
+export * from "./components/SideMenu/mantine/DefaultButtons/AddBlockButton";
+export * from "./components/SideMenu/mantine/DefaultButtons/DragHandleButton";
+export * from "./components/SideMenu/mantine/SideMenu";
+export * from "./components/SideMenu/mantine/SideMenuButton";
 
-export * from "./components/SideMenu/DragHandleMenu/DefaultButtons/BlockColorsButton";
-export * from "./components/SideMenu/DragHandleMenu/DefaultButtons/RemoveBlockButton";
-export * from "./components/SideMenu/DragHandleMenu/DefaultDragHandleMenu";
-export * from "./components/SideMenu/DragHandleMenu/DragHandleMenu";
-export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuItem";
+export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuProps";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultItems/BlockColorsItem";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultItems/RemoveBlockItem";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenu";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem";
 
-export * from "./components/SuggestionMenu/DefaultPositionedSuggestionMenu";
-export * from "./components/SuggestionMenu/DefaultSuggestionMenu";
-export * from "./components/SuggestionMenu/defaultReactSlashMenuItems";
+export * from "./components/SuggestionMenu/SuggestionMenuController";
+export * from "./components/SuggestionMenu/SuggestionMenuWrapper";
+export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems";
 export * from "./components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems";
 export * from "./components/SuggestionMenu/hooks/useLoadSuggestionMenuItems";
 export * from "./components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation";
-export * from "./components/SuggestionMenu/mantine/MantineSuggestionMenu";
-export * from "./components/SuggestionMenu/mantine/MantineSuggestionMenuItem";
+export * from "./components/SuggestionMenu/mantine/SuggestionMenu";
+export * from "./components/SuggestionMenu/mantine/SuggestionMenuItem";
+export * from "./components/SuggestionMenu/types";
 
-export * from "./components/ImageToolbar/DefaultImageToolbar";
-export * from "./components/ImageToolbar/DefaultPositionedImageToolbar";
+export * from "./components/ImageToolbar/ImageToolbarController";
+export * from "./components/ImageToolbar/ImageToolbarProps";
+export * from "./components/ImageToolbar/mantine/ImageToolbar";
 
-export * from "./components/TableHandles/DefaultPositionedTableHandles";
-export * from "./components/TableHandles/DefaultTableHandle";
+export * from "./components/TableHandles/TableHandleProps";
+export * from "./components/TableHandles/TableHandlesController";
 export * from "./components/TableHandles/hooks/useTableHandlesPositioning";
+export * from "./components/TableHandles/mantine/TableHandle";
 
-export * from "./components-shared/Toolbar/Toolbar";
-export * from "./components-shared/Toolbar/ToolbarButton";
-export * from "./components-shared/Toolbar/ToolbarDropdown";
+export * from "./components/mantine-shared/Toolbar/ToolbarButton";
+export * from "./components/mantine-shared/Toolbar/ToolbarDropdown";
 
 export * from "./hooks/useActiveStyles";
-export * from "./hooks/useBlockNote";
+export * from "./hooks/useBlockNoteEditor";
+export * from "./hooks/useCreateBlockNote";
 export * from "./hooks/useEditorChange";
 export * from "./hooks/useEditorContentOrSelectionChange";
 export * from "./hooks/useEditorForceUpdate";
diff --git a/packages/react/src/schema/ReactInlineContentSpec.tsx b/packages/react/src/schema/ReactInlineContentSpec.tsx
index f8f8318ed1..aa6627c578 100644
--- a/packages/react/src/schema/ReactInlineContentSpec.tsx
+++ b/packages/react/src/schema/ReactInlineContentSpec.tsx
@@ -114,8 +114,8 @@ export function createReactInlineContentSpec<
 
       const ic = nodeToCustomInlineContent(
         node,
-        editor.inlineContentSchema,
-        editor.styleSchema
+        editor.schema.inlineContentSchema,
+        editor.schema.styleSchema
       ) as any as InlineContentFromConfig<T, S>; // TODO: fix cast
       const Content = inlineContentImplementation.render;
       const output = renderToDOMSpec((refCB) => (
@@ -147,8 +147,8 @@ export function createReactInlineContentSpec<
                 inlineContent={
                   nodeToCustomInlineContent(
                     props.node,
-                    editor.inlineContentSchema,
-                    editor.styleSchema
+                    editor.schema.inlineContentSchema,
+                    editor.schema.styleSchema
                   ) as any as InlineContentFromConfig<T, S> // TODO: fix cast
                 }
               />,
diff --git a/packages/react/src/test/htmlConversion.test.tsx b/packages/react/src/test/htmlConversion.test.tsx
index 08c01088db..4377b7acb6 100644
--- a/packages/react/src/test/htmlConversion.test.tsx
+++ b/packages/react/src/test/htmlConversion.test.tsx
@@ -43,7 +43,7 @@ async function convertToHTMLAndCompareSnapshots<
 
   // turn the internalHTML back into blocks, and make sure no data was lost
   const fullBlocks = partialBlocksToBlocksForTesting(
-    editor.blockSchema,
+    editor.schema.blockSchema,
     blocks
   );
   const parsed = await editor.tryParseHTMLToBlocks(internalHTML);
diff --git a/packages/react/src/test/nodeConversion.test.tsx b/packages/react/src/test/nodeConversion.test.tsx
index 6c48f557a4..40e8d926ed 100644
--- a/packages/react/src/test/nodeConversion.test.tsx
+++ b/packages/react/src/test/nodeConversion.test.tsx
@@ -29,20 +29,20 @@ function validateConversion(
   const node = blockToNode(
     block,
     editor._tiptapEditor.schema,
-    editor.styleSchema
+    editor.schema.styleSchema
   );
 
   expect(node).toMatchSnapshot();
 
   const outputBlock = nodeToBlock(
     node,
-    editor.blockSchema,
-    editor.inlineContentSchema,
-    editor.styleSchema
+    editor.schema.blockSchema,
+    editor.schema.inlineContentSchema,
+    editor.schema.styleSchema
   );
 
   const fullOriginalBlock = partialBlockToBlockForTesting(
-    editor.blockSchema,
+    editor.schema.blockSchema,
     block
   );
 
diff --git a/packages/react/src/test/testCases/customReactBlocks.tsx b/packages/react/src/test/testCases/customReactBlocks.tsx
index c93beab64d..0d900420e3 100644
--- a/packages/react/src/test/testCases/customReactBlocks.tsx
+++ b/packages/react/src/test/testCases/customReactBlocks.tsx
@@ -1,7 +1,6 @@
 import {
   BlockNoteEditor,
-  BlockSchemaFromSpecs,
-  BlockSpecs,
+  BlockNoteSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   EditorTestCases,
@@ -13,7 +12,7 @@ import { createReactBlockSpec } from "../../schema/ReactBlockSpec";
 
 const ReactCustomParagraph = createReactBlockSpec(
   {
-    type: "reactCustomParagraph" as const,
+    type: "reactCustomParagraph",
     propSchema: defaultProps,
     content: "inline",
   },
@@ -29,7 +28,7 @@ const ReactCustomParagraph = createReactBlockSpec(
 
 const SimpleReactCustomParagraph = createReactBlockSpec(
   {
-    type: "simpleReactCustomParagraph" as const,
+    type: "simpleReactCustomParagraph",
     propSchema: defaultProps,
     content: "inline",
   },
@@ -40,21 +39,23 @@ const SimpleReactCustomParagraph = createReactBlockSpec(
   }
 );
 
-const customSpecs = {
-  ...defaultBlockSpecs,
-  reactCustomParagraph: ReactCustomParagraph,
-  simpleReactCustomParagraph: SimpleReactCustomParagraph,
-} satisfies BlockSpecs;
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    reactCustomParagraph: ReactCustomParagraph,
+    simpleReactCustomParagraph: SimpleReactCustomParagraph,
+  },
+});
 
 export const customReactBlockSchemaTestCases: EditorTestCases<
-  BlockSchemaFromSpecs<typeof customSpecs>,
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom react block schema",
   createEditor: () => {
     return BlockNoteEditor.create({
-      blockSpecs: customSpecs,
+      schema,
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
     });
   },
diff --git a/packages/react/src/test/testCases/customReactInlineContent.tsx b/packages/react/src/test/testCases/customReactInlineContent.tsx
index f211c45236..4d38a39756 100644
--- a/packages/react/src/test/testCases/customReactInlineContent.tsx
+++ b/packages/react/src/test/testCases/customReactInlineContent.tsx
@@ -1,10 +1,9 @@
 import {
   BlockNoteEditor,
+  BlockNoteSchema,
   DefaultBlockSchema,
   DefaultStyleSchema,
   EditorTestCases,
-  InlineContentSchemaFromSpecs,
-  InlineContentSpecs,
   defaultInlineContentSpecs,
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
@@ -44,22 +43,24 @@ const tag = createReactInlineContentSpec(
   }
 );
 
-const customReactInlineContent = {
-  ...defaultInlineContentSpecs,
-  tag,
-  mention,
-} satisfies InlineContentSpecs;
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    tag,
+    mention,
+  },
+});
 
 export const customReactInlineContentTestCases: EditorTestCases<
   DefaultBlockSchema,
-  InlineContentSchemaFromSpecs<typeof customReactInlineContent>,
+  typeof schema.inlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom react inline content schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      inlineContentSpecs: customReactInlineContent,
+      schema,
     });
   },
   documents: [
@@ -71,12 +72,12 @@ export const customReactInlineContentTestCases: EditorTestCases<
           content: [
             "I enjoy working with ",
             {
-              type: "mention",
+              type: "mentdfion",
               props: {
                 user: "Matthew",
               },
               content: undefined,
-            } as any,
+            } as const,
           ],
         },
       ],
@@ -92,7 +93,7 @@ export const customReactInlineContentTestCases: EditorTestCases<
               type: "tag",
               // props: {},
               content: "BlockNote",
-            } as any,
+            } as const,
           ],
         },
       ],
diff --git a/packages/react/src/test/testCases/customReactStyles.tsx b/packages/react/src/test/testCases/customReactStyles.tsx
index 0992b791a4..7fcca2c985 100644
--- a/packages/react/src/test/testCases/customReactStyles.tsx
+++ b/packages/react/src/test/testCases/customReactStyles.tsx
@@ -3,11 +3,10 @@ import {
   DefaultBlockSchema,
   DefaultInlineContentSchema,
   EditorTestCases,
-  StyleSchemaFromSpecs,
-  StyleSpecs,
   defaultStyleSpecs,
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
+import { BlockNoteSchema } from "@blocknote/core/src/editor/BlockNoteSchema";
 import { createReactStyleSpec } from "../../schema/ReactStyleSpec";
 
 const small = createReactStyleSpec(
@@ -36,22 +35,24 @@ const fontSize = createReactStyleSpec(
   }
 );
 
-const customReactStyles = {
-  ...defaultStyleSpecs,
-  small,
-  fontSize,
-} satisfies StyleSpecs;
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    small,
+    fontSize,
+  },
+});
 
 export const customReactStylesTestCases: EditorTestCases<
   DefaultBlockSchema,
   DefaultInlineContentSchema,
-  StyleSchemaFromSpecs<typeof customReactStyles>
+  typeof schema.styleSchema
 > = {
   name: "custom react style schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      styleSpecs: customReactStyles,
+      schema,
     });
   },
   documents: [
diff --git a/playground/package.json b/playground/package.json
index 4f2b098e2c..a108a5c0a7 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@blocknote/core": "^0.11.2",
     "@blocknote/react": "^0.11.2",
-    "@mantine/core": "^7.4.2",
+    "@mantine/core": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 1656f1d339..2418e33558 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -53,9 +53,10 @@
         "pathFromRoot": "examples/01-basic/04-saving-loading",
         "config": {
           "playground": true,
-          "docs": true
+          "docs": true,
+          "shortTitle": "Saving & Loading"
         },
-        "title": "Saving & Loading",
+        "title": "Saving & Loading data",
         "group": {
           "pathFromRoot": "examples/01-basic",
           "slug": "basic"
@@ -88,6 +89,48 @@
           "pathFromRoot": "examples/01-basic",
           "slug": "basic"
         }
+      },
+      {
+        "projectSlug": "all-blocks",
+        "fullSlug": "basic/all-blocks",
+        "pathFromRoot": "examples/01-basic/all-blocks",
+        "config": {
+          "playground": true,
+          "docs": true
+        },
+        "title": "All Block Types",
+        "group": {
+          "pathFromRoot": "examples/01-basic",
+          "slug": "basic"
+        }
+      },
+      {
+        "projectSlug": "all-inline-content",
+        "fullSlug": "basic/all-inline-content",
+        "pathFromRoot": "examples/01-basic/all-inline-content",
+        "config": {
+          "playground": true,
+          "docs": true
+        },
+        "title": "All Inline Content Types",
+        "group": {
+          "pathFromRoot": "examples/01-basic",
+          "slug": "basic"
+        }
+      },
+      {
+        "projectSlug": "inline-content-objects",
+        "fullSlug": "basic/inline-content-objects",
+        "pathFromRoot": "examples/01-basic/inline-content-objects",
+        "config": {
+          "playground": true,
+          "docs": true
+        },
+        "title": "Displaying Inline Content Objects",
+        "group": {
+          "pathFromRoot": "examples/01-basic",
+          "slug": "basic"
+        }
       }
     ]
   },
@@ -106,7 +149,8 @@
           "group": "Advanced Examples",
           "order": 1,
           "dependencies": {
-            "@mantine/core": "^7.4.2"
+            "@mantine/core": "^7.5.0",
+            "react-icons": "^4.3.1"
           }
         },
         "title": "Making UI Elements From Scratch",
@@ -115,6 +159,25 @@
           "slug": "ui-components"
         }
       },
+      {
+        "projectSlug": "formatting-toolbar-block-type-items",
+        "fullSlug": "ui-components/formatting-toolbar-block-type-items",
+        "pathFromRoot": "examples/02-ui-components/formatting-toolbar-block-type-items",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "group": "Basic Examples",
+          "order": 1,
+          "dependencies": {
+            "react-icons": "^4.3.1"
+          }
+        },
+        "title": "Adding Block Type Dropdown Items",
+        "group": {
+          "pathFromRoot": "examples/02-ui-components",
+          "slug": "ui-components"
+        }
+      },
       {
         "projectSlug": "formatting-toolbar-buttons",
         "fullSlug": "ui-components/formatting-toolbar-buttons",
@@ -131,6 +194,22 @@
           "slug": "ui-components"
         }
       },
+      {
+        "projectSlug": "hyperlink-toolbar-buttons",
+        "fullSlug": "ui-components/hyperlink-toolbar-buttons",
+        "pathFromRoot": "examples/02-ui-components/hyperlink-toolbar-buttons",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "group": "Basic Examples",
+          "order": 1
+        },
+        "title": "Adding Hyperlink Toolbar Buttons",
+        "group": {
+          "pathFromRoot": "examples/02-ui-components",
+          "slug": "ui-components"
+        }
+      },
       {
         "projectSlug": "side-menu-buttons",
         "fullSlug": "ui-components/side-menu-buttons",
@@ -144,7 +223,7 @@
             "react-icons": "^4.3.1"
           }
         },
-        "title": "Adding Side Menu Buttons",
+        "title": "Adding Block Side Menu Buttons",
         "group": {
           "pathFromRoot": "examples/02-ui-components",
           "slug": "ui-components"
@@ -170,9 +249,41 @@
         }
       },
       {
-        "projectSlug": "slash-menu-items",
-        "fullSlug": "ui-components/slash-menu-items",
-        "pathFromRoot": "examples/02-ui-components/slash-menu-items",
+        "projectSlug": "suggestion-menus-mentions",
+        "fullSlug": "ui-components/suggestion-menus-mentions",
+        "pathFromRoot": "examples/02-ui-components/suggestion-menus-mentions",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "group": "Basic Examples",
+          "order": 1
+        },
+        "title": "Adding Suggestion Menu",
+        "group": {
+          "pathFromRoot": "examples/02-ui-components",
+          "slug": "ui-components"
+        }
+      },
+      {
+        "projectSlug": "suggestion-menus-slash-menu-component",
+        "fullSlug": "ui-components/suggestion-menus-slash-menu-component",
+        "pathFromRoot": "examples/02-ui-components/suggestion-menus-slash-menu-component",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "group": "Basic Examples",
+          "order": 1
+        },
+        "title": "Replacing Slash Menu Component",
+        "group": {
+          "pathFromRoot": "examples/02-ui-components",
+          "slug": "ui-components"
+        }
+      },
+      {
+        "projectSlug": "suggestion-menus-slash-menu-items",
+        "fullSlug": "ui-components/suggestion-menus-slash-menu-items",
+        "pathFromRoot": "examples/02-ui-components/suggestion-menus-slash-menu-items",
         "config": {
           "playground": true,
           "docs": true,
@@ -191,14 +302,14 @@
     ]
   },
   "theming": {
-    "pathFromRoot": "examples/04-theming",
+    "pathFromRoot": "examples/03-theming",
     "slug": "theming",
     "title": "Theming",
     "projects": [
       {
         "projectSlug": "changing-font",
         "fullSlug": "theming/changing-font",
-        "pathFromRoot": "examples/04-theming/changing-font",
+        "pathFromRoot": "examples/03-theming/changing-font",
         "config": {
           "playground": true,
           "docs": true,
@@ -207,21 +318,21 @@
         },
         "title": "Changing Font",
         "group": {
-          "pathFromRoot": "examples/04-theming",
+          "pathFromRoot": "examples/03-theming",
           "slug": "theming"
         }
       }
     ]
   },
   "cursor-selections": {
-    "pathFromRoot": "examples/05-cursor-selections",
+    "pathFromRoot": "examples/04-cursor-selections",
     "slug": "cursor-selections",
     "title": "Cursors & selections",
     "projects": [
       {
         "projectSlug": "selection-blocks",
         "fullSlug": "cursor-selections/selection-blocks",
-        "pathFromRoot": "examples/05-cursor-selections/selection-blocks",
+        "pathFromRoot": "examples/04-cursor-selections/selection-blocks",
         "config": {
           "playground": true,
           "docs": false,
@@ -230,14 +341,14 @@
         },
         "title": "Highlighting Blocks in Selection",
         "group": {
-          "pathFromRoot": "examples/05-cursor-selections",
+          "pathFromRoot": "examples/04-cursor-selections",
           "slug": "cursor-selections"
         }
       },
       {
         "projectSlug": "text-cursor-block",
         "fullSlug": "cursor-selections/text-cursor-block",
-        "pathFromRoot": "examples/05-cursor-selections/text-cursor-block",
+        "pathFromRoot": "examples/04-cursor-selections/text-cursor-block",
         "config": {
           "playground": true,
           "docs": false,
@@ -246,41 +357,57 @@
         },
         "title": "Highlighting Block with the Text Cursor",
         "group": {
-          "pathFromRoot": "examples/05-cursor-selections",
+          "pathFromRoot": "examples/04-cursor-selections",
           "slug": "cursor-selections"
         }
       }
     ]
   },
   "custom-schema": {
-    "pathFromRoot": "examples/06-custom-schema",
+    "pathFromRoot": "examples/05-custom-schema",
     "slug": "custom-schema",
     "title": "Custom schemas",
     "projects": [
       {
         "projectSlug": "alert-block",
         "fullSlug": "custom-schema/alert-block",
-        "pathFromRoot": "examples/06-custom-schema/alert-block",
+        "pathFromRoot": "examples/05-custom-schema/alert-block",
         "config": {
           "playground": true,
           "docs": true,
           "group": "Advanced Examples",
           "order": 1,
           "dependencies": {
-            "@mantine/core": "^7.4.2",
+            "@mantine/core": "^7.5.0",
             "react-icons": "^4.3.1"
           }
         },
         "title": "Alert Block",
         "group": {
-          "pathFromRoot": "examples/06-custom-schema",
+          "pathFromRoot": "examples/05-custom-schema",
+          "slug": "custom-schema"
+        }
+      },
+      {
+        "projectSlug": "font-style",
+        "fullSlug": "custom-schema/font-style",
+        "pathFromRoot": "examples/05-custom-schema/font-style",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "group": "Advanced Examples",
+          "order": 1
+        },
+        "title": "Font Style",
+        "group": {
+          "pathFromRoot": "examples/05-custom-schema",
           "slug": "custom-schema"
         }
       },
       {
         "projectSlug": "react-custom-blocks",
         "fullSlug": "custom-schema/react-custom-blocks",
-        "pathFromRoot": "examples/06-custom-schema/react-custom-blocks",
+        "pathFromRoot": "examples/05-custom-schema/react-custom-blocks",
         "config": {
           "playground": true,
           "docs": false,
@@ -289,14 +416,14 @@
         },
         "title": "Custom Blocks - React API",
         "group": {
-          "pathFromRoot": "examples/06-custom-schema",
+          "pathFromRoot": "examples/05-custom-schema",
           "slug": "custom-schema"
         }
       },
       {
         "projectSlug": "react-custom-inline-content",
         "fullSlug": "custom-schema/react-custom-inline-content",
-        "pathFromRoot": "examples/06-custom-schema/react-custom-inline-content",
+        "pathFromRoot": "examples/05-custom-schema/react-custom-inline-content",
         "config": {
           "playground": true,
           "docs": false,
@@ -305,14 +432,14 @@
         },
         "title": "Custom Inline Content - React API",
         "group": {
-          "pathFromRoot": "examples/06-custom-schema",
+          "pathFromRoot": "examples/05-custom-schema",
           "slug": "custom-schema"
         }
       },
       {
         "projectSlug": "react-custom-styles",
         "fullSlug": "custom-schema/react-custom-styles",
-        "pathFromRoot": "examples/06-custom-schema/react-custom-styles",
+        "pathFromRoot": "examples/05-custom-schema/react-custom-styles",
         "config": {
           "playground": true,
           "docs": false,
@@ -321,21 +448,21 @@
         },
         "title": "Custom Styles - React API",
         "group": {
-          "pathFromRoot": "examples/06-custom-schema",
+          "pathFromRoot": "examples/05-custom-schema",
           "slug": "custom-schema"
         }
       }
     ]
   },
   "collaboration": {
-    "pathFromRoot": "examples/07-collaboration",
+    "pathFromRoot": "examples/06-collaboration",
     "slug": "collaboration",
     "title": "Collaboration",
     "projects": [
       {
         "projectSlug": "partykit",
         "fullSlug": "collaboration/partykit",
-        "pathFromRoot": "examples/07-collaboration/partykit",
+        "pathFromRoot": "examples/06-collaboration/partykit",
         "config": {
           "playground": true,
           "docs": false,
@@ -348,84 +475,84 @@
         },
         "title": "Collaboration",
         "group": {
-          "pathFromRoot": "examples/07-collaboration",
+          "pathFromRoot": "examples/06-collaboration",
           "slug": "collaboration"
         }
       }
     ]
   },
   "interoperability": {
-    "pathFromRoot": "examples/08-interoperability",
+    "pathFromRoot": "examples/07-interoperability",
     "slug": "interoperability",
     "title": "Interoperability",
     "projects": [
       {
         "projectSlug": "converting-blocks-to-html",
         "fullSlug": "interoperability/converting-blocks-to-html",
-        "pathFromRoot": "examples/08-interoperability/01-converting-blocks-to-html",
+        "pathFromRoot": "examples/07-interoperability/01-converting-blocks-to-html",
         "config": {
           "playground": true,
           "docs": true
         },
         "title": "Converting Blocks to HTML",
         "group": {
-          "pathFromRoot": "examples/08-interoperability",
+          "pathFromRoot": "examples/07-interoperability",
           "slug": "interoperability"
         }
       },
       {
         "projectSlug": "converting-blocks-from-html",
         "fullSlug": "interoperability/converting-blocks-from-html",
-        "pathFromRoot": "examples/08-interoperability/02-converting-blocks-from-html",
+        "pathFromRoot": "examples/07-interoperability/02-converting-blocks-from-html",
         "config": {
           "playground": true,
           "docs": true
         },
         "title": "Parsing HTML to Blocks",
         "group": {
-          "pathFromRoot": "examples/08-interoperability",
+          "pathFromRoot": "examples/07-interoperability",
           "slug": "interoperability"
         }
       },
       {
         "projectSlug": "converting-blocks-to-md",
         "fullSlug": "interoperability/converting-blocks-to-md",
-        "pathFromRoot": "examples/08-interoperability/03-converting-blocks-to-md",
+        "pathFromRoot": "examples/07-interoperability/03-converting-blocks-to-md",
         "config": {
           "playground": true,
           "docs": true
         },
         "title": "Converting Blocks to Markdown",
         "group": {
-          "pathFromRoot": "examples/08-interoperability",
+          "pathFromRoot": "examples/07-interoperability",
           "slug": "interoperability"
         }
       },
       {
         "projectSlug": "converting-blocks-from-md",
         "fullSlug": "interoperability/converting-blocks-from-md",
-        "pathFromRoot": "examples/08-interoperability/04-converting-blocks-from-md",
+        "pathFromRoot": "examples/07-interoperability/04-converting-blocks-from-md",
         "config": {
           "playground": true,
           "docs": true
         },
         "title": "Parsing Markdown to Blocks",
         "group": {
-          "pathFromRoot": "examples/08-interoperability",
+          "pathFromRoot": "examples/07-interoperability",
           "slug": "interoperability"
         }
       }
     ]
   },
   "vanilla-js": {
-    "pathFromRoot": "examples/09-vanilla-js",
+    "pathFromRoot": "examples/08-vanilla-js",
     "slug": "vanilla-js",
     "title": "Vanilla JS",
     "projects": [
       {
         "projectSlug": "react-vanilla-custom-blocks",
         "fullSlug": "vanilla-js/react-vanilla-custom-blocks",
-        "pathFromRoot": "examples/09-vanilla-js/react-vanilla-custom-blocks",
+        "pathFromRoot": "examples/08-vanilla-js/react-vanilla-custom-blocks",
         "config": {
           "playground": true,
           "docs": false,
@@ -434,14 +561,14 @@
         },
         "title": "Custom Blocks - Vanilla JS API",
         "group": {
-          "pathFromRoot": "examples/09-vanilla-js",
+          "pathFromRoot": "examples/08-vanilla-js",
           "slug": "vanilla-js"
         }
       },
       {
         "projectSlug": "react-vanilla-custom-inline-content",
         "fullSlug": "vanilla-js/react-vanilla-custom-inline-content",
-        "pathFromRoot": "examples/09-vanilla-js/react-vanilla-custom-inline-content",
+        "pathFromRoot": "examples/08-vanilla-js/react-vanilla-custom-inline-content",
         "config": {
           "playground": true,
           "docs": false,
@@ -450,14 +577,14 @@
         },
         "title": "Custom Inline Content - Vanilla JS API",
         "group": {
-          "pathFromRoot": "examples/09-vanilla-js",
+          "pathFromRoot": "examples/08-vanilla-js",
           "slug": "vanilla-js"
         }
       },
       {
         "projectSlug": "react-vanilla-custom-styles",
         "fullSlug": "vanilla-js/react-vanilla-custom-styles",
-        "pathFromRoot": "examples/09-vanilla-js/react-vanilla-custom-styles",
+        "pathFromRoot": "examples/08-vanilla-js/react-vanilla-custom-styles",
         "config": {
           "playground": true,
           "docs": false,
@@ -466,7 +593,7 @@
         },
         "title": "Custom Styles - Vanilla JS API",
         "group": {
-          "pathFromRoot": "examples/09-vanilla-js",
+          "pathFromRoot": "examples/08-vanilla-js",
           "slug": "vanilla-js"
         }
       }
diff --git a/tests/src/utils/components/Editor.tsx b/tests/src/utils/components/Editor.tsx
index 61dfb6dd0b..af819e45cd 100644
--- a/tests/src/utils/components/Editor.tsx
+++ b/tests/src/utils/components/Editor.tsx
@@ -1,44 +1,26 @@
-import { filterSuggestionItems } from "@blocknote/core";
+import { BlockNoteSchema, filterSuggestionItems } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import {
   BlockNoteDefaultUI,
   BlockNoteView,
-  DefaultPositionedSuggestionMenu,
+  SuggestionMenuController,
   getDefaultReactSlashMenuItems,
-  useBlockNote,
+  useCreateBlockNote,
 } from "@blocknote/react";
 import { Alert, insertAlert } from "../customblocks/Alert";
 import { Button } from "../customblocks/Button";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
-const blockSpecs = {
-  // ...defaultBlockSpecs,
-  alert: Alert,
-  button: Button,
-  // embed: Embed,
-  // image: Image,
-  // separator: Separator,
-  // toc: TableOfContents,
-};
-
-const defaultItems = getDefaultReactSlashMenuItems();
-
-const customItems = [
-  insertAlert,
-  // insertButton,
-  // insertEmbed,
-  // insertImage,
-  // insertSeparator,
-  // insertTableOfContents,
-];
-
-const allItems = [...defaultItems, ...customItems];
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    alert: Alert,
+    button: Button,
+  },
+});
 
 export default function Editor() {
-  const editor = useBlockNote({
-    blockSpecs,
-  });
+  const editor = useCreateBlockNote({ schema });
 
   console.log(editor);
 
@@ -50,11 +32,14 @@ export default function Editor() {
   // TODO: how to customize slashmenu
   return (
     <BlockNoteView editor={editor}>
-      <BlockNoteDefaultUI editor={editor} slashMenu={false} />
-      <DefaultPositionedSuggestionMenu
-        editor={editor}
-        getItems={async (query) => filterSuggestionItems(allItems, query)}
-        onItemClick={(i) => i.onItemClick(editor)}
+      <BlockNoteDefaultUI slashMenu={false} />
+      <SuggestionMenuController
+        getItems={async (query) =>
+          filterSuggestionItems(
+            [...getDefaultReactSlashMenuItems(editor), insertAlert(editor)],
+            query
+          )
+        }
         // suggestionMenuComponent={MantineSuggestionMenu}
         triggerCharacter="/"
       />
diff --git a/tests/src/utils/customblocks/Alert.tsx b/tests/src/utils/customblocks/Alert.tsx
index fcf4608c65..fa2e98f34f 100644
--- a/tests/src/utils/customblocks/Alert.tsx
+++ b/tests/src/utils/customblocks/Alert.tsx
@@ -126,9 +126,9 @@ export const Alert = createBlockSpec(
   }
 );
 
-export const insertAlert = {
+export const insertAlert = (editor: BlockNoteEditor<any, any, any>) => ({
   title: "Insert Alert",
-  onItemClick: (editor: BlockNoteEditor<any, any, any>) => {
+  onItemClick: () => {
     const block: PartialBlock<
       BlockSchemaWithBlock<"alert", (typeof Alert)["config"]>,
       any,
@@ -151,4 +151,4 @@ export const insertAlert = {
     "success",
   ],
   group: "Other",
-};
+});
diff --git a/tests/src/utils/customblocks/ReactAlert.tsx b/tests/src/utils/customblocks/ReactAlert.tsx
index d2d3175cb4..5a8752c2f9 100644
--- a/tests/src/utils/customblocks/ReactAlert.tsx
+++ b/tests/src/utils/customblocks/ReactAlert.tsx
@@ -24,7 +24,7 @@ const values = {
 
 export const ReactAlert = createReactBlockSpec(
   {
-    type: "reactAlert" as const,
+    type: "reactAlert",
     propSchema: {
       textAlignment: defaultProps.textAlignment,
       textColor: defaultProps.textColor,
diff --git a/tests/src/utils/customblocks/ReactImage.tsx b/tests/src/utils/customblocks/ReactImage.tsx
index afd1d0facb..410e52fd8b 100644
--- a/tests/src/utils/customblocks/ReactImage.tsx
+++ b/tests/src/utils/customblocks/ReactImage.tsx
@@ -4,13 +4,13 @@ import { RiImage2Fill } from "react-icons/ri";
 
 export const ReactImage = createReactBlockSpec(
   {
-    type: "reactImage" as const,
+    type: "reactImage",
     propSchema: {
       ...defaultProps,
       src: {
         default: "https://via.placeholder.com/1000",
       },
-    } as const,
+    },
     content: "inline",
   },
   {
diff --git a/tests/src/utils/customblocks/TableOfContents.tsx.bak b/tests/src/utils/customblocks/TableOfContents.tsx.bak
index eb98686834..bbbc6f498d 100644
--- a/tests/src/utils/customblocks/TableOfContents.tsx.bak
+++ b/tests/src/utils/customblocks/TableOfContents.tsx.bak
@@ -53,7 +53,7 @@ export const TableOfContents = createBlockSpec(
 
       editor.onEditorContentChange(() => {
         toc.innerHTML = "";
-        for (const block of editor.topLevelBlocks) {
+        for (const block of editor.document) {
           if (block.type === "heading") {
             toc.appendChild(createHeadingElements(block));
           }