Raw snippet
It needs a home
Your code runs in the AI preview, but there is nowhere to point a link.
Made for vibe coders &
AI builders
Vibe-coded a component?
Vibe-coded a component?
Ship it as a real widget.
You prompted ChatGPT, Claude, or Cursor and got working HTML, CSS, and JavaScript — but it's just a snippet. Not hosted, not editable, not reusable. WebDYI turns it into a live, embeddable widget in minutes.
Paste your code, add a few editable settings, and get a hosted embed link plus a no-code customizer. Drop it into Canva, Shopify, WordPress, Notion, or Webflow — or hand the customizer to a client.
Free forever. Unlimited widgets and views. Optional $4.99/month to remove branding.
LIVE WIDGET
Drag the slider — this is a real WebDYI widget, embeddable anywhere with one link.
See it in action
Watch a WebDYI widget go from idea to a live, embeddable link.
The AI-code dead end
The AI gave you code. Now it's stuck in a chat window.
You copy it out and you've got a snippet that runs in a sandbox — but has no home. No hosting, no edit panel, no way to reuse it or hand it to a client. So it dies in a tab. WebDYI gives it somewhere to live.
Where vibe-coded snippets get stuck
- Runs in the AI preview, but nowhere real
- No host — you'd have to deploy it yourself
- Re-prompt the AI every time you want a tweak
- A non-coder can't safely change a thing
- Copy-paste forks pile up across projects
What WebDYI does with it
- Hosts it on a fast CDN with one embed link
- Generates a no-code customizer from your settings
- Edit text, colors, and images without touching code
- Safe, sandboxed iframe — won't break the host page
- One link that works in Canva, Notion, Shopify, anywhere
From snippet to widget
What you get when you paste it in.
WebDYI wraps your AI-generated code with everything a bare snippet is missing — hosting, a customizer, data, and a safe embed.
Raw snippet
Forms that actually save
A form in the snippet looks real, but submissions go nowhere.
With WebDYI
Submissions persist to your dashboard, with Turnstile and rate-limiting built in.
See the contact form widget →
Raw snippet
Editable without re-prompting
Every value is hard-coded — to change one you go back to the AI.
With WebDYI
WebDYI auto-generates a no-code form for the fields you expose. Edit text, colors, and images with no code.
See how it works →
Raw snippet
Reusable, not one-off
Re-using it means copy, paste, and another fork to maintain.
With WebDYI
Expose a schema once; every client or site gets their own customizable copy.
Raw snippet
Safe to embed
Pasting raw JS straight into a site is risky and can break the page.
With WebDYI
Runs in a sandboxed iframe — isolated and fast, it can not break the host page.
Raw snippet
Updates everywhere at once
Change a price or a date and you are editing code again.
The paste-to-embed flow
From AI snippet to live embed in 4 steps.
Paste what the AI gave you. WebDYI handles the hosting, the customizer, and the embed link — you just copy and paste.
1
Start your widget
Pick a starter template — or build your own
Open WebDYI and choose a tested starter widget (forms, calculators, sliders, countdowns, FAQs, and more). Tweak the text and colors through the simple panel — you're embeddable in minutes.
Want something custom? You can also build from scratch with plain HTML, or any framework you like — React, Vue, Svelte, Tailwind. WebDYI runs whatever you paste in.
Power-user tip Generate a brand-new widget with AI
Comfortable copy-pasting? Describe your widget below, copy the ready-made prompt, and any AI (ChatGPT, Claude, Gemini) will return code you can drop straight into WebDYI.
The AI gives you back a block of text. You don't need to read it — just copy it into WebDYI in step 2.
2
Paste into WebDYI
Drop the code into the editor
Open the WebDYI app, create a new widget, and paste the block from the AI straight into the editor. No setup. No install. No terminal.
WebDYI parses the code and gets it ready to show.
3
Preview
See it work instantly
WebDYI shows you a live preview right next to the editor — exactly what your visitors will see, wherever you embed it.
Not quite right? Ask the AI to fix it and paste again. Or change the text and colors yourself through WebDYI's simple form — no code touched.
4
Embed it
Copy the link, embed it anywhere
Click Embed in WebDYI and copy your hosted link (or the inline
<webdyi-widget>
snippet). Paste it into your own site, Shopify, WordPress, Notion, Webflow — or
Canva's Embed element. It stays live for every visitor.
- 1. Click Embed in WebDYI
-
2. Copy your
cdn.webdyi.com/w/...link - 3. Paste it anywhere — a CMS, raw HTML, or Canva's Embed element
Built by you, powered by AI
Things you can ship today.
Start from a ready-made starter, or paste your own AI-generated code. Either way, no coding skills required.
Calculators & quote tools
Mortgage, ROI, pricing — anything that takes a few numbers and returns an answer.
Lead-capture forms
Multi-field signup forms with validation. Wire them up to your favorite email tool through a webhook.
Before / after sliders
Perfect for renovation, photography, and skincare brands. Drag the handle, reveal the transformation.
Countdown timers
Real urgency for launches, sales, and event registrations — counting down in every visitor's timezone.
FAQ accordions
Tap-to-expand answers that don't blow out your page layout.
Animated CTAs & hover effects
Make your call-to-action feel alive instead of static.
FAQ
Questions vibe coders ask us most.
Do I need to understand the code the AI wrote?
No. Paste what ChatGPT, Claude, or Cursor gave you and WebDYI hosts and renders it. You only touch the parts you choose to expose as editable settings — everything else just works.
Where can I embed the widget?
Anywhere that takes an iframe or a script tag — your own site, Shopify, WordPress,
Notion, Webflow, Framer, and Canva. (WebDYI is an approved iframely provider, which
is what powers Canva's
Embed
element.)
What if the AI gives me broken code?
WebDYI shows you a live preview as soon as you paste. If something looks off, just ask the AI to fix it ("the button color is wrong, make it blue") and paste the new version. No deploys, no waiting.
Will my client be able to change the text and colors themselves?
Yes — as long as the widget exposes a schema. The schema is a small JSON block that tells WebDYI which pieces of text, colors, or images should be editable. Once it's in place, WebDYI auto-generates a no-code form your client can use to update the widget without ever touching code.
Good news: you don't have to write the schema by hand. Use the copy-paste AI prompt below and the AI will produce the widget and a matching schema in one go.
How much does it cost?
Free forever for unlimited widgets and unlimited views. A $4.99/month plan removes the small WebDYI badge from your embeds if you want a fully white-label look. See pricing.
Is it safe to embed AI-generated code?
Every WebDYI widget runs in a sandboxed iframe with an opaque origin. That means the widget code can't touch the rest of the host page, can't read cookies, and can't break your layout. It's the same isolation model Stripe and YouTube use for their embeds.
Ready to ship what you vibe-coded?
Paste your AI-generated code, add a few editable settings, and walk away with a hosted, embeddable widget.