Design vs Developer Mode
The Design and Developer views of UiChemy Composer's Editor tab, how they differ, and how Editor mode and Role Manager control who gets which.
The Composer panel has three tabs at the top: Chat, Editor, and Code. Inside the Editor tab, a switch lets you pick Design or Developer. Both modes are on every plan. The switch only changes how much the Editor tab shows. The Code tab stays available in both, so you can open the raw HTML, CSS, and JavaScript whichever view you're in.
Design
Visual editing for clients. Design is the simple view, made for updating a page without risking its layout.
- Picks content only: clicking the canvas selects text, images, icons, filled boxes, and the section itself, not the wrappers around them.
- Simple panels: for example Assets (the section's images, icons, and videos) and Background (Color or Image, Solid or Gradient).
- No structural edits: duplicate, copy, cut, paste, delete, and Mark as aren't available, and the right-click menu on the canvas doesn't open.
- Simpler layers list: the Layers panel shows only content (text, media, icons) and section roots.
Developer
Full classes, code and scopes. Developer is the full view, for changing structure and styling in detail.
- Every element: the selector reaches every wrapper, and the Layers panel shows the full tree.
- Full inspector: an element selector (This element), Content, Attributes (+ Add Attribute), Typography, Layout, Spacing, Background, Border, Effects, Animation, Schema, and Custom CSS.
- Structural edits: duplicate, copy, cut, paste, delete, and Mark as, from the toolbar, the canvas right-click menu, or keyboard shortcuts.
The Code Tab and AI Chat
- Code tab: available in both Design and Developer. It holds the widget's HTML, CSS, and JavaScript, with Standard, Page, Site, and Globals scopes. CSS you write is scoped to the widget automatically.
- Chat tab: AI Chat lets you describe a change in plain language and have an AI apply it.
Choosing Between Them
| You want to... | Use |
|---|---|
| Update text, an image, or a background on an existing section | Editor → Design |
| Change classes, attributes, layout, or move and duplicate elements | Editor → Developer |
| Edit the HTML, CSS, or JavaScript directly | Code tab |
| Describe a change and let AI write it | Chat tab |
You can switch between Design and Developer at any time on the same widget.
Locking the Mode
The site-wide Editor mode setting, in UiChemy → Settings → General, controls the switch:
| Editor mode | What editors get |
|---|---|
| Both (default) | The Design / Developer switch is shown, and each user's last choice is remembered |
| Design | The Editor tab is locked to Design, and the switch is hidden |
| Developer | The Editor tab is locked to Developer, and the switch is hidden |
With UiChemy Pro, Role Manager can set the mode per role, or follow the site-wide setting.
Hiding the Code Tab From Clients
Editor mode doesn't hide the Code tab. To keep clients and content writers away from code, set their role to Content only in Role Manager (Pro):
| Access level | What it allows |
|---|---|
| No Access | No UiChemy access |
| Content Only | Edit text and images only. No design, code, or globals, and no Code tab. |
| Custom | The full editor, with only the features you pick |
| Full Access | The full editor and every feature |
Administrators always have full access. On the free plan there's no role restriction, so anyone who can edit the page gets the same editor.
Good to Know
- Links have a
nofollowtoggle. Next to the URL and open-in-new-tab, each link field has anofollowswitch that addsrel="nofollow", useful for affiliate or sponsored links. - Background images are found automatically. Elements that use a CSS background image show up as image pickers, so you can swap them without touching the code.
- Dynamic data works on every field. Every text field, link URL, and image picker has a dynamic data icon. See Content Fields.