Documents | How we extracted standalone HTML files from 7 / 13 AI prototyping tools

How we extracted standalone HTML files from 7 / 13 AI prototyping tools

Kadhir Mani

(12.3 minutes)

<section data-section-id='a8edf699-5e9f-48e9-a173-a42e03e36b30'><collapsible-card data-icon="file-text" data-title="TL;DR results">After testing thirteen prototyping platforms, here's the full picture we saw + a visualization on file size (y-axis in kb):<bar-chart data-height="450"><bar-line value="3.2" color="#22C55E">ChatGPT</bar-line><bar-line value="205" color="#22C55E">Claude</bar-line><bar-line value="270" color="#22C55E">Gemini Canvas</bar-line><bar-line value="288" color="#22C55E">Bolt</bar-line><bar-line value="293" color="#22C55E">Lovable</bar-line><bar-line value="497" color="#22C55E">Replit</bar-line><bar-line value="1334" color="#F59E0B">Figma Make</bar-line><bar-line value="74.3" color="#EF4444">V0</bar-line><bar-line value="487" color="#EF4444">Hostinger</bar-line><bar-line value="960" color="#EF4444">Anything</bar-line><bar-line value="3500" color="#EF4444">Canva Code</bar-line><bar-line value="0" color="#EF4444">UX Pilot</bar-line><bar-line value="0" color="#EF4444">Base44</bar-line></bar-chart>Green = self-contained HTML achieved, Amber = requires HTTP server, Red = not achievable</collapsible-card> </section> <section data-section-id='12e4a8f5-9680-4d8f-99a3-78b95d5d8fd4'><h2 id='12e4a8f5-9680-4d8f-99a3-78b95d5d8fd4'>Background</h2>Prototypes are one of our favorite ways to work. They're surprisingly fun to build, and they're far more information-dense than a doc or a whiteboard session. A new way of communicating, honestly. And right now, there are so many tools to build them with: Claude, ChatGPT, Lovable, Bolt, V0, Replit, and a dozen others can all spin up a working UI in seconds. We've tried many of them, but we kept running into the same issues:<ul><li value="1">Every tool locks your prototype inside its own environment</li><li value="2">Sharing means sending a link that sometimes requires an account, or a live URL that may disappear</li><li value="3">Version control is a pain, especially when we're trying to get feedback</li></ul> For example, I once wanted to try a few different button-layout configurations, light reorganizing, nothing fancy. Should I clone the prototype so I can make multiple versions side by side? How do I send them to the team for feedback? Does each one need its own URL? I ended up using one prototype, taking screenshots, and pasting them into Slack. This setup sucks and defeats the point of doing this in the first place. Honestly, we wanted something simpler: a self-contained HTML file. No dependencies, no login, no cloud. Something we could save and open offline in any browser and expect to work forever. That's a lot easier to work with, very portable. Ideally, we can create a prototype in any tool, point our platform at it, and get a saved snapshot. That way, we get the nice UX of these prototyping tools while still getting an easy-to-share, easy-to-manage artifact. Long story short, we got it to work! Mostly, but holy moly, it was a real pain to get here. The spread alone tells the story: ChatGPT handed us a clean, tiny self-contained 3.2 KB file out of the box, while Canva generated a bloated 3.5 MB bundle that still couldn't run offline. And that's just the file size...we learned a lot more about how each platform works along the way. This post walks through what we had to do and what we learned about each platform. As a fun bonus, you'll get to see how various prototyping applications interpreted the same request 😄. </section> <section data-section-id='1ffdd389-4121-4b75-b3ef-7e1e108cbd2c'><h2 id='1ffdd389-4121-4b75-b3ef-7e1e108cbd2c'>Setup</h2>We used a single, consistent prompt across all tools:<callout icon="rocket" color="#8B5CF6">"Let's build a fun little todo application. I want it to be galaxy themed, easy to understand."</callout>Why this prompt?<ul><li value="1">TODO app<ul><li value="1">Universal reference point, lots of examples out there</li></ul></li><li value="2">Fun + Galaxy themed<ul><li value="1">Room for interpretation, visual flair, creative rendering</li></ul></li><li value="3">Easy to understand<ul><li value="1">Should keep the complexity low, making self-containment easier</li></ul></li></ul> What we're evaluating in the output:<ul><li value="1">Can the result be extracted as a single, self-contained <code spellcheck="false" style="white-space: pre-wrap;">.html</code> file that opens in any browser with no network required?</li><li value="2">How big is our resolved HTML file?</li></ul> Note: we'll refrain from outright ranking the platforms against each other since they all have their own strengths and weaknesses. </section> <section data-section-id='1042e9c1-beac-43f0-b75b-e34990c1b583'><h2 id='1042e9c1-beac-43f0-b75b-e34990c1b583'>Claude</h2>Right off the bat, we ended up with two weird problems:<ul><li value="1">Sometimes Claude gave us a TSX / JSX file, other times it gave us an HTML file<ul><li value="1">We never figured out a reliable way to understand when Claude would generate one over the other </li></ul></li><li value="2">The HTML files did not render identically to the Claude UI</li></ul> We liked that it gave us a nice, simple file, but the file wasn't self-contained. So we had to do two things:<ul><li value="1">TSX / JSX, throw that into an isolated bundler on our server, which compiled it into an HTML file<ul><li value="1">Took a bit of iterating, but we ended up using esbuild with some base configurations for this</li></ul></li><li value="2">The HTML was weird, turns out it needs a bunch of CSS variables to render correctly<ul><li value="1">Which fortunately, Claude was kind enough to generate that file for us - attaching it here in case it helps anyone else</li><li value="2">This goes into the final HTML file in a style tag, as required</li></ul></li></ul> <file-upload data-src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=55e3f8b6-c2c0-42ed-a07a-973db04b301b" data-file-name="claude-widget-host.css" data-description="" data-file-type="text/css"></file-upload>And with those two problems solved, presto!<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=79fcac6e-fedf-4f5f-979c-a8fc32d468ef" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️, size = 205 kb</h3> </section> <section data-section-id='e6a2bf3c-9540-4ef0-a3f8-f37dd9e364fe'><h2 id='e6a2bf3c-9540-4ef0-a3f8-f37dd9e364fe'>ChatGPT</h2>Super straightforward, downloaded as an HTML file, and came out fully resolved out of the box. No changes required. No weird bundling, actually self-encapsulated ⭐️:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=1fe6eb99-456f-45e6-ad02-52fa2c07c91b" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️, size = 3.2 kb</h3>So tiny! So exciting! </section> <section data-section-id='95c53627-5614-437d-8051-67007e1d083e'><h2 id='95c53627-5614-437d-8051-67007e1d083e'>Gemini canvas</h2>Gave us a TSX file, which okay no problem, we did this for Claude already, should work out of the box. Except in one of our runs, it also included the lucide icon library, and it required tailwind to render correctly. Which we'll admit made the output TSX file super token efficient, but did complicate our build system here. No problem, we can add this to our bundling step. In the end, we pull in a set of allowlisted dependencies (like lucide, date-fns, lodash-es, etc) and give esbuild access to those node_modules at compile time. Note, we only allow a small set of trusted packages, so random, uncontrolled imports can’t slip in. Can't be too careful these days with the sheer number of vulnerabilities being pushed. Next, the tailwind classes are scanned out of the source and compiled into CSS using @tailwindcss/oxide and @tailwindcss/node. Then everything is inlined into one final HTML file for us. And terrific, now we can support Gemini canvas:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=d83dec1f-06d9-4ac5-a71d-2dc40a1df78f" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️, size = 270 kb</h3>Honestly, have to say integrating lucide and tailwind is pretty cool. It allows for a higher level of output token efficiency. In other words, for each output token, by leveraging these external libraries, we can get "more frontend" out of it. </section> <section data-section-id='386a50aa-3c00-427b-85bc-3cfea33f2273'><h2 id='386a50aa-3c00-427b-85bc-3cfea33f2273'>Lovable</h2>Next, we get into the gnarlier platforms. The model providers are great because they give us a single file to begin with; they're not in the business of hosting stuff. But Lovable (and others) are in the business of hosting things, so they give us a link instead. So the question is, how can we convert a hosted link into a single file for our purposes? At a high level, we act like a browser and:<ol><li value="1">Fetch the HTML</li><li value="2">Download the CSS and JS that are requested from the same server</li><li value="3">Bundle it all together into a single HTML file</li></ol> It roughly worked, but in our particular application here at Lovable, it looks like it also used an image that it was failing to fetch. So we grabbed that as well, converted it into a base64, and threw that into the final HTML. Perfect. We get our resolved file:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=befaf16e-1c4d-4f01-ab9f-85af2894fa83" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️, size = 293 kb</h3>We also noticed the prototype was trying to access local storage and session storage for metric tracking or something. Also happened on some of the other platforms. We're still not totally sure what it's doing, but it meant our iframes here had to accommodate accordingly. </section> <section data-section-id='7eb3f482-4b52-4cf3-928e-557d47f1ad1e'><h2 id='7eb3f482-4b52-4cf3-928e-557d47f1ad1e'>Replit</h2>Worked similar to Lovable - looks like it's some sort of a Vite-based SPA. Easy to grab and compile everything, very predictable structure:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=2d4f3738-fbd7-476f-b0c2-dbe9f4aa672d" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️, size = 497 kb</h3>Though this file was a tad larger than I was expecting. Inspecting it, it has <a href="https://bundlephobia.com/package/@radix-ui/themes@3.3.0" rel="noreferrer">Radix</a>, <a href="https://" rel="noreferrer">TanStack query</a>, <a href="https://bundlephobia.com/package/lucide@1.17.0" rel="noreferrer">lucide</a> icons embedded into it. Must be some of the defaults Replit uses to create, would explain the larger size compared to Lovable. Similar to Gemini canvas, the output tokens from the model will have higher efficiency through this method, though the resulting bundle size and complexity take a hit. Probably worth it? Also you need less tokens which we like, less room for the models to mess it up. </section> <section data-section-id='321bf6af-4cb0-42a9-9d3e-602ea5cb9026'><h2 id='321bf6af-4cb0-42a9-9d3e-602ea5cb9026'>V0</h2>Vercel has the benefit of maintaining NextJS and Turbo. We expected them to lean into their technologies when assembling prototypes. And sure enough, even for our simple TODO application, it relies on an API layer running on a NextJS server. We needed to rewrite the <code spellcheck="false" style="white-space: pre-wrap;">_next</code> chunk fetches back to the original application server so the lazy-loaded rendering worked. In other words, the final HTML file still references Vercel's CDN at runtime, so even the frontend isn't a self-contained file, unfortunately. You'll notice the state management doesn't work:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=4932c7fb-03a1-4eda-9206-acf3ed675194" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file not achievable ❌️, size = 74.3kb</h3> </section> <section data-section-id='60df3a41-6a9e-4768-8281-04012452135f'><h2 id='60df3a41-6a9e-4768-8281-04012452135f'>Figma make</h2>This one was weird, it did not work out of the box with the setup we had so far. Looks like Figma make pages aren't self-contained SPAs, they're HTML shells around their SitesRuntime. If you inspect the raw HTML from the public Figma make:<pre spellcheck="false" data-language="html" data-highlight-language="html"><script type="module"> import {SitesRuntime} from '/_runtimes/sites-runtime.XXXX.js'; const sitesRuntime = new SitesRuntime({ container: document.getElementById('container'), env: 'published', bundleId: 'XXX', loadComponentsOverNetwork: true, assetsVersion: 'v11', fontsVersion: 'v1', videosVersion: 'v1', codeComponentsVersion: 'v2', withBaseStyles: false, reportingDomain: "https://www.figma.com", bundleCreationDate: '2026-06-09 22:48:02 UTC', isFigmake: true, enableMetaTags: true, renderOptions: { metronomeEnabled: false, transform3dEnabled: false, }, }); </script></pre> We ended up faking the Figma runtime to get it to resolve the HTML. We managed to bundle that together, but ran into a few headaches. Namely it's loading components, API calls, and JSON files through a dynamic <code spellcheck="false" style="white-space: pre-wrap;">import( )</code> . We needed to go download those files to disk temporarily, and register them in a bootstrap script in the HTML's header. If you look inside the resulting HTML file, you'll see a <code spellcheck="false" style="white-space: pre-wrap;">registerModuleImportMap</code> that does the registration for the import calls. In effect, we're faking the Figma runtime to get it everything it needs, but it's not perfect unfortunately. There are two constraints the file has to satisfy to run correctly:<ol><li value="1">It needs an HTTP origin. The import map uses absolute paths (e.g. <code spellcheck="false" style="white-space: pre-wrap;">/</code>), so it must be served over HTTP/HTTPS — not opened as a local <code spellcheck="false" style="white-space: pre-wrap;">file://</code> URL. Without an origin, <code spellcheck="false" style="white-space: pre-wrap;">replaceState</code> can't fake the root route and routing breaks.</li><li value="2">The bootstrap must complete before any imports resolve. Our fetch-patching code runs as part of the bootstrap script. If the browser starts resolving module imports before that script finishes, the patches aren't in place yet and network calls go uninterrupted.</li></ol> Together, these mean you can't open the file locally, but serving it through an HTTP server (like our platform) satisfies both constraints and works great: <iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=04bf2e7b-a2b3-4747-b393-f2e371878d64" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>For our purposes here, we'll consider that mostly a win, unfortunate that it doesn't work offline:<h3>HTML file achieved ✅️*, size = 1,334 kb</h3>*assuming you can host the file on an HTTP server </section> <section data-section-id='3d867cd7-c722-4afe-a1c6-339dbdbdb135'><h2 id='3d867cd7-c722-4afe-a1c6-339dbdbdb135'>Bolt</h2>Easy, same Vite-based SPA setup as Lovable and Replit. Worked out of the box with the existing pipeline:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=4c2a0ced-2c46-436c-8296-e191cc2704d0" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file achieved ✅️*, size = 288 kb</h3>Inspecting the HTML file, Bolt is calling out to supabase with some default credentials baked in client side. We originally inspected it because we noticed it would take an unusually long time for the initial load. That was a tad surprising, guess it's using that to store our TODOs? Won't work offline, but at least self encapsulated. *assuming you have network access We were originally sketched out about client side credentials, but looks like that's <a href="https://www.reddit.com/r/Supabase/comments/rwdrlo/how_is_it_secure_to_use_supabase_on_the_client/" rel="noreferrer">intentional</a>. </section> <section data-section-id='dcfff19b-b4ab-4ca7-a963-cd1c75e216a5'><h2 id='dcfff19b-b4ab-4ca7-a963-cd1c75e216a5'>Canva code</h2>This one was a real pain. Canva hosted apps have three layers as far as we can tell:<ul><li value="1">A shell page that loads some massive webpack bundles<ul><li value="1">which also loads a <code spellcheck="false" style="white-space: pre-wrap;">window.bootstrap</code> JSON blob that describes the design</li></ul></li><li value="2">A codelet iframe where our actual application lives</li><li value="3">Canva chrome footer, reporting errors, heartbeat polling, and metrics</li></ul> Long story short, we ran into <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS" rel="noreferrer">CORS</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity" rel="noreferrer">SRI</a> issues that forced us to inline the shell server-side, string-patch the footer fetches, globally rewrite the <code spellcheck="false" style="white-space: pre-wrap;">_assets/</code> paths its trying to load back to original Canva code app, and patch dynamic script/link/iframe creation so lazy chunks also go back to the Canva app - similar to V0. Definitely not a self-contained file:<collapsible-card data-icon="file-text" data-title="Open to see" data-default-collapsed="true"><h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=b805a4ec-4eef-4e81-876a-dcc9be87e5a7" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe></h3></collapsible-card>Note: closed by default to prevent autoscroll <h3>HTML file not achievable ❌️, size = 3.5 mb</h3>MB!! So big my god. And requires more dynamically loaded code to run 😱. Maybe we'll do a follow up post going through all the things we learned about how Canva code works one day. </section> <section data-section-id='00adca0c-de09-4431-882a-cd65cc64b64f'><h2 id='00adca0c-de09-4431-882a-cd65cc64b64f'>Anything.com</h2>Looks like this one leverages a lot of Next.js, so there's an API route here (on the backend server) that we can't do anything about. But on top of that, there were many CDN chunks. We ended up rewriting the page-origin assets back to the original created.app and used an embedded Bootstrap script, so at runtime the /_next/ asset also loads from the original CDN. Means we can't get a self encapsulated HTML file, we still call back to anything.com's servers:<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=39573d25-b9b0-45cc-a352-bd4a473c9a39" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file not achievable ❌️, size = 960 kb</h3> </section> <section data-section-id='b132005b-8486-45c2-b756-7467cce03709'><h2 id='b132005b-8486-45c2-b756-7467cce03709'>Base44</h2>Immediately ran into an issue where Base44 wanted us to login before it would let us do anything. We can't load this thing in the server context, can't even see if we can make it self-encapsulated Here's the prototype it generated:<collapsible-card data-icon="file-text" data-title="Open to see" data-default-collapsed="true"><iframe src="https://orbit-task-labs.base44.app" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe></collapsible-card>Note: closed by default to prevent autoscroll <h3>HTML file not achievable ❌️</h3> </section> <section data-section-id='25d295b7-61bd-4cc3-a126-039ee9a72f5c'><h2 id='25d295b7-61bd-4cc3-a126-039ee9a72f5c'>Hostinger horizons</h2>This one ran into the same issue as V0, there are some backend APIs it requires for even our simple TODO application. So it's not possible to fully self encapsulate, but we wanted the frontend piece at least. As we kept digging further, looks like hostinger uses the domain suffix for: horizons apps, parked domains, their website builder application, and legacy PHP uploads. Meaning even figuring out if this is a page we can bundle was a bit of a hassle, along with which links to load into our final file. But once we figured that out (we only let Vite <code spellcheck="false" style="white-space: pre-wrap;">/assets</code> through), then the standard Vite-based SPA setup did the trick for the frontend only (you'll notice the state management doesn't work):<h3><iframe src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=1bc9fee9-1f96-4374-a963-c682f58d2c02" style="width: 100%;" height="400" frameborder="0" allowfullscreen="true"></iframe>HTML file not achievable ❌️, size = 487 kb</h3> </section> <section data-section-id='9a2f7332-a6e9-415d-929c-69d5f393f2c3'><h2 id='9a2f7332-a6e9-415d-929c-69d5f393f2c3'>Take-aways</h2>After testing thirteen prototyping platforms, here's the full picture we saw + a visualization on file size (y-axis in kb):<bar-chart data-height="450"><bar-line value="3.2" color="#22C55E">ChatGPT</bar-line><bar-line value="205" color="#22C55E">Claude</bar-line><bar-line value="270" color="#22C55E">Gemini Canvas</bar-line><bar-line value="288" color="#22C55E">Bolt</bar-line><bar-line value="293" color="#22C55E">Lovable</bar-line><bar-line value="497" color="#22C55E">Replit</bar-line><bar-line value="1334" color="#F59E0B">Figma Make</bar-line><bar-line value="74.3" color="#EF4444">V0</bar-line><bar-line value="487" color="#EF4444">Hostinger</bar-line><bar-line value="960" color="#EF4444">Anything</bar-line><bar-line value="3500" color="#EF4444">Canva Code</bar-line><bar-line value="0" color="#EF4444">UX Pilot</bar-line><bar-line value="0" color="#EF4444">Base44</bar-line></bar-chart>Green = self-contained HTML achieved, Amber = requires HTTP server, Red = not achievable Model providers are the most portable. Claude, ChatGPT, and Gemini hand you a file from the start. Though the dedicated prototyping platforms are nicer to build in. We can still bundle many of them down to a single file though it takes meaningfully more work to do so, assuming your prototype isn't super complex. A few patterns worth calling out:<ul><li value="1">Token efficiency vs. portability tradeoff — Tailwind is a concise way for models to style apps, but it pulls in a CSS compiler at build time and complicates self-containment. Heavy default dependencies (React, Radix, lucide, TanStack Query, etc) compound the bundle size quickly. Though leveraging all of the above can cause the model output token efficiency to be high, less room for it to mess up.</li><li value="2">Two dominant architectures — Frontend-focused platforms (Lovable, Bolt, Replit, Hostinger) almost universally reach for a Vite SPA. Fullstack platforms (V0, Anything) use Next.js, which makes a truly offline bundle essentially impossible — even the "frontend" ends up coupled to a server through lazy loading chunks, etc.</li><li value="3">Login walls are a hard blocker — Base44 and UX Pilot couldn't be evaluated in a server context at all. Public-accessible output is table stakes for self-encapsulation at scale.</li></ul> <feedback data-feedbacknodeid="d79168f0-313c-424b-af63-2683b51b3394" data-title="Any prototyping platforms we've missed?" data-datatype="TEXT" data-metadata="{"type":"TEXT"}" data-description="We'll try them in the next post!"></feedback> Side note, we've made this functionality free on the platform. Just start a blank doc, add a prototype node, and select "snapshot" in the upload dialog. You can download the HTML after its done processing. Still more edge cases we're actively patching. Shoot us a note at support@productnow.ai if a prototype is giving you trouble! <img src="https://api.productnow-prod.com/storage/getStorageObject?storageObjectId=9f1d0807-c970-4800-b26e-df2a29d6d969" alt="9f1d0807-c970-4800-b26e-df2a29d6d969" data-alignment="center" data-card="true" width="378" height="530"></section>