Browse by category
GrapesJS Commands
GrapesJS command plugins add custom actions, keyboard shortcuts, and toolbar buttons to the editor. Commands are the backbone of GrapesJS interaction — these plugins extend the default command set with export actions, panel toggles, undo enhancements, and workflow automations. Browse community-contributed and premium command extensions to customize the editor behavior for your specific application.
About GrapesJS Commands
GrapesJS commands are the primary way to trigger editor actions programmatically or in response to user interactions. Every toolbar button, keyboard shortcut, and context menu item in GrapesJS calls a registered command by name. Command plugins on GJS.Market extend the default GrapesJS command set in several ways. Shortcut packs register keyboard bindings for common actions — undo, redo, select all, copy component, paste in place, and move up or down in the layer hierarchy — that are not mapped by default. Export command plugins add Export HTML, Export ZIP, Copy to clipboard, and Preview in new tab actions to the toolbar. Panel toggle commands show and hide specific panels programmatically, useful for simplified editor modes. Advanced command plugins implement multi-step workflows such as a Publish command that validates, exports, and pushes to an API in sequence. All command plugins on GJS.Market include an API reference showing the command name string to use in your own GrapesJS.runCommand() calls.
GrapesJS Commands — FAQ
- What is a GrapesJS command?
- A command is a named action registered with the editor. Every toolbar button, keyboard shortcut and context menu item resolves to one, and you can trigger any of them yourself with editor.runCommand('name'). Commands are the seam between the UI and editor behaviour, which is why replacing a button's behaviour usually means registering a command rather than patching the DOM.
- How do I register a custom command?
- Call editor.Commands.add with an id and an object holding a run method — and a stop method if the command is stateful, like toggling a panel. Return values from run are passed back to the caller, so a command can double as a small API. Wrap the registration in a plugin to reuse it across projects.
- How do I add keyboard shortcuts in GrapesJS?
- Use the Keymaps API: editor.Keymaps.add binds a key combination to a command id. GrapesJS maps only a small default set, which is why shortcut packs in this category exist — they add undo, redo, select all, duplicate, paste in place and layer navigation. Bind to commands, not to handlers, so the same action stays reachable from the toolbar.
- How do I export HTML and CSS from GrapesJS?
- editor.getHtml() and editor.getCss() return the current page as strings, and the built-in export-template command opens them in a modal. Plugins in this category go further: Export ZIP bundles HTML, CSS and assets into a downloadable archive, Copy to clipboard skips the modal, and Preview in new tab renders the output standalone.
- Can a command run a multi-step publish workflow?
- Yes, and it is the cleanest place to put one. A run method can be async, so a Publish command can validate the page, call getHtml and getCss, POST to your API and report the result — all behind a single toolbar button. Because it is a named command, the same flow is reachable from a shortcut, your own code or an automated test.
Browse by tag