> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt). > Use it to discover all available pages before exploring further. # How the Composer Works The anatomy of a Composer: how design gets into it, what it stores, code scope, external dependencies, and what it can't do. 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](/uichemy-composer/concepts/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](/uichemy-composer/uichemy-widget/ai-chat-tab). - **Converted from Figma**, an AI Express Mode or Classic Mode conversion lands directly as a native Composer. See [What is a Composer?](/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget). - **Written directly in the code editor**, write or paste your own HTML/CSS/JS. See [Code Tab](/uichemy-composer/uichemy-widget/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](/uichemy-composer/concepts/one-composer-real-code#css-auto-scoping) for how scoping works, and its editable content is exposed through [Editable Fields](/uichemy-composer/concepts/editable-fields). ### The 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: Click any element on the canvas to select it directly, the same picking tool AI Chat uses. Mark up an area with a freehand drawing, add an optional note, then **Send**, useful for pointing AI Chat at something precise instead of describing it in words. Show or hide outlines around every element on the canvas. Opens a **Layers** panel with the section's full element tree. Right-click any element there for **Mark as loop** or **Mark as form**. See [Turn Any Element Into a Form](/uichemy-plugin/forms/atom-form). Opens a floating list of every change made to the section this session, newest first, each with a "what changed" label and how long ago. Click any entry to jump the section back to that point. A **Clear history** action at the bottom wipes the list (after a confirm step) without touching the section's current state. Undo and redo themselves stay keyboard-only, Ctrl+Z and Ctrl+Shift+Z, there's no separate undo/redo button. A floppy-disk button that reads **Save changes** once you have unsaved edits, **Saving…** while it writes, and **All changes saved** once it's done. Only appears when your site's front-end save mode is set to **Manual**, the default, see [General Settings](/uichemy-plugin/settings/general-settings). On **Autosave** it's hidden since there's nothing to manually save. The left-pointing arrow (‹). Opens the Composer panel with its **Chat**, **Editor**, and **Code** tabs, so you can edit the selected section. The right-pointing arrow (›), shown while the panel is open. Closes the Composer panel so you can see more of the canvas. Click the arrow again (now **Open panel**) to bring it back. Hides the toolbar entirely. ### 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. The dotted grip at the left end. Drag it to move the toolbar if it covers something you need to see. The font family dropdown. Pick a different font for the selected text. The globe beside Font and beside Color. Binds that field to one of your global styles instead of a fixed value. The font size, with its unit, for example **17 px**. The space between lines of text, for example **1.7**. Shows **Auto** when it isn't set. Left, center, right, or justify. The text color swatch. Click it to pick a new color. Binds the text to a live value, like a post title, instead of fixed text. Once bound, it shows the value's name, and you can click it to change it. Appears instead of the text controls when you select an image. Click it to pick a different image. **Example:** Click the **Manage your work...** paragraph with **Select / pick element**. The floating toolbar shows **17 px** and **1.7**. Change the size to 18 and the paragraph updates on the canvas right away. ### 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. Looking for the Code tab's Standard, Page, Site, and Globals scopes, or loading a third-party library? See [Code Tab](/uichemy-composer/uichemy-widget/code-tab#standard-page-site-and-globals). ### 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 handle WooCommerce cart/checkout flows.** Product display works (price, stock, gallery via dynamic data), but transactional UI (add to cart, checkout) uses WooCommerce's own output. - **It has no fixed structure to fall back on outside a builder.** The Composer widget works inside Elementor, Gutenberg, or Bricks, but needs one of them active to render. ### Related See the bigger picture of what a Composer widget is. Edit visually using the toolbar and panel just covered. Drop into the raw HTML, CSS, and JS instead. Describe a change in plain language and let AI make it. See the editable fields this toolbar and panel expose.