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: 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
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
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
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 We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Tutorial
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.