>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3520994. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !281 >>> <h3 id="overview">Overview</h3> <p>The code editor UI uses <a href="https://github.com/nomcopter/react-mosaic"><code>react-mosaic</code></a> to lay out the different panels to interact with the code, preview, and component data. We don't make use of a lot of features from <code>react-mosaic</code> &mdash; certainly not its window management and drag &amp; drop capabilities. The only feature we use is resizing the panels. This means unnecessary complexity.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Depending on how the UI of the code editor will evolve, we may want to consider moving away from <code>react-mosaic</code> in favor of a more lightweight solution. The solution can be as simple as styling we introduce ourselves, or we can look into using e.g. <a href="https://react-resizable-panels.vercel.app/"><code>react-resizable-panels</code></a>, also <a href="https://ui.shadcn.com/docs/components/resizable">being used by shadcn/ui</a>, which is a good indicator of quality.</p> <h3 id="ui-changes">User interface changes</h3> <p><img src="https://www.drupal.org/files/issues/2025-10-31/panels.gif" alt="Gif showing new UI"></p> > Related issue: [Issue #3510436](https://www.drupal.org/node/3510436) > Related issue: [Issue #3555398](https://www.drupal.org/node/3555398)