Setting the initial color of the color picker
It doesn't make sense setting a default value on it, the color picker takes the color from the selected target (probably you want to change the color on the component level)
Read full answer below ↓Question
I'm trying to set an inital color different than black for the color picker:
grapesjs.init({
// ...
colorPicker: {
color: '#3777B4',
showAlpha: false,
showPalette: false,
preferredFormat: "hex",
appendTo: 'parent',
offset: {
top: 26,
left: -190
}
}
));
This doesn't work, even if color is a valid option.
Is there a way to set this initial color?
I'm open to solutions even if they don't use the config directly but involve some hacky code.
Answers (3)
It doesn't make sense setting a default value on it, the color picker takes the color from the selected target (probably you want to change the color on the component level)
Well, black doesn't make sense either. I would prefere the selected color on the picker to be something else by default, when the component doesn't have any color.
Try to see if changing the defaults color of the property from the Style Manager works for you. You can do it from initialization or via API
Related Questions and Answers
Continue research with similar issue discussions.
Issue #642
Can't set background color to black
I can't set background color to black with spectrum color picker. Only work if I type hex value. Thank you for great framework!
Issue #2566
[QUESTION] Color picker default colors
Is there a way to set a number of default colours to appear at the top of the color picker?
Issue #3369
FEAT: is it possible add a relative offset for the colorpicker
for example: I add a left bar and top bar outside the editor. I know the colorpicker's position is relative the body, so is it possible add...
Issue #2458
[Question] Setting of default value for css property in StyleManager config does not affect style of new added block?
I have a question. When css property is added to StyleManager configuration, for example I added color and set defaults to green (just for...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Best GrapesJS Plugins in 2025 (Updated List)
Discover the top free and premium GrapesJS plugins in 2025 — boost your editor with UI kits, Tailwind blocks, AI tools, and advanced page managers.
Tutorial
Blocky Plugin — 40+ Ready-Made Tailwind CSS Blocks for GrapesJS
Designed for creators who value both speed and precision, Blocky adds a library of 40+ pre-built Tailwind blocks directly inside your GrapesJS editor.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.