Replace Spectrum Color Picker with Custom solution

[mdmontesinos]

Is there any way to replace the current implementation of the color picker in GrapesJS that uses spectrum with a completely custom solution? For example, a React Color Picker component.

A similar question was asked several years ago, but no response was given (#4023)

[GoodPHP]

Yes — you can replace the default Spectrum color picker in GrapesJS with a fully custom solution (including a React-based one), but it’s not plug-and-play. You need to override how the Style Manager handles color inputs.

---

🔧 Option 1 — Override the default color picker

GrapesJS uses its internal Spectrum-based picker, but you can override its view like this:

editor.on('load', () => {
  const sm = editor.StyleManager;
  const colorType = sm.getBuiltIn('color');

  colorType.view = {
    ...colorType.view,

    onRender() {
      const el = this.el;

      // Clear default UI
      el.innerHTML = '';

      // Create mount point
      const container = document.createElement('div');
      el.appendChild(container);

      // Mount your custom picker here (React example)
      // ReactDOM.render(
      //   <MyColorPicker
      //     onChange={(color) => {
      //       this.model.set('value', color);
      //     }}
      //   />,
      //   container
      // );
    }
  };
});

[mdmontesinos]

Thanks for the solution!