For vibe coders, AI builders, and indie makers

Turn AI code into live widgets you can edit and embed.

Paste the HTML, CSS, and JavaScript you got from ChatGPT, Claude, Cursor, or Gemini. WebDYI helps you add safe editable settings and publish a clean widget link for Canva, Shopify, WordPress, Notion, Webflow, or any website.

Works with Canva Shopify WordPress Notion Webflow
Paste AI code. Add settings. Publish anywhere.
WebDYI editor with code and live preview
No-code customizer
Turn hard-coded values into controls.

Text, colors, media, icons, and layout settings become friendly fields.

Hosted embed
Your AI snippet gets a real home.

Share a public URL, iframe, or widget link without setting up hosting.

Create your widget
Best for AI snippet builders Client projects Template sellers Small agencies
Prompt builder

Ask the AI for code WebDYI can customize.

Most AI snippets work once, then become painful to edit. Use this prompt to ask for the widget code plus a WebDYI schema, so text, colors, images, icons, and form fields can become safe controls.

  • Works with ChatGPT, Claude, Gemini, Cursor, and similar AI tools.
  • Requests one self-contained widget plus editable settings.
  • Includes form-storage instructions for lead capture widgets.
See it in action

Watch an AI snippet become a real widget.

The loop stays simple: paste what the AI gave you, expose safe controls, preview the result, and copy the embed link.

Paste from your AI chat Bring in generated HTML, CSS, and JavaScript without setting up a repo.
Turn settings into controls Make headings, colors, media, icons, and options editable without another prompt.
Publish past the preview Copy a hosted URL or iframe and drop the widget into real pages and builders.
Features

Everything AI code is missing after the chat.

WebDYI gives vibe-coded snippets the product layer: editable settings, safe hosting, embed delivery, starter widgets, sharing, and simple pricing.

Paste AI-generated code

Start with HTML, CSS, and JavaScript from ChatGPT, Claude, Cursor, Gemini, or your own editor.

Schema-powered editing

Convert hard-coded values into editable text, colors, numbers, images, icons, and toggles.

Safe hosted embeds

Move past the AI preview. Widgets are CDN-hosted and isolated in sandboxed iframes.

Starter widgets when you need speed

Remix calculators, countdowns, forms, galleries, testimonials, music players, and more from reusable starters.

One link you can actually ship

Every widget gets a clean public URL for clients, collaborators, and platforms that support embeds.

Free while you experiment

Start free with unlimited widgets and views, then upgrade when you want white label embeds or team workflows.

Workflow

From AI snippet to live widget.

A compact flow for builders who want AI-generated components to be customized, reused, and embedded without extra engineering.

Pasting widget code into WebDYI
Step 1

Paste your AI code

Drop in the snippet from your AI chat, or use the prompt above to get cleaner output.

WebDYI editor with schema controls
Step 2

Expose editable settings

Make the pieces people should change editable and lock down everything else.

Copying a published widget link
Step 3

Copy the embed link

Share the public page, paste the iframe, or embed it in Canva, Notion, Shopify, or any site.

Pricing

Start free.
Upgrade when it matters.

Simple plans for experiments, AI-assisted builds, and teams that publish widgets for clients.

Free
$0 / forever

For AI experiments, side projects, and public widgets with WebDYI branding.

  • Unlimited widgets
  • Unlimited views
  • All starter widgets
  • 50 MB media storage
  • WebDYI badge on embeds
Start free
Creator
$4.99 / month

For builders who want polished, white-label widgets for clients or audiences.

  • Everything in Free
  • No WebDYI badge
  • 500 MB media storage
  • Email support
  • Clean embeds for client work
Start building
Agency
$29 / month

For studios and teams managing many AI-assisted widgets and client workflows.

  • Everything in Creator
  • Team workspace
  • 10 GB media storage
  • Custom domain for embeds
  • Priority onboarding
Contact us
Frequently Asked Questions

Questions vibe coders ask most.

Do I need to understand the code the AI wrote?

No. You can paste the code, preview it, and use WebDYI's customizer to expose only the settings people should edit. Understanding the code helps, but it is not required for the basic workflow.

Where can I embed the widget?

Yes. WebDYI gives you public widget links and iframe embed code for platforms that support embeds, including Canva, Notion, Shopify, WordPress, Webflow, and normal websites.

What if the AI gives me broken code?

WebDYI shows you a live preview as soon as you paste. If something looks wrong, ask the AI to fix the specific issue and paste the updated code back in.

Will my client be able to change text and colors?

Yes, if the widget includes a WebDYI schema. The prompt builder on this page asks the AI to output editable settings for text, colors, images, icons, numbers, and other controls.

Is it safe to embed AI-generated code?

Widgets are delivered through isolated iframe embeds so the host page stays separate from widget code. That keeps experiments and client widgets easier to publish safely.

Got AI code?
Ship it as a widget.

Turn your next AI-generated component, client idea, or template experiment into a polished embed people can actually use.