> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# What Is Composer?

Composer is the flexible, design-first widget the UiChemy plugin adds to Elementor, build any section visually, in code, or with AI chat.


**UiChemy** is the WordPress plugin, built around a single widget called **Composer**. Instead of giving you a library of fixed widgets, it gives you one flexible container that holds any HTML, CSS, and JavaScript design, and lets you edit that design through a visual layer editor, a code editor, or a built-in AI chat, without leaving Elementor.

The Composer widget works with Elementor (Free or Pro), Gutenberg (WordPress's built-in editor), and Bricks Builder.

### What Composer Adds to Your Site

Installing **UiChemy** gives you access to:

<ExpandableGroup>
  <Expandable title="Composer widget" default-open="false">
    One Elementor widget that holds any section design: hero, pricing table, team grid, navigation bar, or anything else.
  </Expandable>
  <Expandable title="Two editing modes" default-open="false">
    Visual layer editor (Design mode) and raw HTML/CSS/JS code editor (Developer mode), both available in Free.
  </Expandable>
  <Expandable title="In-editor AI Chat (Pro)" default-open="false">
    Describe any section or change in plain English using your own connected AI, and it writes the HTML, CSS, and JavaScript directly into the widget.
  </Expandable>
  <Expandable title="Theme Builder" default-open="false">
    Build headers, footers, single post templates, archive pages, WooCommerce product templates, and 404 pages using the same Composer widget.
  </Expandable>
  <Expandable title="Global Style Manager" default-open="false">
    Define CSS variables, typography classes, and layout utilities once and use them across every section on your site.
  </Expandable>
  <Expandable title="Forms" default-open="false">
    Any HTML form inside a Composer widget becomes a managed form: captures submissions to your database, sends email notifications, and fires webhooks.
  </Expandable>
  <Expandable title="AI over MCP" default-open="false">
    Connect Claude, Cursor, or any MCP-compatible AI client directly to your WordPress site so the AI can read, create, and edit pages through natural language, included in Free.
  </Expandable>
  <Expandable title="Role Manager" default-open="false">
    Control which WordPress user roles can access the visual editor, code editor, AI chat, and theme builder.
  </Expandable>
  <Expandable title="White Label" default-open="false">
    Replace UiChemy branding with your own product name and logo when delivering sites to clients.
  </Expandable>
</ExpandableGroup>

### How the Composer Differs From Other Widgets

A standard Elementor widget has a fixed structure. A Heading widget always outputs a heading. An Image widget always outputs an image. You configure these widgets through dropdowns and fields, but you cannot change what they fundamentally output.

The Composer has no fixed structure. It stores whatever HTML, CSS, and JavaScript design you put inside it. That design can come from the AI chat, an imported Figma file, or your own code. Because the output is real code, the widget can render anything: a three-column testimonial grid, a full-bleed video section, an animated counter, a responsive pricing table.

One widget, unlimited section types.

### A Typical Workflow

Building with code (Free):

1. Add a Composer widget to any Elementor section.
2. Click **Edit Code** to open the HTML/CSS/JS editor.
3. Paste or write your section's HTML, CSS, and JavaScript.
4. Update text, images, and links through the Elementor panel using editable fields.

Building with AI Chat (Pro):

1. Add a Composer widget to any Elementor section.
2. Open the **AI Chat** tab and describe the section you want in plain English.
3. Your connected AI writes the HTML, CSS, and JavaScript directly into the widget.
4. Update text, images, and links through the Elementor panel without touching code.
5. For structural changes, ask again or switch to the code editor.

### Who Composer Is For

- **Developers and freelancers** who want to write clean, scoped HTML/CSS/JS inside Elementor without fighting its component system.
- **Designers** who want full visual control over sections without being limited to what a pre-built widget can do.
- **Agencies** who need to deliver finished sites to clients with controlled access, clients can update content, but cannot break the design.
- **AI-first workflows**, if you work with Claude, Cursor, or any MCP-compatible AI client, UiChemy turns your WordPress site into something the AI can read and edit directly.

<Callout kind="info">
The Composer widget, its Editor and Code tabs, MCP integration, Global Style (with limits), and Theme Builder (Header, Footer, Single Post/Page, 404) are available in the free version. AI Chat, archive/search/WooCommerce Theme Builder templates, most dynamic data providers (Site, User, Term, Request), Role Manager, and White Label require **UiChemy Pro**, and Pro unlocks fully once the plugin is active. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro) for the full breakdown.
</Callout>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Does UiChemy replace Elementor?" default-open="false">
    No. UiChemy runs inside Elementor as a plugin and registers the Composer widget. You still use Elementor as your page builder; UiChemy adds one widget and a set of tools to it.
  </Expandable>

  <Expandable title="Do I need coding skills to use Composer?" default-open="false">
    It depends on which plan you use. With **UiChemy Pro**, AI Chat can build complete sections from a plain-English description with no code required. With the free version, you write or paste HTML and CSS directly into the code editor. In both plans, the Elementor panel lets you update text, images, and links without touching code once a section is built.
  </Expandable>

  <Expandable title="Can I use Composer with Elementor Free?" default-open="false">
    Yes. Composer works with both Elementor Free and Elementor Pro.
  </Expandable>

  <Expandable title="What happens to my content if I deactivate UiChemy?" default-open="false">
    The HTML, CSS, and JavaScript saved inside each Composer widget remain in your database. The front end will not render Composer widget output while the plugin is deactivated, but no content is deleted. Reactivating the plugin restores everything.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Requirements" href="/uichemy-composer/getting-started/requirements">
    Check the WordPress, PHP, and builder versions you need.
  </Card>
  <Card title="Install UiChemy" href="/uichemy-composer/getting-started/install">
    Get the plugin installed and activated on your site.
  </Card>
  <Card title="How It Works" href="/uichemy-composer/uichemy-widget/how-it-works">
    See what actually happens when a Composer widget renders.
  </Card>
  <Card title="Dashboard Tour" href="/uichemy-composer/getting-started/dashboard-tour">
    See where everything lives once UiChemy is installed.
  </Card>
</Columns>