{"slug": "how-to-share-claude-html-artifacts-as-a-live-preview-url", "title": "How to Share Claude HTML Artifacts as a Live Preview URL", "summary": "A developer shares a workflow for turning Claude-generated HTML artifacts into live preview URLs. The approach covers single-file uploads, CLI deployment, and integration with agentic coding tools, emphasizing that only browser-ready files should be published.", "body_md": "Claude is surprisingly good at producing useful HTML artifacts: quick dashboards, landing page mockups, product one-pagers, data reports, UI prototypes, and internal tools.\n\nThe awkward part usually comes after the HTML is generated.\n\nYou want to send it to someone, but the artifact lives in a chat, a local file, or a temporary preview. Screenshots lose interactivity. Copying code into a message is hard to review. Asking someone to download a file and open it locally adds friction.\n\nFor many small HTML outputs, the missing step is simple:\n\nTurn the generated HTML into a real browser URL.\n\nThis article walks through a practical workflow for sharing Claude HTML artifacts as live previews.\n\nIf you want a focused version of this workflow, I also wrote a short guide here: [Share Claude HTML artifacts as a live URL](https://previewship.com/guides/share-claude-html-artifacts).\n\nWhen Claude generates HTML, you usually get one of three things:\n\nThese are not the same deployment target.\n\nA single HTML file can often be published directly. A static folder can be hosted as-is if it already contains the final assets. A source project usually needs a build command first.\n\nThe most common mistake is trying to share the source project instead of the built artifact.\n\nFor example, this is usually not what you want to publish:\n\n```\nmy-demo/\n  package.json\n  src/\n  node_modules/\n  vite.config.ts\n```\n\nThis is much closer to what you want:\n\n```\ndist/\n  index.html\n  assets/\n    app.css\n    app.js\n```\n\nThat distinction matters because a browser can load `index.html`\n\n, CSS, JavaScript, images, and static assets. It cannot run your local build system for the viewer.\n\nA good preview workflow for AI-generated HTML should be boring in the best possible way:\n\nThat workflow works especially well for:\n\nIf Claude generated one self-contained HTML file, the fastest path is to paste or upload the file and get a live URL.\n\nThis works best when the file includes everything it needs:\n\n```\n<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Revenue Dashboard Preview</title>\n    <style>\n      body {\n        font-family: system-ui, sans-serif;\n        margin: 2rem;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Revenue Dashboard</h1>\n    <p>This is a generated static preview.</p>\n  </body>\n</html>\n```\n\nThis is ideal for quick review loops because there is no repository, no DNS, no build pipeline, and no app server.\n\nIf you are using PreviewShip, the upload flow is built for this kind of artifact:\n\n[Publish AI-generated HTML online](https://previewship.com/guides/publish-ai-generated-html)\n\nIf Claude Code or another local coding agent generated a file in your workspace, the command line can be faster than using a browser UI.\n\nFor example:\n\n```\nnpx previewship deploy ./report.html\n```\n\nOr, if you want a machine-readable result for scripting:\n\n```\nnpx previewship deploy ./report.html --json\n```\n\nA CLI-based workflow is useful when you repeatedly generate variations:\n\n```\nnpx previewship deploy ./experiments/pricing-page-v3.html\nnpx previewship deploy ./reports/weekly-growth.html\nnpx previewship deploy ./demos/onboarding-flow.html\n```\n\nThe important thing is that the deployed file or folder should already be browser-ready.\n\nFor a built frontend project, that usually means:\n\n```\nnpm run build\nnpx previewship deploy ./dist\n```\n\nThe exact output folder depends on your framework:\n\n``` php\nVite      -> dist/\nAstro     -> dist/\nNext.js   -> out/ if using static export\nSvelteKit -> build/ depending on adapter\n```\n\nIf you are working inside Claude Code, Cursor, or another agentic coding tool, you can also make publishing part of the agent workflow.\n\nA typical prompt can be:\n\n```\nBuild the static preview, deploy the browser-ready output, and give me the public URL.\n```\n\nThis works best when the tool has a clear deployment command or MCP integration available.\n\nFor PreviewShip, the MCP docs are here:\n\nThat kind of setup is useful because the agent can:\n\nYou still need to be explicit about what should be deployed. If the agent built a Vite app, ask it to deploy `dist/`\n\n, not the raw source directory.\n\nBefore sending the preview to someone else, check these details:\n\n`<title>`\n\nThat last check is underrated. If it works in a private window, it is much more likely to work for the person receiving the link.\n\nThis live-preview workflow is not a replacement for production hosting.\n\nIt is best for artifacts that need fast review:\n\nFor long-lived production apps, use your normal deployment pipeline.\n\nFor throwaway or review-focused HTML, a lightweight preview URL is usually enough.\n\nClaude can generate the first version of an HTML artifact quickly. The real productivity gain comes when the review loop is just as fast.\n\nIf the output can be opened as a URL, people can comment on the actual experience instead of debugging file sharing.\n\nThat small shift makes AI-generated HTML much easier to use in real work.", "url": "https://wpnews.pro/news/how-to-share-claude-html-artifacts-as-a-live-preview-url", "canonical_source": "https://dev.to/neurobin_/how-to-share-claude-html-artifacts-as-a-live-preview-url-2hak", "published_at": "2026-06-25 03:33:26+00:00", "updated_at": "2026-06-25 04:13:14.320059+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "large-language-models", "generative-ai"], "entities": ["Claude", "PreviewShip", "Vite", "Astro", "Next.js", "SvelteKit", "Claude Code", "Cursor"], "alternates": {"html": "https://wpnews.pro/news/how-to-share-claude-html-artifacts-as-a-live-preview-url", "markdown": "https://wpnews.pro/news/how-to-share-claude-html-artifacts-as-a-live-preview-url.md", "text": "https://wpnews.pro/news/how-to-share-claude-html-artifacts-as-a-live-preview-url.txt", "jsonld": "https://wpnews.pro/news/how-to-share-claude-html-artifacts-as-a-live-preview-url.jsonld"}}