Share a Claude Artifact as a Link — Step-by-Step

Claude can generate incredible HTML pages, React components, and interactive JavaScript applications. But those artifacts live inside the chat window — you can't share them with a link, embed them in a document, or send them to a client without also explaining what Claude is and how to open an artifact.

This guide walks you through the fastest way to turn any Claude artifact into a real, shareable URL — and covers everything you need to know about which artifact types work, common issues, and how to get better results from Claude in the first place.

What Is a Claude Artifact?

When Claude generates code that produces a visual output — a web page, an interactive tool, a React component — it displays it in an "artifact" panel to the right of the chat. You can preview it there, interact with it, and ask Claude to modify it. But artifacts don't have URLs. You can't share them. They exist only within that specific Claude conversation.

This is fine for personal exploration, but it's a significant limitation if you want to:

• Share a tool you built with a colleague
• Show a client a prototype
• Embed a mini-app in a blog post or newsletter
• Post a demo on social media

To do any of that, you need to deploy the Claude artifact as a real website.

Step 1: Copy the Artifact Code from Claude

In your Claude conversation, look at the artifact panel on the right side. In the top-right corner of that panel, you'll see a copy icon (it looks like two overlapping squares). Click it. This copies the full source code — not just a snippet, but the complete runnable code — to your clipboard.

Depending on what you asked Claude to build, this could be:

• A complete HTML file with embedded CSS and JavaScript
• A React component using JSX syntax
• A Vue single-file component
• Plain JavaScript with DOM manipulation

All of these formats are supported by OneClickLive — you don't need to identify the type manually.

Step 2: Paste Into OneClickLive

Open oneclicklive.app in a new tab. You'll see a code editor. Paste your code into it (Ctrl+V or Cmd+V).

OneClickLive automatically detects the code type within a second or two. Look at the badge in the editor toolbar — it will show "HTML", "React", "Vue", or "JS". If the detection is wrong (rare), you can override it manually using the dropdown.

For React artifacts specifically: Claude often generates JSX without import statements, because it knows its artifacts don't need them. When OneClickLive detects React/JSX code, it automatically wraps your component with:

• React 18 and ReactDOM (via CDN)
• Babel standalone (so JSX is compiled in-browser)
• Tailwind CSS (via CDN) — because Claude loves Tailwind

This means React artifacts that would normally require a full npm install and build step just… work. No configuration needed.

Step 3: Deploy With One Click

Click the Push to Edge button. Within 3 seconds, your Claude artifact is live at a URL like xk7m2p9q.oneclicklive.app.

Copy the URL. You can now:

• Send it to anyone — they just need a browser
• Embed it in an iframe
• Link to it from a document or email
• Post it on Twitter, LinkedIn, or Slack

What Claude Artifacts Work Best

Claude generates a wide variety of artifacts. Here's how each type performs on OneClickLive:

Artifact Type	Works on OneClickLive?	Notes
HTML + CSS + JavaScript	✅ Perfect	Works exactly as Claude rendered it
React / JSX	✅ Auto-wrapped	React 18 + Babel + Tailwind added automatically
Vue components	✅ Auto-wrapped	Vue 3 CDN added automatically
Plain JavaScript	✅ Works	Wrapped in basic HTML boilerplate
Python scripts	❌ Not supported	Browser can't run Python
Backend API code	❌ Not supported	Requires server-side execution
Markdown	⚠️ Partial	Renders as plain text unless Claude included HTML conversion

For artifacts that don't work directly, you can ask Claude to convert them. For example: "Convert this Python script to a JavaScript web app that runs in the browser" or "Turn this API demo into a static HTML page that simulates the output."

Getting Better Results from Claude for Deployment

The more specific you are when prompting Claude, the better the deployed output looks. Here are prompts that work well:

• "Build a [tool] as a single HTML file with no external dependencies except Tailwind CDN"
• "Create a React component for [feature] — use only Tailwind for styling, no custom CSS"
• "Build a [game/app/tool] that works entirely client-side, no backend required"
• "Generate a landing page for [product] — single HTML file, fully self-contained"

Avoid asking for artifacts that require server-side logic, database connections, or authentication — these won't work once deployed as static files.

Free vs Pro Deployment

Feature	Free	Pro ($13/mo)
Deploy immediately (no account)	✅	✅
Number of projects	3	25
Hosting duration	7 days	Permanent
Custom subdomain	❌	✅ (e.g. my-app.oneclicklive.app)
Update existing project	❌	✅

For quick prototypes and demos, the free tier is usually sufficient. For anything you want to keep live permanently — a portfolio piece, a client demo, a tool you share regularly — the Pro plan makes sense.

Common Issues and Fixes

The artifact looks different from Claude's preview

Claude's built-in artifact renderer sometimes applies default styles that aren't in the code itself. If your deployed version looks slightly different, try asking Claude to "add explicit CSS for [the issue] so it renders correctly everywhere" and redeploy.

My React artifact shows a blank page

This usually happens when the component exports a named function but doesn't have a default export. Try adding export default App; (or whatever your component is called) at the bottom of the code before deploying.

Fonts look different

Claude sometimes assumes Google Fonts are available. If your artifact uses custom fonts, add the Google Fonts import link to the <head> — or ask Claude to include it explicitly in the code.

The artifact uses an API that doesn't work in the browser

Some Claude-generated apps make fetch calls to APIs that don't allow cross-origin requests from browser pages. This is a CORS issue. Ask Claude to "replace the API calls with realistic mock data" if you just need a working demo.

Frequently Asked Questions

Do I need a Claude account to do this?

You need a Claude account to use Claude's artifact feature, but you don't need any account to deploy on OneClickLive (the first deploy is account-free). If you want to keep projects longer than 7 days or use a custom URL, you'll need a OneClickLive account.

Can I update a deployed artifact?

Yes, if you have a OneClickLive Pro account. You can edit the code in your project dashboard and redeploy. On the free tier, you'd deploy as a new project.

Is there a file size limit?

Extremely large artifacts (ones with large base64-encoded images or very long JavaScript files) may be slower to deploy, but there's no strict character limit that would block typical Claude-generated code. If your artifact is particularly large, consider hosting images externally and referencing them by URL.

The fastest way to go from Claude's chat to a live URL: copy the artifact, paste at oneclicklive.app, click Push to Edge. Done.