Change placeholder text

In this example, we show how to change the placeholders:

For an empty document, we show a placeholder Start typing.. (by default, this is not set)
the default placeholder in this editor shows Custom default placeholder instead of the default (Enter text or type '/' for commands)
for Headings, the placeholder shows Custom heading placeholder instead of the default (Heading). Try adding a Heading to see the change

Relevant Docs:

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

export default function App() {
  // We use the English, default dictionary
  const locale = en;

  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    // We override the `placeholders` in our dictionary
    dictionary: {
      ...locale,
      placeholders: {
        ...locale.placeholders,
        // We override the empty document placeholder
        emptyDocument: "Start typing..",
        // We override the default placeholder
        default: "Custom default placeholder",
        // We override the heading placeholder
        heading: "Custom heading placeholder",
      },
    },
  });

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

import { en } from "@blocknote/core/locales";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useCreateBlockNote } from "@blocknote/react";export default function App() {  // We use the English, default dictionary  const locale = en;  // Creates a new editor instance.  const editor = useCreateBlockNote({    // We override the `placeholders` in our dictionary    dictionary: {      ...locale,      placeholders: {        ...locale.placeholders,        // We override the empty document placeholder        emptyDocument: "Start typing..",        // We override the default placeholder        default: "Custom default placeholder",        // We override the heading placeholder        heading: "Custom heading placeholder",      },    },  });  // Renders the editor instance using a React component.  return <BlockNoteView editor={editor} />;}

Change placeholder text

Learn

Collaborate

Community

Legal

Theme