Design vs Developer Mode
The two ways to edit a Composer widget's design, plus Chat AI 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 Chat AI. 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. 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, 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.
Chat AI (Pro)
Chat AI requires UiChemy Pro. On Free, the Chat tab is visible but shows an upgrade prompt instead of a working chat. See Free vs Pro.
Chat AI 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 | Chat AI (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 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 |
Even at Full access, Chat AI 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.
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 (Chat AI still requires Pro either way).