Headless BlockNote Editor

Last modified by Vincent Massol on 2026/07/28 22:35

Reference

CBlockNoteView

type Props = {
  /** Main properties for the BlockNote editor */
  editorProps: Omit<
    BlockNoteViewWrapperProps,
    | "depsContainer"
    | "content"
    | "linkEditionHandler"
    | "macroAstToReactJsxConverter"
    | "macros"
  >;

  /** Set to `false` to disable macros entirely */
  macros:
    | {
        list: MacroWithUnknownParamsType[];
        ctx: ContextForMacros;
      }
    | false;

  /** Content to initialize the editor with */
  editorContent: UniAst | Error;

  collaboration?: Collaboration;

  /** Container to inject dependencies from */
  depsContainer: Container;
};

/**
 * Properties for the BlockNote editor component.
 *
 * @since 0.16
 * @beta
 */
/**
 * Properties for the BlockNote editor component.
 *
 * @since 0.16
 * @beta
 */
type BlockNoteViewWrapperProps = {
  /**
   * Options to forward to the BlockNote editor
   */
  blockNoteOptions?: Partial<
    Omit<DefaultBlockNoteEditorOptions, "schema" | "collaboration">
  >;

  /**
   * The name of the editor instance, usually the name of the form field it is attached to. When realtime collaboration
   * is enabled, this is used to identify the Yjs document fragment that the editor is bound to (because a document can
   * have multiple fields that are being edited in realtime time).
   *
   * @since 18.3.0RC1
   */
  name?: string;

  /**
   * The display theme to use
   */
  theme?: "light" | "dark";

  /**
   * The editor's language
   */
  lang: EditorLanguage;

  /**
   * The editor's label. Used for accessibility.
   * @since 18.3.0RC1
   */
  label: string;

  /**
   * The editor's initial content
   * If realtime is enabled, this content may be replaced by the other users' own editor content
   */
  content: BlockType[];

  /**
   * Macros to show in the editor
   *
   * @since 18.0.0RC1
   * @beta
   */
  macros:
    | {
        /**
         * List of buildable macros
         *
         * @since 18.0.0RC1
         * @beta
         */
        list: MacroWithUnknownParamsType[];

        /**
         * Context for macros
         *
         * @since 18.0.0RC1
         * @beta
         */
        ctx: ContextForMacros;
      }
    | false;

  /**
   * The collaboration session.
   */
  collaboration?: Collaboration;

  /**
   * Run a function when the document's content change
   * WARN: this function may be fired at a rapid rate if the user types rapidly. Debouncing may be required on your end.
   */
  onChange?: (editor: EditorType) => void;

  /**
   * Container for dependency injection
   *
   * @since 18.5.0RC1
   * @beta
   */
  depsContainer: Container;

  /**
   * Intercept link edition mechanism (i.e. inserting or editing a link)
   *
   * @since 18.4.0RC1
   * @beta
   */
  linkEditionHandler: LinkEditionHandler;

  /**
   * Overrides for default behavior
   *
   * @since 0.26
   */
  overrides?: {
    /**
     * Intercept image edition mechanism (i.e. clicking on the edition icon in images' toolbar)
     */
    imageEdition?: ImageEditionOverrideFn;
  };

  /**
   * List of features supported by the underlying syntax
   *
   * Features not enabled here will be disabled in the future (when possible)
   *
   * @since 18.6.0RC1
   * @beta
   */
  syntax: SyntaxConfig;

  /**
   * Make the wrapper forward some data through references
   */
  refs?: {
    setEditor?: (editor: EditorType) => void;
  };
};

Vue Events

{
  // Emitted as soon as a user-triggered change happens into the editor
  // The event won't be triggered when the editor is filled with its initial content,
  // or when the editor's content changes due to modifications made by other players in the realtime session
  "instant-change": [];

  // Emitted in the same context as "instant-change", but debounced
  "debounced-change": [content: UniAst];
}

Vue Expose

{
  // Get the editor's content
  getContent(): UniAst | Error
}

More

To find more about the current topic, you can search or use the table below and filter the columns to narrow your choices.

Related

Cristal Blocknote Headless

Get Connected