Gjs-selected Style is Hardcoded
Hi @anlumo you're right, unfortunately, component status styles are rendered inside iframes. I've tried to put them outside by introducing this option but that doesn't handle multiple selections yet. So, at the moment, the only way to handle them properly is to use this option:
Read full answer below ↓Question
This definition:
is always appended to the frame. It contains the color definition for selected elements (that blue outline). This color cannot be changed, because there's an !important here. Since this is appended to the body, adding a stylesheet in the header does not override it, even when I use !important there as well.
For my use case, the critical issue is that I want to be able to print the document created in grapesjs, but printouts should not contain the selection outline. I can write @media print { .gjs-selected { outline: none !important; } }, but that won't do anything since it's overridden by this hardcoded css definition.
Also, being able to change the color to fit the page's corporate identity would be good.
Answers (4)
Hi @anlumo you're right, unfortunately, component status styles are rendered inside iframes. I've tried to put them outside by introducing this option but that doesn't handle multiple selections yet. So, at the moment, the only way to handle them properly is to use this option:
grapesjs.init({
// ...
canvasCss: `
.gjs-selected {
outline: 3px solid red !important;
}
`,
})
Hi @mingxin-yang i belive that you have to follow the same rule that @artf said. But using the corresponding classes
grapesjs.init({
// ...
canvasCss: `
.gjs-tools .gjs-badge { /* for the label */
background-color: red;
}
.gjs-toolbar { /* for the toolbar */
background-color: red;
}
`,
})
Posted Free plugin for set colors
Borders: https://gjs.market/products/borders-color-around-selected-component
Thanks for reporting this, @anlumo.
Thanks for sharing your report about gjs-selected Style is Hardcoded. To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- Steps to reproduce the issue
What helps most:
- Minimal code example (not your full project)
- Screen recording or screenshot showing the issue
- Expected vs actual behavior clearly stated
- GrapesJS configuration you're using
With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6663
Symbols break when loading pages progressively (instances lose __symbol link)
Here is a video showing the bug: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS version [x] I con...
Issue #5810
Unnecessary Canvas style
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Arc Version 1.35.0 / Chromium Engine 123.0Re...
Issue #3252
Does getHtml() remove the inline style property?
I was fiddling with ways that you could change the style of elements inside the canvas and i noticed that by using the color-picker trait t...
Issue #4208
Style click state bug in every element
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave Last, tested on chrome last and Safa...
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
GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026
A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck — pricing, AI features, lock-in, and a one-line rule for picking the right one
Tutorial
Big news from DevFuture — we just repriced everything
Hey GrapesJS community 👋 we just repriced all prices on plugins.
Tutorial
Why use grapesjs shadcn for your template builder
Skip months of editor plumbing and start with a fully working visual builder — polished UI included.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.