Alert Blocks

In this example, we create two Alert variants that hold other blocks as their body. The alert block keeps its title as inline content with child blocks as its body (a compartment), while alertBox holds only child blocks (a pure container).

Both variants declare the children config on BlockConfig with children: { allow: "blocks" }. The titled alert additionally uses render for its title row and renderFrame for the box around the title and body together; the title-less alert uses renderFrame alone, with the children mounting straight into its slot.

We also wire up Slash Menu items to insert each variant, and render the document JSON next to the editor so you can inspect the structure of the nested blocks.

Try it out:

Press Enter at the end of the alert's title to start its body, keeping the existing body blocks in place.
Press Backspace at the start of the first body block to merge it back into the title.
Press "/" anywhere to insert a new Alert or Alert box, and watch the JSON panel update as you edit.

Relevant Docs:

GitHub

StackBlitz

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

import "./styles.css";

const alertFlavors = ["info", "warning", "success"] as const;

// Alert WITH a title: a compartment. The title is the block's own inline
// content, and the body is its `children` - other blocks that belong to it.
// `render` draws the title row (the title mounts into `contentDOM`), while
// `renderFrame` draws the box around the title and the body together: both
// render into the frame's `slot`.
//
// Flavor-dependent styling lives in `renderFrame`, not `render`: the frame
// rebuilds whenever the block's props change, so reading
// `block.props.flavor` there is always fresh.
export const createAlert = createBlockSpec(
  {
    type: "alert" as const,
    propSchema: {
      flavor: {
        default: "info",
        values: [...alertFlavors],
      },
    },
    content: "inline",
    children: { allow: "blocks" },
  },
  {
    render: () => {
      const dom = document.createElement("div");
      dom.className = "alert-title-row";
      const badge = document.createElement("span");
      badge.className = "alert-badge";
      badge.textContent = "!";
      badge.contentEditable = "false";
      const contentDOM = document.createElement("span");
      contentDOM.className = "alert-title";
      dom.append(badge, contentDOM);
      return { dom, contentDOM };
    },
    renderFrame: (block) => {
      const dom = document.createElement("div");
      dom.className = "alert";
      dom.dataset.flavor = block.props.flavor;
      const slot = document.createElement("div");
      slot.className = "alert-slot";
      dom.append(slot);
      return {
        dom,
        slot,
        update: (newBlock) => {
          dom.dataset.flavor = newBlock.props.flavor;
        },
      };
    },
  },
);

// Alert WITHOUT a title: a pure container. There is no content of its own,
// only a body of child blocks, so `renderFrame` alone draws the box and the
// children mount straight into it (`slot: dom`).
export const createAlertBox = createBlockSpec(
  {
    type: "alertBox" as const,
    propSchema: {
      flavor: {
        default: "info",
        values: [...alertFlavors],
      },
    },
    content: "none",
    children: { allow: "blocks" },
  },
  {
    renderFrame: (block) => {
      const dom = document.createElement("div");
      dom.className = "alert";
      dom.dataset.flavor = block.props.flavor;
      return {
        dom,
        slot: dom,
        update: (newBlock) => {
          dom.dataset.flavor = newBlock.props.flavor;
        },
      };
    },
  },
);

import { createBlockSpec } from "@blocknote/core";import "./styles.css";const alertFlavors = ["info", "warning", "success"] as const;// Alert WITH a title: a compartment. The title is the block's own inline// content, and the body is its `children` - other blocks that belong to it.// `render` draws the title row (the title mounts into `contentDOM`), while// `renderFrame` draws the box around the title and the body together: both// render into the frame's `slot`.//// Flavor-dependent styling lives in `renderFrame`, not `render`: the frame// rebuilds whenever the block's props change, so reading// `block.props.flavor` there is always fresh.export const createAlert = createBlockSpec(  {    type: "alert" as const,    propSchema: {      flavor: {        default: "info",        values: [...alertFlavors],      },    },    content: "inline",    children: { allow: "blocks" },  },  {    render: () => {      const dom = document.createElement("div");      dom.className = "alert-title-row";      const badge = document.createElement("span");      badge.className = "alert-badge";      badge.textContent = "!";      badge.contentEditable = "false";      const contentDOM = document.createElement("span");      contentDOM.className = "alert-title";      dom.append(badge, contentDOM);      return { dom, contentDOM };    },    renderFrame: (block) => {      const dom = document.createElement("div");      dom.className = "alert";      dom.dataset.flavor = block.props.flavor;      const slot = document.createElement("div");      slot.className = "alert-slot";      dom.append(slot);      return {        dom,        slot,        update: (newBlock) => {          dom.dataset.flavor = newBlock.props.flavor;        },      };    },  },);// Alert WITHOUT a title: a pure container. There is no content of its own,// only a body of child blocks, so `renderFrame` alone draws the box and the// children mount straight into it (`slot: dom`).export const createAlertBox = createBlockSpec(  {    type: "alertBox" as const,    propSchema: {      flavor: {        default: "info",        values: [...alertFlavors],      },    },    content: "none",    children: { allow: "blocks" },  },  {    renderFrame: (block) => {      const dom = document.createElement("div");      dom.className = "alert";      dom.dataset.flavor = block.props.flavor;      return {        dom,        slot: dom,        update: (newBlock) => {          dom.dataset.flavor = newBlock.props.flavor;        },      };    },  },);

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
import {
  filterSuggestionItems,
  insertOrUpdateBlockForSlashMenu,
} from "@blocknote/core/extensions";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  SuggestionMenuController,
  getDefaultReactSlashMenuItems,
  useCreateBlockNote,
} from "@blocknote/react";
import { useEffect, useState } from "react";
import { RiAlarmWarningLine } from "react-icons/ri";

import { createAlert, createAlertBox } from "./Alert";
import "./styles.css";

// Schema with the default blocks plus the two alert variants: `alert` keeps
// its title as inline content with child blocks as its body, while
// `alertBox` is a pure container holding only child blocks.
const schema = BlockNoteSchema.create().extend({
  blockSpecs: {
    ...defaultBlockSpecs,
    alert: createAlert(),
    alertBox: createAlertBox(),
  },
});

// Slash menu items to insert each alert variant. Inserting one with no
// children fills it with an empty paragraph, as `min` defaults to 1.
const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({
  title: "Alert",
  subtext: "Alert with a title and a body of blocks",
  onItemClick: () =>
    insertOrUpdateBlockForSlashMenu(editor, {
      type: "alert",
      content: "Heads up",
    }),
  aliases: ["alert", "callout", "note", "warning"],
  group: "Basic blocks",
  icon: <RiAlarmWarningLine />,
});

const insertAlertBox = (editor: typeof schema.BlockNoteEditor) => ({
  title: "Alert box",
  subtext: "Alert body with no title",
  onItemClick: () =>
    insertOrUpdateBlockForSlashMenu(editor, {
      type: "alertBox",
    }),
  aliases: ["alertbox", "alert box", "callout", "note"],
  group: "Basic blocks",
  icon: <RiAlarmWarningLine />,
});

type AppBlock = (typeof schema.BlockNoteEditor)["document"][number];

export default function App() {
  const [blocks, setBlocks] = useState<AppBlock[]>([]);

  const editor = useCreateBlockNote({
    schema,
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome! This demo shows two alert variants.",
      },
      {
        type: "alert",
        props: { flavor: "warning" },
        content: "Heads up",
        children: [
          {
            type: "paragraph",
            content:
              "This alert keeps its title as inline content, with child blocks as its body.",
          },
          {
            type: "paragraph",
            content:
              "Press Enter at the end of the title to start the body, or Backspace at the start of the first body block to merge back into it.",
          },
        ],
      },
      {
        type: "alertBox",
        props: { flavor: "info" },
        children: [
          {
            type: "paragraph",
            content:
              "This alert has no title: it is a pure container holding only child blocks.",
          },
        ],
      },
      {
        type: "paragraph",
      },
    ],
  });

  useEffect(() => setBlocks(editor.document), [editor]);

  return (
    <div className={"wrapper"}>
      <div>BlockNote Editor:</div>
      <div className={"item"}>
        <BlockNoteView
          editor={editor}
          slashMenu={false}
          onChange={() => {
            setBlocks(editor.document);
          }}
        >
          <SuggestionMenuController
            triggerCharacter={"/"}
            getItems={async (query) => {
              const defaultItems = getDefaultReactSlashMenuItems(editor);
              const lastBasicBlockIndex = defaultItems.findLastIndex(
                (item) => item.group === "Basic blocks",
              );
              defaultItems.splice(
                lastBasicBlockIndex + 1,
                0,
                insertAlert(editor),
                insertAlertBox(editor),
              );
              return filterSuggestionItems(defaultItems, query);
            }}
          />
        </BlockNoteView>
      </div>
      <div>Document JSON:</div>
      <div className={"item bordered"}>
        <pre>
          <code>{JSON.stringify(blocks, null, 2)}</code>
        </pre>
      </div>
    </div>
  );
}

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";import {  filterSuggestionItems,  insertOrUpdateBlockForSlashMenu,} from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import {  SuggestionMenuController,  getDefaultReactSlashMenuItems,  useCreateBlockNote,} from "@blocknote/react";import { useEffect, useState } from "react";import { RiAlarmWarningLine } from "react-icons/ri";import { createAlert, createAlertBox } from "./Alert";import "./styles.css";// Schema with the default blocks plus the two alert variants: `alert` keeps// its title as inline content with child blocks as its body, while// `alertBox` is a pure container holding only child blocks.const schema = BlockNoteSchema.create().extend({  blockSpecs: {    ...defaultBlockSpecs,    alert: createAlert(),    alertBox: createAlertBox(),  },});// Slash menu items to insert each alert variant. Inserting one with no// children fills it with an empty paragraph, as `min` defaults to 1.const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({  title: "Alert",  subtext: "Alert with a title and a body of blocks",  onItemClick: () =>    insertOrUpdateBlockForSlashMenu(editor, {      type: "alert",      content: "Heads up",    }),  aliases: ["alert", "callout", "note", "warning"],  group: "Basic blocks",  icon: <RiAlarmWarningLine />,});const insertAlertBox = (editor: typeof schema.BlockNoteEditor) => ({  title: "Alert box",  subtext: "Alert body with no title",  onItemClick: () =>    insertOrUpdateBlockForSlashMenu(editor, {      type: "alertBox",    }),  aliases: ["alertbox", "alert box", "callout", "note"],  group: "Basic blocks",  icon: <RiAlarmWarningLine />,});type AppBlock = (typeof schema.BlockNoteEditor)["document"][number];export default function App() {  const [blocks, setBlocks] = useState<AppBlock[]>([]);  const editor = useCreateBlockNote({    schema,    initialContent: [      {        type: "paragraph",        content: "Welcome! This demo shows two alert variants.",      },      {        type: "alert",        props: { flavor: "warning" },        content: "Heads up",        children: [          {            type: "paragraph",            content:              "This alert keeps its title as inline content, with child blocks as its body.",          },          {            type: "paragraph",            content:              "Press Enter at the end of the title to start the body, or Backspace at the start of the first body block to merge back into it.",          },        ],      },      {        type: "alertBox",        props: { flavor: "info" },        children: [          {            type: "paragraph",            content:              "This alert has no title: it is a pure container holding only child blocks.",          },        ],      },      {        type: "paragraph",      },    ],  });  useEffect(() => setBlocks(editor.document), [editor]);  return (    <div className={"wrapper"}>      <div>BlockNote Editor:</div>      <div className={"item"}>        <BlockNoteView          editor={editor}          slashMenu={false}          onChange={() => {            setBlocks(editor.document);          }}        >          <SuggestionMenuController            triggerCharacter={"/"}            getItems={async (query) => {              const defaultItems = getDefaultReactSlashMenuItems(editor);              const lastBasicBlockIndex = defaultItems.findLastIndex(                (item) => item.group === "Basic blocks",              );              defaultItems.splice(                lastBasicBlockIndex + 1,                0,                insertAlert(editor),                insertAlertBox(editor),              );              return filterSuggestionItems(defaultItems, query);            }}          />        </BlockNoteView>      </div>      <div>Document JSON:</div>      <div className={"item bordered"}>        <pre>          <code>{JSON.stringify(blocks, null, 2)}</code>        </pre>      </div>    </div>  );}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.item {
  border-radius: 0.5rem;
  flex: 1;
  overflow: auto;
}

.item.bordered {
  border: 1px solid gray;
}

.item pre {
  border-radius: 0.5rem;
  height: 100%;
  overflow: auto;
  padding-block: 1rem;
  padding-inline: 54px;
  width: 100%;
  white-space: pre-wrap;
}

/* Both alert variants share the box. `flavor` is the prop's default-aware
   styling hook: BlockNote only writes a `data-*` attribute for props that
   differ from their default, so `info` (the default) is styled by absence. */
.alert {
  flex-grow: 1;
  border-radius: 6px;
  padding: 12px 16px;
  border-left: 4px solid var(--alert-accent, #888);
  background-color: var(--alert-bg, #f3f4f6);
}

.alert:not([data-flavor]),
.alert[data-flavor="info"] {
  --alert-accent: #507aff;
  --alert-bg: #e6ebff;
}

.alert[data-flavor="warning"] {
  --alert-accent: #b91c1c;
  --alert-bg: #fef2f2;
}

.alert[data-flavor="success"] {
  --alert-accent: #16a34a;
  --alert-bg: #ecfdf5;
}

[data-color-scheme="dark"] .alert:not([data-flavor]),
[data-color-scheme="dark"] .alert[data-flavor="info"] {
  --alert-bg: #1e2a5c;
}

[data-color-scheme="dark"] .alert[data-flavor="warning"] {
  --alert-bg: #4a1212;
}

[data-color-scheme="dark"] .alert[data-flavor="success"] {
  --alert-bg: #0d3b21;
}

.alert-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alert-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: var(--alert-accent, #888);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.alert-title {
  font-weight: 600;
  flex-grow: 1;
  min-width: 0;
}

.wrapper {  display: flex;  flex-direction: column;  height: 100%;}.item {  border-radius: 0.5rem;  flex: 1;  overflow: auto;}.item.bordered {  border: 1px solid gray;}.item pre {  border-radius: 0.5rem;  height: 100%;  overflow: auto;  padding-block: 1rem;  padding-inline: 54px;  width: 100%;  white-space: pre-wrap;}/* Both alert variants share the box. `flavor` is the prop's default-aware   styling hook: BlockNote only writes a `data-*` attribute for props that   differ from their default, so `info` (the default) is styled by absence. */.alert {  flex-grow: 1;  border-radius: 6px;  padding: 12px 16px;  border-left: 4px solid var(--alert-accent, #888);  background-color: var(--alert-bg, #f3f4f6);}.alert:not([data-flavor]),.alert[data-flavor="info"] {  --alert-accent: #507aff;  --alert-bg: #e6ebff;}.alert[data-flavor="warning"] {  --alert-accent: #b91c1c;  --alert-bg: #fef2f2;}.alert[data-flavor="success"] {  --alert-accent: #16a34a;  --alert-bg: #ecfdf5;}[data-color-scheme="dark"] .alert:not([data-flavor]),[data-color-scheme="dark"] .alert[data-flavor="info"] {  --alert-bg: #1e2a5c;}[data-color-scheme="dark"] .alert[data-flavor="warning"] {  --alert-bg: #4a1212;}[data-color-scheme="dark"] .alert[data-flavor="success"] {  --alert-bg: #0d3b21;}.alert-slot {  display: flex;  flex-direction: column;  gap: 4px;}.alert-title-row {  display: flex;  align-items: center;  gap: 8px;}.alert-badge {  display: inline-flex;  align-items: center;  justify-content: center;  width: 20px;  height: 20px;  border-radius: 9999px;  background-color: var(--alert-accent, #888);  color: #fff;  font-size: 12px;  font-weight: 700;  flex-shrink: 0;}.alert-title {  font-weight: 600;  flex-grow: 1;  min-width: 0;}

import { createBlockSpec } from "@blocknote/core"; import "./styles.css"; const alertFlavors = ["info", "warning", "success"] as const; // Alert WITH a title: a compartment. The title is the block's own inline // content, and the body is its `children` - other blocks that belong to it. // `render` draws the title row (the title mounts into `contentDOM`), while // `renderFrame` draws the box around the title and the body together: both // render into the frame's `slot`. // // Flavor-dependent styling lives in `renderFrame`, not `render`: the frame // rebuilds whenever the block's props change, so reading // `block.props.flavor` there is always fresh. export const createAlert = createBlockSpec( { type: "alert" as const, propSchema: { flavor: { default: "info", values: [...alertFlavors], }, }, content: "inline", children: { allow: "blocks" }, }, { render: () => { const dom = document.createElement("div"); dom.className = "alert-title-row"; const badge = document.createElement("span"); badge.className = "alert-badge"; badge.textContent = "!"; badge.contentEditable = "false"; const contentDOM = document.createElement("span"); contentDOM.className = "alert-title"; dom.append(badge, contentDOM); return { dom, contentDOM }; }, renderFrame: (block) => { const dom = document.createElement("div"); dom.className = "alert"; dom.dataset.flavor = block.props.flavor; const slot = document.createElement("div"); slot.className = "alert-slot"; dom.append(slot); return { dom, slot, update: (newBlock) => { dom.dataset.flavor = newBlock.props.flavor; }, }; }, }, ); // Alert WITHOUT a title: a pure container. There is no content of its own, // only a body of child blocks, so `renderFrame` alone draws the box and the // children mount straight into it (`slot: dom`). export const createAlertBox = createBlockSpec( { type: "alertBox" as const, propSchema: { flavor: { default: "info", values: [...alertFlavors], }, }, content: "none", children: { allow: "blocks" }, }, { renderFrame: (block) => { const dom = document.createElement("div"); dom.className = "alert"; dom.dataset.flavor = block.props.flavor; return { dom, slot: dom, update: (newBlock) => { dom.dataset.flavor = newBlock.props.flavor; }, }; }, }, );

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core"; import { filterSuggestionItems, insertOrUpdateBlockForSlashMenu, } from "@blocknote/core/extensions"; import "@blocknote/core/fonts/inter.css"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { SuggestionMenuController, getDefaultReactSlashMenuItems, useCreateBlockNote, } from "@blocknote/react"; import { useEffect, useState } from "react"; import { RiAlarmWarningLine } from "react-icons/ri"; import { createAlert, createAlertBox } from "./Alert"; import "./styles.css"; // Schema with the default blocks plus the two alert variants: `alert` keeps // its title as inline content with child blocks as its body, while // `alertBox` is a pure container holding only child blocks. const schema = BlockNoteSchema.create().extend({ blockSpecs: { ...defaultBlockSpecs, alert: createAlert(), alertBox: createAlertBox(), }, }); // Slash menu items to insert each alert variant. Inserting one with no // children fills it with an empty paragraph, as `min` defaults to 1. const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({ title: "Alert", subtext: "Alert with a title and a body of blocks", onItemClick: () => insertOrUpdateBlockForSlashMenu(editor, { type: "alert", content: "Heads up", }), aliases: ["alert", "callout", "note", "warning"], group: "Basic blocks", icon: <RiAlarmWarningLine />, }); const insertAlertBox = (editor: typeof schema.BlockNoteEditor) => ({ title: "Alert box", subtext: "Alert body with no title", onItemClick: () => insertOrUpdateBlockForSlashMenu(editor, { type: "alertBox", }), aliases: ["alertbox", "alert box", "callout", "note"], group: "Basic blocks", icon: <RiAlarmWarningLine />, }); type AppBlock = (typeof schema.BlockNoteEditor)["document"][number]; export default function App() { const [blocks, setBlocks] = useState<AppBlock[]>([]); const editor = useCreateBlockNote({ schema, initialContent: [ { type: "paragraph", content: "Welcome! This demo shows two alert variants.", }, { type: "alert", props: { flavor: "warning" }, content: "Heads up", children: [ { type: "paragraph", content: "This alert keeps its title as inline content, with child blocks as its body.", }, { type: "paragraph", content: "Press Enter at the end of the title to start the body, or Backspace at the start of the first body block to merge back into it.", }, ], }, { type: "alertBox", props: { flavor: "info" }, children: [ { type: "paragraph", content: "This alert has no title: it is a pure container holding only child blocks.", }, ], }, { type: "paragraph", }, ], }); useEffect(() => setBlocks(editor.document), [editor]); return ( <div className={"wrapper"}> <div>BlockNote Editor:</div> <div className={"item"}> <BlockNoteView editor={editor} slashMenu={false} onChange={() => { setBlocks(editor.document); }} > <SuggestionMenuController triggerCharacter={"/"} getItems={async (query) => { const defaultItems = getDefaultReactSlashMenuItems(editor); const lastBasicBlockIndex = defaultItems.findLastIndex( (item) => item.group === "Basic blocks", ); defaultItems.splice( lastBasicBlockIndex + 1, 0, insertAlert(editor), insertAlertBox(editor), ); return filterSuggestionItems(defaultItems, query); }} /> </BlockNoteView> </div> <div>Document JSON:</div> <div className={"item bordered"}> <pre> <code>{JSON.stringify(blocks, null, 2)}</code> </pre> </div> </div> ); }

Alert Blocks

Learn

Collaborate

Community

Legal & Theme