Search page titles, headings and text across the docs.

Packages

@canvist/react

React bindings for @canvist/web, the canvist canvas editor. Commands, queries, and plugin APIs are typed from the extensions and plugins you pass.

npm install @canvist/react
import { useCanvistEditor, useEditorState } from "@canvist/react";

function Notes() {
	const { ref, editor } = useCanvistEditor({ label: "Notes" });
	const isBold = useEditorState(
		editor,
		(current) => current.query.isBold(),
		false,
	);

	return (
		<>
			<button
				aria-pressed={isBold}
				onClick={() => editor?.commands.toggleBold()}
			>
				Bold
			</button>
			<div ref={ref} />
		</>
	);
}
  • useCanvistEditor(options) creates the editor in the element ref is attached to and destroys it on unmount, Strict Mode included.
  • useEditorState(editor, select, fallback) re-renders when select(editor) changes, through useSyncExternalStore.
  • <CanvistEditor /> takes the editor’s options as props, plus onReady, onUpdate, and html for server-rendered HTML to hydrate. editable and placeholder follow their props.
  • <BubbleMenu editor={editor}> and <FloatingMenu editor={editor}> keep their children next to the selection.

See Quick start: React.

Docs