One Composer, Real Code
Why UiChemy ships a single flexible widget instead of a fixed widget library, and why that widget stores actual HTML, CSS, and JavaScript rather than configuration.
Most page builder add-ons ship a library of dozens of widgets: a hero widget, a testimonials widget, a pricing widget, a team grid widget. UiChemy ships one: the Composer widget. Understanding why, and what it means for how the widget works, is the foundation for everything else in UiChemy.
The Problem With Widget Libraries
When a plugin ships a pricing widget, that widget outputs pricing HTML. You can configure the number of columns, the colors, the labels, but you cannot change what the widget fundamentally is. If you need a pricing table that looks different from what the widget supports, you're stuck, or you're writing custom CSS to override a structure you don't control.
This isn't a criticism, it's just a constraint. Fixed-structure widgets are predictable and easy to configure. But when your design is custom, the constraints become friction.
What the Composer Widget Does Instead
The Composer widget has no fixed structure. It's a container that stores whatever HTML, CSS, and JavaScript you put inside it. The design, the real code, lives inside the widget itself.
This means:
- A hero section is a Composer widget with hero HTML, CSS, and any JavaScript it needs.
- A pricing table is a Composer widget with pricing HTML, CSS, and any JavaScript it needs.
- A navigation bar is a Composer widget with nav HTML, CSS, and any JavaScript it needs.
The widget adapts to whatever you put in it. One widget, unlimited section types.
| Widget library | Composer | |
|---|---|---|
| Structure | Fixed by the widget | Whatever you build |
| Customization | Only the settings the widget offers | Any layout, style, or interaction |
| AI editing | AI can only change settings | AI writes and edits the real code |
| Moving a design | Rebuild it from settings | Copy the widget, the whole design comes with it |
Example: You need a pricing table with a monthly/yearly toggle and a highlighted "Most popular" card. A fixed pricing widget may not offer that toggle at all. With the Composer, the toggle, the cards, and the highlight are all part of one widget's code, so you can build it exactly as designed.
The Design Is Real Code
The key distinction is that Composer stores code, not configuration. When a traditional widget stores "number of columns: 3", Composer stores the actual HTML for those three columns, the markup for each card, and the CSS that lays them out side by side.
This has several important implications:
- You are not limited by what a widget can output. If you can write it in HTML and CSS, it can go in a Composer widget: custom grid layouts, complex animations, multi-level navigation menus, interactive JavaScript components, all of it works.
- AI can write and edit it. Because the output is real code, an AI that knows HTML and CSS can generate it, read it, and modify it. This is why AI Chat and AI to WordPress work, the AI isn't configuring a widget, it's writing code.
- The design is portable. Copy a Composer widget from one page to another and the entire design, HTML structure, CSS styles, JavaScript behavior, moves with it. There are no external stylesheets or scripts to reconnect.
CSS Auto-Scoping
Any CSS you write inside a Composer widget only affects that widget. UiChemy handles this for you automatically, so a style you write for one section can never change another section, a theme element, or a second Composer widget on the same page.
You write CSS the normal way, and the containment happens on its own, in Elementor, Gutenberg, and Bricks alike.
What This Means for Developers
If you're a developer, the Composer widget is essentially a self-contained HTML/CSS/JS sandbox inside your page builder. You write real code, it renders real output, and it's contained so it cannot break anything else on the page.
You don't fight the builder's component system. You don't write override CSS on top of widget output you can't control. You write the design directly.
What This Means for Designers and Content Editors
Even though the widget stores code, you don't need to touch code to use it. Editable Fields automatically extract every text, link, and image from the widget's HTML and surface them as editable fields in your builder's panel.
AI Chat can generate the initial code from a plain-English description. Once the design exists, content editors can update text and swap images through the panel, never opening the code editor.