Missing option to erase style options
Hi @mingodad there is actually an option which enables the possibility to clear values but it's still a work in progress (have to deal better with composite types)
Read full answer below ↓Question
Hello ! In several style options there is no way to erase/reset several options like:
- font-family : if we select a font to experiment and decided that we do not want any custom there is no way to reset it.
- dimensions-width: if we experiment with some value and do not want any custom value we can erase the value but we still get a style in the css "width:auto" that in some cases mess up the layout (could we have the property removed completely ?).
The same apply to several other properties we need a default options in all of then to be able to remove/erase then from the generated styles.
Cheers !
Answers (3)
Hi @mingodad there is actually an option which enables the possibility to clear values but it's still a work in progress (have to deal better with composite types)
grapesjs.init({
...
styleManager: {
clearProperties: true,
...
}
})
@benvmatheson
const sm = editor.StyleManager;
sm.getConfig().clearProperties = 1;
sm.render();
A SCSS style tutorial would be nice
Related Questions and Answers
Continue research with similar issue discussions.
Issue #544
Add select with optgroup
Hello @artf I have recently started using grapeJs and found it awesome. Can you please help me on How can I add dropdown(select) with optgr...
Issue #2097
New views question
Hello all, Is there is any simple way to add a new view right next to the style manager? I would like to create a new view that will show s...
Issue #2193
[QUESTION] Reset trait on edit the content of a custom component
Hi, I have a custom component which content can be changed by switching trait select options, but also can be edited similar to the text co...
Issue #2989
How to append button in custom div
Hi @artf Is there any way to append all the defaults buttons of grapesjs in custom div like the same way we are append the style manager. h...
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
Integrating GrapesJS into a Next.js App with @grapesjs/react wrapper
Seamlessly integrate GrapesJS with React, TypeScript, and Next.js using the official @grapesjs/react package for modern app development.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.