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 We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
Tutorial
Introducing GJS.Market Services: ship your GrapesJS editor without the integration risk
It's everything that usually eats weeks of engineering time, scoped and priced up front. No open-ended hourly surprises.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.