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

# Paste and Import Code

Bring HTML and CSS from an AI tool, a template library, or a Figma export into the Composer's code editor.


You don't have to write every Composer section from scratch. The [Code tab](/uichemy-composer/uichemy-widget/code-tab) accepts HTML and CSS from outside sources too, paste it in and it renders right away.

### The Two-Tab Structure

Paste HTML into the **HTML** tab and CSS into the **CSS** tab separately. Don't paste a full page wrapper with `<html>` and `<head>` tags, just the section's markup. `<script>` tags can go at the bottom of the HTML tab; CSS must go in the CSS tab, not inside an HTML `<style>` block.

### Three Common Sources

<ExpandableGroup>
  <Expandable title="AI-generated code" default-open="false">
    Prompt Claude, ChatGPT, or Gemini for the section you need, then paste the HTML and CSS into their respective tabs. You may need to clean up the result if the AI wrapped the CSS in a `<style>` tag or included external CDN links, move those into the CSS tab and the [Assets panel](/uichemy-composer/uichemy-widget/code-tab#loading-a-third-party-library) respectively.
  </Expandable>
  <Expandable title="HTML template libraries" default-open="false">
    Copy a section's HTML structure and CSS rules from a free template and paste them in. Watch for inline styles and external image URLs, both usually need manual adjustment to match your site.
  </Expandable>
  <Expandable title="Figma exports" default-open="false">
    Copy CSS properties from Figma's Inspect panel and structure them as class rules matching the HTML layout you build in the editor.
  </Expandable>
</ExpandableGroup>

<Callout kind="tip">
For a full design straight from Figma, use [AI Express Mode](/ai-express-mode/overview/what-is-ai-express-mode) or [Classic Mode](/classic-mode/getting-started/first-conversion) instead, they convert automatically. Paste and Import is for bringing in a smaller HTML/CSS snippet you already have.
</Callout>

### Content Becomes Editable Automatically

Once pasted, text nodes and images are picked up automatically as [editable fields](/uichemy-composer/concepts/editable-fields), the same extraction that runs on any HTML in the Code tab, however it got there. If an element isn't showing up as a field, see [Editable Fields](/uichemy-composer/concepts/editable-fields#frequently-asked-questions) for what the extractor does and doesn't recognize.

### Limitations

- No direct `<script src="...">` for external libraries, load them through the [Assets panel](/uichemy-composer/uichemy-widget/code-tab#loading-a-third-party-library) instead.
- Paste section markup only, a full page with `<html>` and `<head>` tags won't render correctly.

### If It Doesn't Work

<ExpandableGroup>
  <Expandable title="I pasted code but nothing shows up" default-open="false">
    Check that you didn't include `<html>`, `<head>`, or `<body>` tags, paste just the section's markup. Also confirm CSS went into the CSS tab, not left inline in a `<style>` block inside the HTML tab.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
    See the panel you're pasting your code into.
  </Card>
  <Card title="Developer Mode" href="/uichemy-composer/build/developer-mode">
    See the wider Developer mode workflow this fits into.
  </Card>
  <Card title="Editable Fields" href="/uichemy-composer/concepts/editable-fields">
    See how editable fields get pulled from the code you paste.
  </Card>
</Columns>