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.