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

# Design vs Developer Mode

The two ways to edit a Composer widget's design, plus AI Chat as a third, Pro-only path, and how Role Manager controls who can access each.


Every Composer widget can be edited in one of three ways: **Design mode**, **Developer mode**, or **AI Chat**. They aren't separate products, they're three views onto the same underlying HTML, CSS, and JavaScript. Which one you reach for depends on who you are and what you're changing.

Design and Developer are both reached from the same switch, in the top row of the [Editor tab](/uichemy-composer/uichemy-widget/editor-tab). Switching that to Developer doesn't just add controls to the Editor tab itself, it also unlocks a separate, third top-level tab, the [Code tab](/uichemy-composer/uichemy-widget/code-tab), which is where the actual raw HTML/CSS/JS access lives. Switch back to Design and the Code tab disappears from the top navigation.

### Design Mode

Design mode is the default way to update an existing design. You work entirely through the Editor tab's style panels, without touching code, and the Code tab isn't reachable at all.

**What you can do:**

- Edit content: headlines, paragraphs, button labels.
- Manage links: URL and new-tab toggles.
- Update images: selection and alt text.
- Adjust the visual layer: colors, spacing, and element order, through the seven style controls.

**What's intentionally out of reach:**

- Adding or removing design elements.
- Restructuring the layout.
- Writing Twig expressions.
- Adding forms or loading external libraries.
- Changing responsive breakpoints.

These limits are the point, Design mode lets a content editor safely update a page without risking the design.

### Developer Mode

Developer mode adds two things at once: an element selector, class management, an Attributes panel, and the Mark as dropdown, right inside the Editor tab, and access to the separate **Code tab** for full HTML, CSS, and JavaScript. It's for structural changes:

- Restructuring the layout or the DOM.
- Writing Twig expressions for dynamic data.
- Adding forms.
- Loading external libraries.
- Writing custom CSS, including media queries, and custom JavaScript.

CSS you write here is automatically scoped to the widget, everything else executes as written.

### AI Chat (Pro)

<Callout kind="info">
AI Chat requires **UiChemy Pro**. On Free, the Chat tab is visible but shows an upgrade prompt instead of a working chat. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

[AI Chat](/uichemy-composer/uichemy-widget/ai-chat-tab) is a third way in: describe the change in plain language and your connected AI writes it directly into the widget, the same HTML/CSS/JS a developer would write by hand in Developer mode. It's well suited to generating an initial design, making structural changes without writing code yourself, or requests like "stack this into a single column on mobile."

### Choosing Between Them

| You want to... | Use |
|---|---|
| Update text, a link, or an image on an existing section | Design mode |
| Restructure the layout, add dynamic data, or load a library | Developer mode |
| Describe a change in plain English and let AI write the code | AI Chat (Pro) |

You're never locked into one, switch freely between all three on the same widget.

### Role Manager Access Control

On sites with **UiChemy Pro**, [Role Manager](/uichemy-plugin/role-manager/overview) can additionally restrict which WordPress user roles reach which modes:

| Access level | What it allows |
|---|---|
| No access | No UiChemy visibility |
| Content only | Design mode only, no adding/removing widgets, no structural changes, no AI prompts |
| Full access | Design mode and Developer mode, add/remove widgets, restructure layout |

<Callout kind="warning">
Even at Full access, AI Chat isn't automatic, it's a separate feature toggle that defaults to **Off** for every non-administrator role, on top of the plan-level Pro requirement above. Both gates apply independently.
</Callout>

Administrators always keep full access to everything regardless of settings. Role Manager itself is a Pro feature, on the free plan there's no role restriction, any user who can edit the page can reach Design and Developer mode (AI Chat still requires Pro either way).

### Related

<Columns cols={2}>
  <Card title="Editor Tab" href="/uichemy-composer/uichemy-widget/editor-tab">
    See Design mode's visual editing surface up close.
  </Card>
  <Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
    See Developer mode's raw HTML, CSS, and JS view.
  </Card>
  <Card title="AI Chat Tab" href="/uichemy-composer/uichemy-widget/ai-chat-tab">
    See the third, Pro-only way to edit: describing the change.
  </Card>
  <Card title="One Composer, Real Code" href="/uichemy-composer/concepts/one-composer-real-code">
    Understand the single underlying code all three modes edit.
  </Card>
</Columns>