How to add a custom button with custom command in default panel of grapesjs

Question

I have integrated grapesjs with angular6. and i am getting a default panel with a select box appearing at top of screen; i want a custom button with my own custom command on the default panel. i want to add a button looks like below marked by red color.

i want to when i click on the button then an alert box should be displayed on the screen with hello world message. please let me know how can i add my custom button on default panel

mcsekar12 · Accepted Answer

Use editor.Panels.getPanels() to get all the available panels and then use addButtons method shown below.Here 'options' is the panel name editor.Panels.addButton('options', [ { id: 'save', className: 'fa fa-floppy-o icon-blank', command: function(editor1, sender) { alert('Hello World') }, attributes: { title: 'Save Template' } }, ]);

TemaMix · Answer

I also had trouble with that when had tried to button to Panel. So, I used the following way: editor.Panels.addButton('#target panel id#', { id: 'alert-button', className: 'btn-alert-button', label: 'Click my butt(on)', command(editor) { alert('Hello World'); } active: true }); However, the panel and button were displayed. It turns on it needs to use the render method to rerender Panel manager object. I can't find information about it into docs. So, decided this note here: editor.Panels.render(...

mararn1618 · Answer

This is well documented at https://grapesjs.com/docs/getting-started.html#panels-buttons. You have two methods to add a panel with buttons: (1) When initializing GrapesJS, (2) After GrapesJS was initialized with addPanel. Please note that this is for a panel that you have defined with

.GrapesJS.init() After GrapesJS was initialized

How to add a custom button with custom command in default panel of grapesjs

Question

Answers (3)

Related Questions and Answers

How do I add elements/sectors to views container using a custom button in the Panel

Extend Pannel/Command examples/documentation with opening a new view

Default asset manager in custom component

How to change gjs-ckeditor-format component

Paid Plugins That Match This Issue

Related tutorials

How to Build an AI-Powered Page Builder with GrapesJS in 2026

How Much Does It Cost to Build a SaaS Page Builder in 2026?

PageKit: the GrapesJS application you'd have to build anyway

Browse Plugin Categories