Update the style of selected component
Ok, if you select an element like this: <div id="inul" class='class1'>Hello</div> You have these options:Use editor.getSelected().setStyle({ color: 'red' }) to change only the selected component style, so in result you will get:Change the selected CSS rule style (if one exists) by using editor.getSelectedToStyle().set...
Read full answer below ↓Question
I'm trying to update the css of selected element. Example: Selected element: <div id="inul" class='class1'>Hello</div> the above code was returned from component.toHTML(); CSS: .class1{ background-color: black; } the above css code was returned from editor.CodeManager.getCode(component, 'css', {cssc: editor.CssComposer}); I used textarea here(for example) and edit the css code and when I hit save button and run the code below editor.getSelected().em.set('style', content); The result is not what it should be it returns #inul { 0: .; 1: w; 2: o; 3: o; 4: m; 5: d; 6: a; 7: 1; 8: 9; 9: 4; 10: 5;...
Answers (3)
Ok, if you select an element like this: <div id="inul" class='class1'>Hello</div> You have these options:Use editor.getSelected().setStyle({ color: 'red' }) to change only the selected component style, so in result you will get:Change the selected CSS rule style (if one exists) by using editor.getS...
@froderf when you do .setStyle(content ); content should be an object like { color: 'red' } and not a string with also the selector
what I need here is something like
editor.CodeManager.setCode(component, 'css', {cssc: editor.CssComposer});
which update the style of selected component
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
Issue #2461
How to apply style or trait to parent or child element of selected component
For example i have component image that wrapped in div. I want to style image with multiple properties(horizontal position, border-radius,...
Issue #1560
Apply changes in style mager to one class
Hi @artf, I noticed that when I used the style manager it applies the style to the whole class of the component selected for example if i h...
Issue #639
Re-render Component on Canvas when tagName has changed
I'm trying to build a basic Header component that lets you select H1 to H6 with a trait. But when an option is selected, the canvas doesn't...
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 to Build an AI-Powered Page Builder with GrapesJS in 2026
What we learned building GJSDocs — from simple AI text generation to structured, context-aware visual editing
Tutorial
How Much Does It Cost to Build a SaaS Page Builder in 2026?
How much does it cost to build a SaaS page builder in 2026? Explore realistic development costs, timelines, features, and how using GrapesJS can reduce
Tutorial
PageKit: the GrapesJS application you'd have to build anyway
A source-available Next.js app around the open-source GrapesJS core — publishing, custom domains, leads, checkout and a plugin loader.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.