> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Developer Mode: The Code Editor

Direct HTML, CSS, and JavaScript access inside a Composer widget: structural changes, Twig expressions, forms, and custom interactions.


Developer mode gives you direct access to a Composer widget's HTML, CSS, and JavaScript. Use it for structural changes, custom interactions, Twig dynamic expressions, forms, and anything beyond updating text and images. See [Design vs Developer Mode](/uichemy-composer/concepts/design-vs-developer-mode) for when to reach for it over Design mode or AI Chat.

<Callout kind="info">
On sites with Role Manager active (Pro), Developer mode requires **Full** access. Content-only users are limited to Design mode.
</Callout>

### Opening the Code Editor

Select a Composer widget, open the **Style** tab, and click **Edit Code**. This opens the [Code tab](/uichemy-composer/uichemy-widget/code-tab): three panels, HTML, CSS, and JS, with a live preview.

### The HTML Panel

Supports standard HTML5, inline styles, Twig syntax for dynamic data (see [Twig](/uichemy-composer/design-data/twig)), the `data-atom-form` attribute for turning a form into a managed [Atom Form](/uichemy-plugin/forms/atom-form), and custom `data-*` attributes. Changes here automatically update the widget's available [editable fields](/uichemy-composer/concepts/editable-fields).

### The CSS Panel

CSS is automatically scoped, every rule is namespaced to the widget's unique selector so it can't leak into or be affected by anything else on the page. Media queries are automatically repositioned so they still cascade correctly after scoping.

### The JavaScript Panel

JavaScript runs after the widget renders in the DOM. Write standard JavaScript, scoping your selectors appropriately to avoid conflicting with other widgets or scripts on the page.

### Code Scope and Assets

The Code tab also has 4 scope levels, Standard (this widget), Page, Site, and Globals, plus an Assets panel for loading third-party libraries. See [Code Tab](/uichemy-composer/uichemy-widget/code-tab#standard-page-site-and-globals) for the full breakdown.

<Callout kind="tip">
Changes aren't saved to the page until you click **Apply** in the code editor, then **Update** or **Publish** in Elementor.
</Callout>

### Use Cases

- **Building forms and loops with Twig.** Anything beyond what the [Loops & Forms](/uichemy-composer/build/loops-and-forms)'s Basic fields can express.
- **Structural changes a client shouldn't make.** Add, remove, or restructure elements, then hand the page back for content-only editing in Design mode.
- **Integrating third-party libraries or custom interactions.** Write your own JavaScript, or load a library through the Assets panel.

### Limitations

- Requires **Full** access under Role Manager Pro, Content-only users can't open the Code tab at all.
- JavaScript runs after the widget renders, so your selectors need to avoid conflicting with other widgets or scripts on the page, there's no automatic sandboxing for JS the way there is for CSS.

### If It Doesn't Work

<ExpandableGroup>
  <Expandable title="My changes aren't showing up" default-open="false">
    Changes aren't saved until you click **Apply** in the code editor, then **Update** or **Publish** in Elementor. Both steps are required.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
    See the panel controls Developer mode gives you.
  </Card>
  <Card title="Paste and Import Code" href="/uichemy-composer/build/paste-and-import-code">
    Bring in code you already have instead of writing from scratch.
  </Card>
  <Card title="How the Composer Works" href="/uichemy-composer/uichemy-widget/how-it-works">
    See how this fits into the wider Composer toolbar.
  </Card>
  <Card title="Twig" href="/uichemy-composer/design-data/twig">
    Add dynamic data to the code you write here.
  </Card>
</Columns>