a hands-on guide

Make your own interactive demo
with Claude Code

This page is an interactive demo. We'll walk through how to make one with Claude Code — no coding experience needed — then put it online three ways: GitHub Pages, Vercel, and Railway.

0 of 5 steps done
Get started How to publish

Step 1 · Make it with Claude Code

Five small steps. Tick each one off as you go — your progress is saved automatically.

  1. 1

    Open Claude Code

    Claude Code is an assistant you chat with to build things. Paste the line below into your Terminal once to set it up, then type claude whenever you want to start.

    npm install -g @anthropic-ai/claude-code
claude
  2. 2

    Describe what you want, in plain English

    Just tell Claude Code what the demo should do, like you'd brief a colleague. Here's an example you can copy and tweak:

    Make me a simple one-page interactive demo of our product.
It should have clickable tabs, a counter people can press,
and buttons that copy text. Keep it easy to open in a browser.
  3. 3

    Look at it, then ask for changes

    Open the page Claude Code made and see how it feels. Don't like something? Just say so — it'll update the page for you. Keep going until you're happy.

    Use our brand colours (navy and white), make the heading bigger,
and add a friendly intro at the top.
  4. 4

    Save it to GitHub

    GitHub is where your demo lives online so it can be published. Not sure how? Ask Claude Code to do it — it'll handle the technical bits.

    Save this project to a new GitHub repository for me.
  5. 5

    Ask Claude Code to set up publishing

    The pieces that put your demo on the web are fiddly to write by hand — so let Claude Code create them. These are the exact files already included in this project.

    Set this up so I can publish it on GitHub Pages, Vercel, and Railway.

Step 2 · Try the interactive bits

These are the kinds of things you just asked Claude Code to build. Go ahead — click around.

A counter

Click the buttons — the number reacts instantly.

0

Tabs

Switch between panels without leaving the page.

Static, free, great for docs & demos.
Instant previews on every push.
Runs a real server when you need one.

Colour accent

Tap to cycle the accent colour on the fly.

Step 3 · Put it online

"Publishing" just means putting your demo on the internet so you can share a link. Here are three ways to do it — pick whichever suits you. (Tip: if you're not sure, ask Claude Code to do it for you.)

free simplest great for demos

The easiest free option. Since your demo already lives on GitHub, you just switch publishing on and it goes live. Best when your demo is a simple page (no behind-the-scenes data).

  1. In your repository, go to Settings → Pages.
  2. Under Source, choose GitHub Actions.
  3. That's it — your demo appears at https://<your-name>.github.io/<project>/.

Every time you (or Claude Code) update the project, the live page refreshes on its own.

free to start very fast no setup

Vercel gives you a shareable link in about a minute, and a fresh preview link every time you make changes — handy for sending drafts around for feedback.

  1. Sign in at vercel.com with your GitHub account.
  2. Click Add New → Project and pick this repository.
  3. Press Deploy. You'll get a live link to share.

No commands to type — it's all point-and-click in your browser.

free trial most powerful grows with you

Choose Railway when your demo needs to do more than show a page — for example, saving information or connecting to a database. It can run the "engine" behind a more advanced demo.

  1. Sign in at railway.app with GitHub.
  2. Click New Project → Deploy from GitHub repo and pick this one.
  3. Railway builds it and gives you a public web address.

For a simple demo this is more than you need — it's here for when your ideas get bigger.

Still not sure? A quick guide

What you wantBest choice
The simplest, free way to share a pageGitHub Pages
A quick link to send drafts for feedbackVercel
A demo that saves data or talks to a databaseRailway
You just want it doneAsk Claude Code 🙂