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 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
AI-generated code. 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 respectively.
HTML template libraries. 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.
Figma exports. Copy CSS properties from Figma's Inspect panel and structure them as class rules matching the HTML layout you build in the editor.
For a full design straight from Figma, use AI Express Mode or Classic Mode instead, they convert automatically. Paste and Import is for bringing in a smaller HTML/CSS snippet you already have.
Content Becomes Editable Automatically
Once pasted, text nodes and images are picked up automatically as slots, 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 slot, see Slots for what the extractor does and doesn't recognize.
Limitations
- No direct
<script src="...">for external libraries, load them through the Assets panel instead. - Paste section markup only, a full page with
<html>and<head>tags won't render correctly.