What is protectedCss option ? How to use it?
Hello @dukie66 one way to add default styles is adding a stylesheet in the initilalization of GrapeJS. This will load inside the canvas the stylesheet
Read full answer below βQuestion
I want to give some default style for some elements. Is there any option for doing that?
Answers (3)
Hello @dukie66 one way to add default styles is adding a stylesheet in the initilalization of GrapeJS. This will load inside the canvas the stylesheet
Its neccessary to write the full URL to load the CSS stylesheet. or Here is an example using protectedCss. Checkout your CSS rules in case you are misspelling something. https://codepen.io/jcarizza/pen/rNNeQvG
@jcarizza Thanks for commenting. If you see when you export canvas there are always some default styles for "body" and "*". Like that, I want to give my all "img" element width of 100%. Putting an external css file in the canvas option is not working for me. Maybe I'm doing something wrong. canvas:...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1662
How we can reinitialise editor
Hi @artf, Hope you are doing good. How we can reinitialise the editor with json data. We want to reinitialise editor with some of the previ...
Issue #2012
How to add script for all widgets(like protectedCss)
I want to add some functions for all components accessible. when initialize editor, there is a option like protectedCss. Isn't there a way...
Issue #2170
Custom component - how to set editable to true
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...
Issue #1780
How to change extra dropdown for link change trait
Hello @artf , I want to give one more functionality to user like user can change any link with default links drop down. In above image i wa...
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
Messaging on gjs.market: talk to a studio before you buy, not after
We've launched private messaging between buyers and studios. One thread per buyerβstudio pair, the whole history in one place.
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component β click to select, then one-click fix.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.