Learn

Three ways to start, all from the dashboard Create box.

1. Paste Code — paste your HTML, CSS, and JavaScript and press the arrow. We split it into files and open the editor.
2. Upload — choose an .html file to import it as a widget.
3. Create (AI) — describe your widget, copy the prompt, run it in your own AI, then bring the result back to Paste Code.

A schema turns code placeholders into no-code controls. Reference settings in your code, then describe them in schema.json.

1. In the editor's Code view, open schema.json.
2. Add one setting per value you want editable, each with a type, id, label, and default.
3. Reference each in your code as {{ settings.<id> }}.
4. The Customize tab builds a control for every setting automatically.

{
  "name": "Hero",
  "settings": [
    { "type": "text",  "id": "heading", "label": "Heading", "default": "Hello" },
    { "type": "color", "id": "accent",  "label": "Accent",  "default": "#845dff" }
  ]
}

Edit your widget through the auto-generated form.

1. Open the Customize tab → Settings.
2. Edit text, colors, numbers, and toggles — the preview updates live.
3. Changes autosave to your project.

Blocks are repeatable items (slides, cards, testimonials, pricing tiers).

1. In schema.json, add a top-level blocks array — each block type has its own settings.
2. Loop them in your markup with {% for block in section.blocks %}.
3. Use the Customize → Blocks tab to add, reorder, and remove items (presets seed a starting set).

"blocks": [
  { "type": "slide", "name": "Slide",
    "settings": [ { "type": "text", "id": "title", "label": "Title" } ] }
]

<!-- markup -->
{% for block in section.blocks %}
  <div>{{ block.settings.title }}</div>
{% endfor %}

Control how the widget's iframe looks when embedded.

1. Open the Iframe tab.
2. Set width/height (responsive or fixed), background, corner radius, loading, and scrolling.
3. These feed both the live preview and the embed snippet.

Get a hosted widget and a copy-paste embed.

1. Click Publish.
2. Copy the hosted URL to share, or the iframe snippet to drop into any site (Webflow, Notion, WordPress, …).
3. Re-publish anytime to push updates to the same widget.

No in-app AI yet — use the Create tab to generate a prompt for your own AI.

1. On the dashboard, open Create and describe your widget.
2. Copy the prompt and run it in ChatGPT, Claude, or Gemini.
3. Bring the generated code back to Paste Code — the {% schema %} block populates your Customize form.