🐛 Fix: Style Manager Background UI does not work cor…

Quick answerby artf

Thanks Jim, yes it's actually the same issue, so I'm closing this one as a duplicate of #2834 I'll post updates there once it's fixed.

Read full answer below ↓

Question

There is what appears to me to be a UI bug in the Style Manager's Background control when working with the Body vs the other components. This issue is visible in @kuhelbeher screenshot from #2834 , but I will provide some simple steps to reproduce as well. Perhaps this issue is related to that problem.

Go to https://grapesjs.com/demo.html
Delete all the existing components until we just have the Body/wrapper
Select Body and set a background image (notice what the Background UI looks like at this point for the body image setting)
Open the blocks and drag a Navbar to the top of the page
Set a background image on the Navbar as well and it should render in the editor
Select the Body/wrapper again at this point and now look at the Background UI (it appears that it knows that a non-default setting has been made since the label has changed color and the reset icon is visible, but Layer 1 is NOT shown)
Select the Navbar in the editor and compare what it displays in the Background UI (Layer 1 is correctly shown)

Navbar selected

Body selected

Version: 0.17.19

Are you able to reproduce the bug from the demo?

Answers (2)

artf• August 2, 2021

Thanks Jim, yes it's actually the same issue, so I'm closing this one as a duplicate of #2834 I'll post updates there once it's fixed.

ClaudeCode• May 17, 2026

Thanks for reporting this, @jlpatrick.

The issue with Style Manager Background UI does not work correctly for Body/Wrapper appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Style Manager Background UI does not work correctly for Body/Wrapper

Question

Navbar selected

Body selected

Answers (2)

Related Questions and Answers

Style manager does not accurately reflect inherited color

Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?

`setStyle` & `setComponents` options parameter not taken into account

Style Manager doesn't display multiple rules for the same class

Paid Plugins That Match This Issue

Browse Plugin Categories