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

# Editing with Code Using the Code Tab

Work directly in HTML, CSS, and JS, or paste in a layout you already built, using the Composer's Code tab.


**Use the Code tab to work directly in code, or to bring in a layout you already built.** It gives you direct access to the section's HTML, CSS, and JS in one place, pick this tab when you'd rather write or paste code than click through visual controls.

<Callout kind="info">
The **Code** tab only appears once the [Editor tab](/uichemy-composer/uichemy-widget/editor-tab) is switched to **Developer**. Switch to Design and it disappears from the top navigation.
</Callout>

<Callout kind="warning">
Editing custom **CSS** and **JavaScript** is a **UiChemy Pro** feature. Code that's already in a widget, for example from an imported design, keeps rendering on Free. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### What You Can Do

- **Edit the code directly.** Adjust the HTML, CSS, or JS for the section.
- **Paste in a layout.** Designed something with coding tools? Paste it in and it renders right away.
- **Keep editing visually.** Anything you write here stays fully editable back in the [Editor tab](/uichemy-composer/uichemy-widget/editor-tab).
- **Clean up as you go.** Each panel (HTML, CSS, JS) has its own **Format** button to auto-indent your code, and a **Copy** button to copy it out.

<Callout kind="info">
Screenshot: the Code tab showing the section's HTML, CSS, and JS with a live preview.
</Callout>

### How to Make a Change

1. **Open the section's code.** See its HTML, CSS, and JS together in one view.
2. **Edit directly, or paste in a layout.** Adjust the code by hand, or paste in something you already built, it renders right away.
3. **Check the live preview.** See your changes reflected instantly as you type.
4. **Keep refining visually.** Anything you write here stays fully editable back in the [Editor tab](/uichemy-composer/uichemy-widget/editor-tab).

### Standard, Page, Site, and Globals

Everything above is the **Standard** scope, this section's own HTML/CSS/JS. The Code tab has 4 scope tabs in total:

<ExpandableGroup>
  <Expandable title="Standard" default-open="false">
    This section's own HTML, CSS, and JS, exactly what's covered above. Loads on every page this widget appears on. Most Composer widgets use Standard scope for everything.
  </Expandable>

  <Expandable title="Page" default-open="false">
    Raw code injected only on the page that contains this widget, split into two sub-tabs:

    - **Head**: code placed **before `</head>`** on this page, for example a page-specific meta tag or a stylesheet needed only here.
    - **Footer**: code placed **before `</body>`** on this page, for example a tracking pixel that should only fire on this one page.
  </Expandable>

  <Expandable title="Site" default-open="false">
    Raw code injected on **every page of the site**, also split into Head and Footer sub-tabs:

    - **Head**: code placed **before `</head>`** on every page, useful for loading a font or an analytics script once, site-wide.
    - **Footer**: code placed **before `</body>`** on every page, useful for a chat widget script or a tracking snippet that needs to load everywhere.

    Any Composer widget's Site scope edits the same shared code, changing it in one widget updates it for the whole site.
  </Expandable>

  <Expandable title="Globals" default-open="false">
    A site-wide summary of your global styles: Colors, Text, and Sizes, plus **Sync with Elementor**. See [The Globals Tab](#the-globals-tab) below, and [Global Style Overview](/uichemy-composer/global-style/overview) for the full Globals manager.
  </Expandable>
</ExpandableGroup>

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 440px;">
  <video controls width="100%" style="display: block; border-radius: 8px;">
    <source src="https://res.cloudinary.com/ekxmy1t9/video/upload/v1791376049/uichemy-docs/uichemy-composer/uichemy-widget/code-tab/UiChemy-Composer-Code-Standard-Page-Site.mp4" type="video/mp4" />
  </video>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Standard, Page, and Site scopes in the Code tab</em></p>

#### The Globals Tab

The **Globals** tab shows a site-wide summary of your global styles, with the total count at the top, for example **Site-wide · 79 globals**. Each row opens the full Globals manager on that section.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 440px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1791376772/uichemy-docs/uichemy-composer/uichemy-widget/code-tab/UiChemy-Composer-Code-Globals.webp" alt="" width={495} height={334} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Globals tab: Colors, Text, and Sizes, with Sync with Elementor</em></p>

<ExpandableGroup>
  <Expandable title="Colors" default-open="false">
    Your global colors, with a preview of the first few swatches and the total count. Click to open them in the Globals manager.
  </Expandable>

  <Expandable title="Text" default-open="false">
    Your global fonts and typography classes. Click to open them in the Globals manager.
  </Expandable>

  <Expandable title="Sizes" default-open="false">
    Your global size values, with the total count. Click to open them in the Globals manager.
  </Expandable>

  <Expandable title="Classes" default-open="false">
    Your other reusable classes. This row only shows once you have at least one.
  </Expandable>

  <Expandable title="Sync with Elementor" default-open="false">
    Compares your UiChemy globals with Elementor's globals, and opens a **Sync with Elementor Globals** window so you can bring the two in line. Pick what to sync, then click **Sync**.
  </Expandable>
</ExpandableGroup>

#### Sync with Elementor Globals

Click **Sync with Elementor** at the bottom of the Globals tab. A **Sync with Elementor Globals** window opens and lists every difference between your UiChemy globals and Elementor's, colors and typography alike. Choose what to sync, then click **Sync**.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 440px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1791440313/uichemy-docs/uichemy-composer/uichemy-widget/code-tab/UiChemy-Composer-Code-Globals-Sync-Elementor.webp" alt="" width={528} height={788} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Sync with Elementor Globals window: Add to Elementor and Add to UiChemy lists, with every item ticked</em></p>

The window shows up to four groups:

<ExpandableGroup>
  <Expandable title="Add to Elementor (from UiChemy)" default-open="false">
    Globals that exist in UiChemy but not in Elementor, for example a color like **neutral** `#d6d6d6` or a typography class like `.text-text-two`. Every item is ticked, so all of them are copied into Elementor when you click Sync.
  </Expandable>

  <Expandable title="Add to UiChemy (from Elementor)" default-open="false">
    Globals that exist in Elementor but not in UiChemy, for example a color like **text** `#7A7A7A` or a class like `.text-primary`. Every item is ticked, so all of them are copied into UiChemy when you click Sync.
  </Expandable>

  <Expandable title="Value updates (same name, different values)" default-open="false">
    Globals that have the same name in both, but different values, for example `.text-heading-two`. For each one, choose **Use UiChemy's** to update Elementor, **Use Elementor's** to update UiChemy, or **Skip** to leave both as they are. Every item starts on **Skip**, so nothing is updated unless you choose which value to use.
  </Expandable>

  <Expandable title="Possible renames (same value, different name)" default-open="false">
    Globals that have the same value but different names. Each row shows the Elementor name crossed out, an arrow, and the UiChemy name, for example ~~Primary Tint~~ → **primarytint**. Choose **Rename** to rename the Elementor global to the UiChemy name, **Keep both** to treat them as two separate globals, or **Skip** to leave it.
  </Expandable>
</ExpandableGroup>

#### Choosing What to Sync

- **Untick anything you don't want to sync.** Each item in **Add to Elementor** and **Add to UiChemy** has its own checkbox. Untick one to leave it out.
- **Untick a whole group at once.** The checkbox beside a group's name ticks or unticks every item in that group.
- **Click Sync** to apply your choices, or **Cancel** to close without changing anything.

If everything already matches, the window says **"UiChemy and Elementor globals are already in sync. There is nothing to reconcile."**

<Callout kind="tip">
**Example:** You want to bring Elementor's colors into UiChemy, but not push UiChemy's own colors into Elementor. Untick the **Add to Elementor** group checkbox, leave **Add to UiChemy** ticked, and click **Sync**.
</Callout>

<Callout kind="tip">
**Example:** Your brand purple is `#4B22CC` in UiChemy but `#5B32DC` in Elementor. It shows under **Value updates**, set to **Skip**. Choose **Use UiChemy's** and click **Sync**, and Elementor's global color updates to `#4B22CC`.
</Callout>

### Loading a Third-Party Library

Add a library's URL under the **Assets** panel's **Custom URL** tab, choosing JS, CSS, or Font, with load-order and injection-location controls. The Assets panel also has a **Catalog** tab of popular libraries, each entry carries a pinned CDN URL, so picking one adds it as a real asset directly, the same as pasting its URL into Custom URL yourself, no extra copy-paste step needed.

### Use Cases

- **Bringing in a section built elsewhere**, paste HTML and CSS from an AI tool, a template library, or a Figma export. See [Paste and Import Code](/uichemy-composer/build/paste-and-import-code).
- **Writing structural changes by hand**, add, remove, or restructure elements the way you would in a normal code editor.
- **Adding Twig expressions, forms, or custom JavaScript**, anything beyond what the Editor tab's visual controls cover.
- **Loading a tracking pixel or a stylesheet needed on just one page**, Page scope injects it there without affecting the rest of the site.
- **Loading a font or analytics script once, site-wide**, Site scope injects it into every page instead of repeating it per widget.
- **Pulling in a third-party library**, add it once through the Assets panel's Custom URL tab, rather than hand-editing every widget that needs it.

### Related

<Columns cols={2}>
  <Card title="Editor Tab" href="/uichemy-composer/uichemy-widget/editor-tab">
    Prefer editing visually? Work in the Design mode panel instead.
  </Card>
  <Card title="AI Chat Tab" href="/uichemy-composer/uichemy-widget/ai-chat-tab">
    Prefer describing the change? Let AI make it for you.
  </Card>
  <Card title="Global Style Overview" href="/uichemy-composer/global-style/overview">
    Go deeper into the Globals scope: variables, classes, and buttons.
  </Card>
</Columns>