Publish an Exported Interactive Demo as a Website

What you need before you publish

AI tools such as Claude, ChatGPT and Codex can produce an interactive demo, an explainer or a small microsite in one session. Inside the tool, the demo works. In the publishing step, you put the same files on a host. Then a client or teammate can open a link. You still control who sees the demo, and the link stays the same through the next round of edits.

Start with the folder that the tool produced. A demo that can run on a static host (a host that serves files only) usually contains these items:

• index.html at the top level of the folder
• CSS and JavaScript files
• Images, audio, video or other media
• JSON, CSV or Markdown data that the page loads
• Subfolders that the HTML refers to with relative paths

Keep that structure. If you move files or flatten the folder, relative paths such as assets/chart.js or data/results.json break.

If the project uses a framework such as Vite or React, you publish the build output, not the source folder. The build output is often in dist/ or build/. Run the build command first. Then publish the output that it creates.

1. Separate browser code from services

Go through the demo. List everything that it calls. This list tells you whether a static host is enough.

The demo…	Works on a static host?
Draws a chart from a bundled JSON file	Yes
Plays bundled audio or video	Yes
Calls a public API that needs no key	Usually, if the API allows browser requests
Calls an AI or payment API with a secret key	No. Every visitor can see the key
Saves form entries or user accounts	No. It needs a backend or a form service
Talks to a server on localhost	No. That server exists only on your computer

For each feature in the “No” rows, do one of these three things:

• Remove the feature from the demo.
• Replace the feature with sample data.
• Move the call into a server function on the host, where the key stays secret. A server function is code that runs on the host, not in the browser. Examples are Cloudflare Pages Functions and Netlify Functions.

2. Test the demo outside the tool that made it

Do not judge the demo by the preview in the AI tool. Do not only double-click index.html. Browsers restrict pages that you open from file://. A demo that loads JSON can fail there but work on a server. Instead, serve the folder on your computer:

npx serve dist

Then, at desktop and phone widths, make sure that:

• Fonts, images and media load.
• Keyboard controls and buttons respond.
• Downloads work.
• Each sub-page opens directly by its URL, not only through links.
• The browser console (DevTools) shows no errors.

3. Remove what must not ship

Open the output folder. Delete anything that is not part of the demo: prompts, notes, .env files, test data, old exports and screenshots. Search the JavaScript for API keys. Visitors can download anything that you upload to a static host, even if no page links to it.

4. Deploy the folder

On Cloudflare Pages, you can deploy from the dashboard. In the Cloudflare dashboard, open Workers & Pages. Select Create application, then Get started and Drag and drop your files. Name the project. Upload the folder. Select Deploy site (Direct Upload docs).

Drag and drop accepts up to 1,000 files of up to 25 MiB each. For larger demos, or to deploy from a terminal, use Wrangler. Wrangler accepts up to 20,000 files:

npx wrangler login
npx wrangler pages project create
npx wrangler pages deploy dist

You cannot connect a Direct Upload project to a Git repository later. If you plan to deploy from a GitHub repository on every push, connect the repository when you create the project. Our Cloudflare Pages tutorial covers both routes.

On Netlify, drag the output folder onto app.netlify.com/drop. As an alternative, run netlify deploy --prod --dir dist with the Netlify CLI. Our Netlify guide has the full walkthrough.

Open the hosted address in a new browser window. Repeat the tests from step 2. Problems that appear only on a host are usually wrong paths. Links that start with / point to the domain root. These links break when the host does not serve the demo from the root.

5. Keep early reviews private

If the demo shows unreleased product messaging, client material or unfinished UI, protect it before you send the link. Do this on the host, not with a password popup inside the HTML. A prompt from a script only hides files that the browser already downloaded.

• On Cloudflare Pages, use Cloudflare Access. Reviewers type their email and get a one-time code. The Enable access policy switch in the project settings protects preview deployments only. For production, you must do extra steps. See our Cloudflare Pages Access guide.
• On Netlify, set a shared site password under Visitor access > Password Protection. This feature is available on Pro plans (docs).
• On Vercel, use Deployment Protection with Vercel Authentication, which is on every plan. Reviewers need a Vercel account with access. On Pro, Password Protection is also available as a paid add-on (docs). Shareable Links let outside reviewers open a protected preview without an account. On the Hobby plan, you get one shareable link per account.

Test the protection in a private window. Also test a direct link to a media or data file.

6. Send reviewers a focused request

A bare link gets vague feedback. Send the address with three to five things to try. Also name the device that you want them to use, and a date for replies. For example: “Open the demo on your phone, switch between the monthly and yearly views, and tell me whether the chart labels are readable.” Collect the feedback for that release, so that the next edit is specific.

7. Update the demo without changing the link

If you deploy each new version to the same project, the production address stays the same.

On Cloudflare Pages, run npx wrangler pages deploy dist again, or upload a new version in the dashboard. To show a change before it goes to production, deploy with --branch=<name>. This command creates a preview deployment. Keep the previous output folder, so that you can deploy it again. Cloudflare also lists earlier production deployments under Deployments. There, Rollback to this deployment switches production back immediately (rollback docs).

On Netlify, drag the new output folder onto the deploy dropzone at the bottom of the Deploys page. As an alternative, run the CLI command again. To go back, open an earlier deploy. Then use Publish Deploy (manage deploys).

To see whether reviewers opened the demo, turn on Cloudflare Web Analytics in the Pages project under Metrics (setup). It shows page views by path, referrer, country and device type, but not who the visitor was. With Cloudflare Access in front of the demo, the Access authentication logs show which reviewer email signed in and when.

Quick checklist

1. The output folder has index.html at the top, and the relative paths are intact.
2. The folder contains no secret keys, prompts or private files.
3. You removed every feature that depends on a server, replaced it with sample data, or moved it to a function.
4. You tested the demo on a local server and again on the host.
5. You set access protection on the host and tested it while signed out.
6. Reviewers have a link, a short task list and a deadline.
7. You deployed the next version to the same project, and a rollback is ready.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.