Examples
Basic
Change placeholder text

Change placeholder text

In this example, we show how to change the default placeholder and the placeholder for Headings by overriding the placeholders in the dictionary.

Relevant Docs:

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
import { locales } from "@blocknote/core";
 
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 default placeholder
        default: "This is a custom placeholder",
        // We override the heading placeholder
        heading: "This is a custom heading",
      },
    },
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}