You can customize your editor when you instantiate it. Let's take a closer looks at the basic methods and components to set up your BlockNote editor.

Create a new BlockNoteEditor by calling the useCreateBlockNote hook. This instantiates a new editor and its required state. You can later interact with the editor using the Editor API and pass it to the BlockNoteView component.

import React from "react";
/**
 * The options for the editor, like initial content, schema, etc.
 * See the [Editor Options API reference](/docs/reference/editor/overview#options) for more details
 */
type BlockNoteEditorOptions = object;
/**
 * See the [Editor API reference](/docs/reference/editor/manipulate-blocks) for more details
 */
type BlockNoteEditor = object;
/**
 * This hook creates a new editor instance, but doesn't render it.
 */
// ---cut---
declare function useCreateBlockNote(
  options?: BlockNoteEditorOptions,
  deps?: React.DependencyList,
): BlockNoteEditor;

The hook takes two optional parameters:

options: Configure the editor with various options. You can find some commonly used options below, or see Editor Options for all available options.

• initialContent - Set starting content
• dictionary - Customize text strings for localization. See the Localization for more.
• schema - Add custom blocks and styles. See Custom Schemas.
• uploadFile - Handle file uploads to a backend.
• pasteHandler - Handle how pasted clipboard content gets parsed.

deps: React dependency array that determines when to recreate the editor.

<Callout type="info" emoji={"💡"}> Manually creating the editor (BlockNoteEditor.create)

The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around the `BlockNoteEditor.create` method. You can use this method directly if you want to control the editor lifecycle manually. For example, we do this in the [Saving & Loading example](/examples/backend/saving-loading) to delay the editor creation until some content has been fetched from an external data source.

Use the <BlockNoteView> component to render the BlockNoteEditor instance you just created:

const editor = useCreateBlockNote();

return <BlockNoteView editor={editor} />;

The <BlockNoteView> component has a number of props that you can use to customize the editor. See React Overview for more information. But, here are some important props to consider:

• editor: The BlockNoteEditor instance to render.
• editable: Whether the editor should be editable.
• onChange: Callback fired when the editor content (document) changes.
• onSelectionChange: Callback fired when the editor selection changes.
• theme: The editor's theme, see Themes for more about this.

<Callout type="info" emoji={"💡"}> Uncontrolled component

Note that the `BlockNoteView` component is an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). This means you don't pass in the editor content directly as a prop. You can use the `initialContent` option in the `useCreateBlockNote` hook to set the initial content of the editor (similar to the `defaultValue` prop in a regular React `<textarea>`).

BlockNote handles the complexities and performance optimizations of managing editor state internally. You can interact with the editor content using the [Editor API](/docs/reference/editor/overview).