Examples
Basic
Change placeholder text

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:

GitHub
StackBlitz
import { locales } from "@blocknote/core";
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 = locales["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} />;
}
Localization (i18n)Multi-Editor Setup