Skip to main content


Bangle uses the concept of Commands which is borrowed from Prosemirror to allow for making controlled changes to your editor.

In the example below we try out a heading command.

import { heading } from '';
// Create a command for toggling heading of level 3const command = heading.commands.toggleHeading(3);
// Execute the commandcommand(state, dispatch);

Executing a command#

To get access to state, dispatch, you can save the editor in your applications state management and access it like this:

const editor =  new BangleEditor({ ... })const view = editor.viewconst state = view.stateconst dispatch = view.dispatch
// dry run a commandconst success = toggleBold()(view.state);// execute the commandtoggleBold()(state, dispatch);

💡 Bangle will always export a higher order function which returns a command.

📖 API docs for commands.

📖 Please read the Prosemirror guide on commands for more details.