You asked Claude to build something — a calculator, a landing page, a quiz app — and it actually worked. Now you're staring at an artifact in the Claude sidebar and wondering: how do I turn this into a real URL I can share?
Here are three ways to do it, ranked from fastest to most robust.
Method 1: OneClickLive (~3 seconds, free, no account needed)
This is the fastest path from Claude artifact to live URL that I know of. Full disclosure: I'm the developer of OneClickLive, so take that into account — but I'll keep this honest.
How it works:
- In Claude, click "Copy" on your artifact to grab the code
- Go to oneclicklive.app
- Paste your code into the editor
- Click "Deploy" — you get a live URL in about 3 seconds
That's it. No account, no config file, no CLI.
What it handles automatically:
OneClickLive auto-detects whether your code is plain HTML, React/JSX, Vue, or vanilla JavaScript. If it's React, it automatically wraps it with React 18, Babel (for JSX transpilation), and Tailwind CSS — so you don't need a build step. You can paste raw JSX and it just works.
Free tier:
- 3 projects
- 7-day hosting per deploy
- No account required for your first deploy
Pro plan: €12/month — gives you 25 projects, permanent hosting, and a custom subdomain.
Best for: Demos, sharing with clients or friends, quick feedback loops, prototypes you want someone to click through right now.
Honest limitation: The free tier has a 7-day expiry. If you want something permanent, you'll either need the Pro plan or one of the methods below.
Method 2: GitHub Gist or CodePen (good for code sharing, not a "real" website)
Both of these are popular options you'll see recommended online, but there's an important distinction: they show your code to the world, not a polished deployed app.
GitHub Gist:
- Go to gist.github.com
- Paste your HTML, name the file
index.html, and publish - You get a shareable URL — but it renders the raw file or syntax-highlighted code, not the running app
- Tools like rawgit.com used to solve this but are gone now
CodePen:
- Go to codepen.io/pen
- Paste HTML/CSS/JS into the respective panels
- You get a live preview URL that others can visit
- Works well for simple HTML/CSS/JS; React support requires configuration
- The URL looks like a code editor, not a finished product
Best for: Sharing code with other developers, getting feedback on implementation, embedding snippets in blog posts.
Why it falls short: If you're sending a link to a non-technical client or friend, they'll land on something that looks like a dev tool, not your app. It's also not suitable for anything you'd call a "product."
Method 3: GitHub Pages (~10 minutes, permanent, custom domain possible)
If you want something permanent that you control, GitHub Pages is the right answer. It's free, reliable, and supports custom domains.
Steps:
- Create a new GitHub repository (public)
- Add your artifact code as
index.htmlin the root (or use the GitHub web editor to create the file) - Go to Settings → Pages
- Set the source to your main branch, root folder
- Save — GitHub will give you a URL like
yourusername.github.io/repo-name
For plain HTML artifacts, this works immediately. For React artifacts from Claude, you'll need to either:
- Add the React/Babel CDN scripts manually to your HTML (Claude's artifacts often already include these), or
- Set up a proper build pipeline with Vite or Create React App if the code is component-based
Custom domain: You can point any domain you own to GitHub Pages via a CNAME record — fully supported and free.
Best for: Projects you want to keep long-term, portfolio pieces, anything that needs a custom domain, open-source tools you want others to fork.
Honest limitation: Setup takes real time, especially if your React artifact needs modifications to run outside Claude's sandbox. Plan for 10-30 minutes if you hit issues.
Quick comparison
| OneClickLive | CodePen | GitHub Pages | |
|---|---|---|---|
| Time to live URL | ~3 seconds | ~2 minutes | ~10 minutes |
| Looks like a real website | Yes | No | Yes |
| Free | Yes (7-day limit) | Yes | Yes |
| Permanent | Pro plan (€12/mo) | Yes | Yes |
| Custom domain | Pro plan | No | Yes |
| React support | Auto (no config) | Manual | Manual or build step |
| Account required | Not for first deploy | Yes | Yes |
Getting better deployable artifacts from Claude
One thing I've learned: Claude's artifacts are much easier to deploy when you're explicit about the output format upfront.
Instead of asking for "a quiz app," try:
"Build a self-contained single-file HTML quiz app about [topic]. Use only CDN dependencies. No build step required. Make it look polished with Tailwind CSS via CDN."
The phrase "self-contained single-file HTML" is the key. It tells Claude to produce something you can copy-paste and deploy anywhere without a bundler, without npm install, without anything. The artifact will include all its dependencies inline or via CDN links.
If you're building something React-based, add:
"Use React 18 via CDN with Babel standalone for JSX — no build step."
This produces code that works instantly on any static host, including all three methods above.
If you've built something with Claude that you're proud of, the friction between "artifact" and "live URL" shouldn't be the thing that stops you from sharing it. Pick the method that matches how long you need the link to stay alive — and ship it.
I'm the developer of OneClickLive. It's a side project I built because I kept running into this exact problem. If you try it and something breaks, the feedback link is right on the site.
Top comments (0)