How UiChemy Composer Works

A Composer is a blank container that stores any HTML, CSS, and JavaScript design you put inside it. Unlike fixed-structure Elementor widgets, it has no predefined output, you fill it through AI Chat, a Figma or Classic Mode conversion, or the code editor, and the widget renders exactly what you build. See One Composer, Real Code for why it's built this way.

How a Design Gets Into the Widget

A Composer's content comes from one of three places:

• Generated by AI Chat (Pro), describe the section and your connected AI writes the HTML, CSS, and JS. See AI Chat Tab.
• Converted from Figma, an AI Express Mode or Classic Mode conversion lands directly as a native Composer. See Editing a Composer.
• Written directly in the code editor, write or paste your own HTML/CSS/JS. See Code Tab.

Once a design is inside the widget, you edit it through any of the three tabs, Editor, Code, or AI Chat, no need to touch code again unless you want to.

What the Widget Stores

Every Composer stores three things internally:

• HTML, the complete markup for your section: headings, images, links, cards, buttons, all of it.
• CSS, the complete styles: layout, colors, fonts, spacing, responsive breakpoints.
• JavaScript, optional interactions: dropdown menus, tabs, counters, animations.

All three live inside the widget itself, so a Composer is fully self-contained. Copy it to another page and the design comes with it, no external stylesheets or scripts needed. Its CSS is automatically scoped to that widget, see One Composer, Real Code for how scoping works, and its editable content is exposed through Content Fields.

The UiChemy Composer Bottom Toolbar

The Composer bottom toolbar sits at the bottom of the canvas whenever the Chat or Editor tab is active, it's hidden in the Code tab. Hover any button to see its name, for example Draw on canvas or Select / pick element. It also has the arrow button that opens and closes the Composer panel (Chat, Editor, Code). Its controls:

The Floating Toolbar

When you click an element with Select / pick element, a floating toolbar appears just above it on the canvas. It gives you the most common text controls right where you're working, so you don't have to go to the panel. Each control is the same field as in the panel, so a change in one shows in the other. Hover a control to see its name.

Adding Elements from the Layers Panel

The Layers panel isn't just for selecting existing elements. When a section (or an empty container inside it) has nothing in it yet, an Add Layer picker lets you insert one, searchable by typing, grouped into Containers (div, section, article, header, footer, nav, and more), Headings & Text (h1–h6, paragraph, blockquote), Inline (span, strong, em, code, and more), Interactive (link, button, disclosure), Media (image, video, audio), and a Dynamic group for loop- and form-bound elements. Drag any layer in the tree to reorder it relative to its siblings.

Use Cases

• Pointing AI Chat at a precise spot, use Draw to mark the exact area instead of describing its location in words.
• Checking a section's structure at a glance, toggle element outlines or open Layers to see every element without clicking through each one.
• Marking an element as a form or a loop, right-click it in the Layers panel instead of switching to the Editor tab's Developer mode.

What the Widget Can't Do

• It doesn't output a fixed structure. If you need a widget with a predefined layout you configure through dropdowns, Elementor's own widgets or other plugins are more appropriate.
• It doesn't replace WooCommerce's cart and checkout. Product display works (price, stock, gallery via dynamic data), and the <uichemy-woo-*> tags let you style the cart, checkout, and add-to-cart form, but the transactional parts still run on WooCommerce's own output. See WooCommerce Data.
• It has no fixed structure to fall back on outside a builder. The Composer widget works inside Elementor or Gutenberg (Bricks is coming soon), but needs one of them active to render.

Related