How to load css that can viewed in code viewer and also exported while saving

Quick answerby artf❤ 1

@AadilMehrajBhat First of all, display: 'block' is not a valid CSS value for that property (it should be display: block) and then .d-block is not used anywhere in your template so the result is automatically optimized by removing unused styles

Read full answer below ↓

Question

Hi :wave: I am trying to load some CSS within the editor as part of the theme, I am able to link stylesheets as part of loading but the problem that I am facing is when loading the styles directly using <style> tag, I am able to view the serialized version via editor.getStyle() but editor.getCss() only contains the protectedCss. I am confused about how the CSS styles are added within the template style css property when exporting or viewing within code viewer, also how to manipulate the CSS rules that are not component specific but generally. I tried to dig more in the docs especially inCssCo...

Answers (2)

artf• November 9, 2020

@AadilMehrajBhat First of all, display: 'block' is not a valid CSS value for that property (it should be display: block) and then .d-block is not used anywhere in your template so the result is automatically optimized by removing unused styles

GJSBlock• May 17, 2026

Thanks for reporting this, @aadilmehrajbhat. Great question about [HELP WANTED] How to load css that can viewed in code viewer and also exported while saving. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mo...

View full discussion on GitHub →