Claude Code generates polished HTML in seconds, but sharing it still requires manual steps. Here's how to go from terminal output to a live, shareable URL with minimal friction.
Claude Code is remarkably good at generating complete, self-contained HTML pages. You describe what you want in plain English, and within seconds you have a working landing page, a data visualization, an interactive prototype, a presentation deck, or a styled report sitting in your project directory. The HTML is clean, the CSS is inline or embedded, and the JavaScript just works.
Then comes the awkward part. You want to show it to someone. A teammate, a client, a friend. And suddenly you're stuck copying files around, setting up hosting, or explaining how to open a local HTML file in a browser.
This has become even more important as Claude Code users move from Markdown plans to richer HTML artifacts: specs, PR explainers, research reports, design explorations, and custom editing interfaces that are meant to be read and shared.
This article walks through the different ways to bridge that gap, from manual workarounds to a single-command workflow that keeps you in the terminal.
Claude Code operates in your terminal. It reads your codebase, writes files, and runs commands. When you ask it to generate an HTML page, the result lands on your local filesystem. That's great for development but useless for sharing.
Here's what the typical workflow looks like when you want someone else to see your Claude-generated page:
For a file that took five seconds to generate, steps 2 through 6 can easily eat ten minutes. And if you're iterating (asking Claude to tweak the design, update the copy, fix the layout), you repeat those steps every time.
The core friction is that Claude Code's output is local, but sharing is inherently remote. You need a bridge between "file on disk" and "URL in someone's browser."
If you're using Claude through the web interface at claude.ai rather than Claude Code in the terminal, Artifacts offer a built-in sharing path. When Claude generates HTML in the web UI, it renders as an interactive preview in the sidebar. You can click "Publish" to get a public link that anyone can view.
Artifacts are tied to the Claude web UI. They don't exist in the Claude Code terminal workflow. You can't publish a file that Claude Code wrote to your filesystem as an Artifact.
There are other constraints worth knowing. Artifacts run in a sandboxed iframe, so pages that rely on external scripts or complex document-level behavior may not render correctly. Published artifacts can be unpublished, but once you do, you can't republish that same artifact. You'd need to create a new one. And on Team and Enterprise plans, publishing is disabled entirely; you can only share within your organization.
Artifacts solve the sharing problem for the web UI, but they don't help if your workflow lives in the terminal.
The traditional developer approach is to push the file to a hosting platform. There are several good options, each with different tradeoffs.
If the HTML file is part of a Git repository, you can enable GitHub Pages and push:
git add output.html
git commit -m "Add generated page"
git push origin main
The page goes live at username.github.io/repo-name/output.html after a build that takes anywhere from 30 seconds to a few minutes. This works well for projects already on GitHub, but it's heavy for one-off shares. You need a public repo (on the free plan), and every iteration requires a commit-push-wait cycle.
Netlify's drag-and-drop interface lets you upload a folder and get a live URL. No Git required. But you're leaving the terminal to use a browser-based UI, the generated subdomain is random and unmemorable, and there's no built-in way to update the same URL with a new version.
Surge is a CLI tool that deploys static files:
npm install -g surge
surge ./my-output-folder my-project.surge.sh
It's fast and terminal-native, which fits the Claude Code workflow better than browser-based options. But it requires Node.js, deploys directories rather than single files, and each deploy overwrites the previous version with no history.
All of these platforms were designed for deploying web projects. They work, but they add steps and cognitive overhead when all you want is "turn this HTML file into a URL." None of them integrate directly with Claude Code's workflow.
CodePen, JSFiddle, and CodeSandbox let you paste HTML and share a link. This is quick for small snippets, but these tools wrap your code in their own editor UI. Your recipient sees a code editor, not a clean rendered page. Full HTML documents with custom <head> elements or document-level styling often break in these sandboxed environments.
For sharing code demos with other developers, this works. For showing a finished page to a client or stakeholder, it doesn't.
Handoff takes a different approach. It's built specifically for the use case of turning a single file into a shareable URL, with built-in versioning and a clean viewer. It has a native Claude Code skill that makes the upload happen without leaving your terminal session.
First, install the Handoff skill in your Claude Code environment. The skill lives in your .claude/skills/ directory and teaches Claude Code how to upload files directly.
Once the skill is installed and your API token is set, sharing becomes part of the conversation:
You: "Build me a landing page for a weekend hackathon"
Claude: [generates landing-page.html]
You: "Upload that to Handoff"
Claude: [uploads and returns the live URL]
Behind the scenes, Claude Code runs:
curl -s -X POST "https://handoff.host/api/upload/" \
-H "Authorization: Bearer $HANDOFF_API_TOKEN" \
-F "[email protected]" \
-F "slug=hackathon-landing" \
-F "note=Initial version"
The response includes a URL like handoff.host/@yourname/hackathon-landing that's immediately live. No build step, no waiting.
When you iterate on the design and upload again with the same slug, Handoff creates a new version automatically. The URL stays the same, always pointing to the latest version. Previous versions remain accessible if you need them.
This fits naturally into the Claude Code loop: generate, review, tweak, re-upload. The person you shared the link with always sees the latest version without you sending a new URL.
Handoff handles HTML, Markdown (rendered automatically with a clean viewer), and images. If your HTML references local images, you can include them as assets in the upload and the server rewrites the references to point to the hosted files:
curl -s -X POST "https://handoff.host/api/upload/" \
-H "Authorization: Bearer $HANDOFF_API_TOKEN" \
-F "[email protected]" \
-F "slug=my-page" \
-F "[email protected]" \
-F "[email protected]"
The service is free during beta, with no file count limits.
| Method | Terminal-native | Setup required | Versioning | Time to live URL |
|---|---|---|---|---|
| Claude Artifacts | No | None (web UI only) | No | Seconds |
| GitHub Pages | Partially | Git repo + Pages config | Via Git | 30s - 2min |
| Netlify Drop | No | Browser upload | Deploy history | Seconds |
| Surge.sh | Yes | Node.js + npm install | No | Seconds |
| CodePen / JSFiddle | No | None | No | Seconds |
| Handoff | Yes | API token | Built-in | Seconds |
Here's the quick setup if you want to try the integrated workflow.
Sign up at handoff.host and grab your token from Dashboard > Settings.
export HANDOFF_API_TOKEN=your_token_here
Add this to your shell profile (.zshrc, .bashrc) so it persists across sessions.
Create the skill directory and download the SKILL.md:
mkdir -p .claude/skills/handoff
curl -s "https://handoff.host/.well-known/agent-skills/handoff/SKILL.md" \
-o .claude/skills/handoff/SKILL.md
This installs the skill at the project level. For a global install (available across all projects), use ~/.claude/skills/handoff/ instead.
Start a Claude Code session and ask it to generate something. When you're happy with the result, say "upload this to Handoff" or just use the /handoff command. Claude handles the rest.
Use Claude Artifacts if you're working in the Claude web UI and want to share a quick interactive preview. It's zero-setup and instant, but limited to the web interface.
Use GitHub Pages if the HTML is part of an ongoing project that's already version-controlled. The overhead is worth it for long-lived pages tied to a repository.
Use Surge or Netlify if you need custom domains or are deploying a multi-file static site. These platforms scale beyond single-page hosting.
Use Handoff if you're working in Claude Code and want the shortest path from "file on disk" to "URL in someone's hands." It eliminates the context switch between generating and sharing, keeps a version history automatically, and stays inside your terminal workflow.
For concrete examples, see HTML artifacts you can make with Claude Code.
The gap between generating content and sharing it is one of the last points of friction in AI-assisted development. Claude Code can build a polished HTML page in seconds. The tooling for getting that page in front of another human should be just as fast.
The trend is clear: the best developer tools are the ones that remove steps rather than add them. Whether you choose Handoff or another approach, the goal is the same. Spend your time on the creative work (describing what you want, reviewing the output, iterating on the design) and let the sharing happen automatically.
Your terminal is already where the work happens. Sharing should be, too.