How the 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 Chat AI, 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 Chat AI (Pro), describe the section and your connected AI writes the HTML, CSS, and JS. See Chat AI Tab.
• Converted from Figma, an AI Express Mode or Classic Mode conversion lands directly as a native Composer. See What is 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 Chat AI, 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 Slots.

The Composer Toolbar

A floating toolbar sits at the bottom of the canvas whenever the Chat or Editor tab is active, it's hidden in the Code tab. It has six controls:

• Select / pick element, click any element on the canvas to select it directly, the same picking tool Chat AI uses.
• Draw on canvas, mark up an area with a freehand drawing, add an optional note, then Send, useful for pointing Chat AI at something precise instead of describing it in words.
• Toggle element outlines, show or hide outlines around every element on the canvas.
• Toggle Layers, 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.
• Minimise panel, collapses the right-side panel so you can see more of the canvas. Click the arrow again to restore it.
• Close, hides the toolbar entirely.

Use Cases

• Pointing Chat AI 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 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