An HTML artifact is a self-contained HTML page an AI tool generated. Paths like /workspace/artifacts/checklist.html or /artifacts/index.html are where the tool saved it.
To open the file on your computer, download or save it, then double-click it or drag it into a browser. If it was saved in a cloud or sandbox workspace, download it first, since that path only exists inside the tool.
To share it as a link, sign up with email or Google, then upload the file.
In the dashboard, use the browser upload. The slug field is optional. Leave it blank to use the filename. If you set a slug, use 3-50 lowercase letters, numbers, or hyphens.
To upload with the API, copy the token from Dashboard > Settings > API token and send the file with a slug:
curl -X POST https://handoff.host/api/upload/ \
-H "Authorization: Bearer $HANDOFF_API_TOKEN" \
-F "[email protected]" \
-F "slug=checklist"
The link looks like handoff.host/@you/checklist/. Viewers can open it without an account. Uploading again with the same slug adds a new version at the same link.
If the file is code_artifact.html from Claude Code, see how to share Claude Code HTML artifacts. You can upload from Claude Code with the Handoff skill.
The free plan includes 5 files, pages up to 2 MB, images up to 5 MB, and a Handoff bar on pages. Pro is $5/mo: unlimited files, pages up to 10 MB, images up to 20 MB, no bar, and password protection.
Pro for $5/mo, or start free.
HTML artifacts are not only landing pages. They are readable, visual, sometimes interactive documents that help people understand work faster than a wall of Markdown.
Thariq's public gallery, The unreasonable effectiveness of HTML, shows twenty examples across this category. Here are the artifact types Handoff is built to share.
If you built one of these in the Claude app, sharing a Claude Artifact as a public link takes about a minute.
Use this when a task has enough moving parts that a plain checklist is not enough.
What it can include:
Prompt to try:
Create a thorough implementation plan as a self-contained HTML file. Include a data flow diagram, key code snippets, risks, and a phased checklist. Optimize it for a teammate reviewing it once before implementation starts.
Use this when a pull request needs context beyond the raw diff.
What it can include:
Prompt to try:
Create an HTML PR explainer for this branch. Focus on the parts reviewers are most likely to misunderstand. Include annotated snippets, a risk table, and a compact review checklist.
Use this when you want to compare several directions before choosing one.
What it can include:
Prompt to try:
Generate six distinct design directions as one HTML file in a comparison grid. Vary layout, tone, and density. Label the tradeoff each option makes and include a recommended path.
Use this when Claude Code has gathered context from files, git history, docs, or data and you want people to actually read the synthesis.
What it can include:
Prompt to try:
Read the relevant files and produce a single HTML explainer. Include a diagram, the key evidence, important snippets, and a "gotchas" section. Optimize it for someone reading it once.
Use this when picking values in text would be painful.
What it can include:
Prompt to try:
Make a purpose-built HTML editor for this data. Include controls that match the task, show validation warnings, and add a copy button that exports the final state as JSON.
Use this when a report needs to become a lightweight presentation without moving into PowerPoint or Google Slides.
What it can include:
Prompt to try:
Turn this report into a self-contained HTML slide deck. Keep the narrative tight, include charts and diagrams where helpful, and make it easy to review in a browser.
Upload the file from the dashboard or the API, as described above. Reuse the same slug when you want the new copy at the same link.
Upload a file, get a link. Free plan, no credit card needed.
Start sharing free