Localization (i18n)

In this example, we use a dropdown to switch the editor between all of the languages that BlockNote ships with, by passing the matching dictionary from @blocknote/core/locales to the editor. Selecting a language re-mounts the editor so the interface strings update immediately. The document is saved outside the editor and restored on re-mount, preserving your content (but not the undo history or selection).

You can also provide your own dictionary to customize the strings used in the editor, or submit a Pull Request to add support for your language of your choice.

Relevant Docs:

Localization

GitHub

StackBlitz

import type { Block } from "@blocknote/core";
import * as locales 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";
import { useRef, useState } from "react";

type Language = keyof typeof locales;

function isLanguage(value: string): value is Language {
  return Object.hasOwn(locales, value);
}

// Human-readable names shown in the language picker.
const languageNames = {
  ar: "العربية",
  de: "Deutsch",
  en: "English",
  es: "Español",
  fa: "فارسی",
  fr: "Français",
  he: "עברית",
  hr: "Hrvatski",
  is: "Íslenska",
  it: "Italiano",
  ja: "日本語",
  ko: "한국어",
  nl: "Nederlands",
  no: "Norsk",
  pl: "Polski",
  pt: "Português",
  ru: "Русский",
  sk: "Slovenčina",
  tr: "Türkçe",
  uk: "Українська",
  uz: "Oʻzbekcha",
  vi: "Tiếng Việt",
  zh: "简体中文",
  zhTW: "繁體中文",
} satisfies Record<Language, string>;

const languageKeys = Object.keys(locales)
  .filter(isLanguage)
  .sort((a, b) => languageNames[a].localeCompare(languageNames[b]));

export default function App() {
  const [language, setLanguage] = useState<Language>("en");
  // Recreate the editor when the language changes, preserving its document.
  const document = useRef<Block[] | undefined>(undefined);
  const editor = useCreateBlockNote(
    { dictionary: locales[language], initialContent: document.current },
    [language],
  );

  return (
    <div>
      <label>
        Language:{" "}
        <select
          value={language}
          onChange={(event) => {
            if (isLanguage(event.target.value)) {
              setLanguage(event.target.value);
            }
          }}
        >
          {languageKeys.map((key) => (
            <option key={key} value={key}>
              {languageNames[key]}
            </option>
          ))}
        </select>
      </label>

      {/* Remount the UI so menus also reset to the new language. */}
      <BlockNoteView
        key={language}
        editor={editor}
        onChange={() => {
          document.current = editor.document;
        }}
      />
    </div>
  );
}

import type { Block } from "@blocknote/core";import * as locales 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";import { useRef, useState } from "react";type Language = keyof typeof locales;function isLanguage(value: string): value is Language {  return Object.hasOwn(locales, value);}// Human-readable names shown in the language picker.const languageNames = {  ar: "العربية",  de: "Deutsch",  en: "English",  es: "Español",  fa: "فارسی",  fr: "Français",  he: "עברית",  hr: "Hrvatski",  is: "Íslenska",  it: "Italiano",  ja: "日本語",  ko: "한국어",  nl: "Nederlands",  no: "Norsk",  pl: "Polski",  pt: "Português",  ru: "Русский",  sk: "Slovenčina",  tr: "Türkçe",  uk: "Українська",  uz: "Oʻzbekcha",  vi: "Tiếng Việt",  zh: "简体中文",  zhTW: "繁體中文",} satisfies Record<Language, string>;const languageKeys = Object.keys(locales)  .filter(isLanguage)  .sort((a, b) => languageNames[a].localeCompare(languageNames[b]));export default function App() {  const [language, setLanguage] = useState<Language>("en");  // Recreate the editor when the language changes, preserving its document.  const document = useRef<Block[] | undefined>(undefined);  const editor = useCreateBlockNote(    { dictionary: locales[language], initialContent: document.current },    [language],  );  return (    <div>      <label>        Language:{" "}        <select          value={language}          onChange={(event) => {            if (isLanguage(event.target.value)) {              setLanguage(event.target.value);            }          }}        >          {languageKeys.map((key) => (            <option key={key} value={key}>              {languageNames[key]}            </option>          ))}        </select>      </label>      {/* Remount the UI so menus also reset to the new language. */}      <BlockNoteView        key={language}        editor={editor}        onChange={() => {          document.current = editor.document;        }}      />    </div>  );}

/// <reference types="vite-plus/client" />

/// <reference types="vite-plus/client" />

Localization (i18n)

Learn

Collaborate

Community

Legal & Theme