HTML Artifacts: interactive web apps in one prompt
A running app you use, not a file you download
After this, you'll be able to ask Claude for an interactive app and use it live in the panel. You'll explain why an HTML Artifact is a running app you operate, not a document you download and store.
Before you start
Complete Code Artifacts: clean code Claude writes so you never have to first; this lesson builds on that one by moving from code you copy elsewhere to the artifact type that actually runs in the panel, so you need the code-versus-running distinction it sets up.
The idea
An HTML Artifact is a working web app that runs right in the panel. A mortgage calculator, a quiz, a habit tracker, anything self-contained that runs in a browser can be one. This is the one you click, type into, and operate like a real app.
The most common misread is seeing the Export button and assuming the app is a file you save, like a PDF. It is not. It is a live app you use inside the panel, clicking its buttons and dragging its sliders.
("Hosting setup" means the technical work of putting an app on the internet so others can reach it. An HTML Artifact skips that, because the app runs right where Claude made it, and Export just lets you take it with you.)
Here is the before and after: Without this, you compare two mortgage options in a clunky bank calculator, re-entering the same numbers twice. With Claude, you ask for a calculator with sliders, and a working app appears where you drag a slider and watch the payment update instantly.
Now try it: send "Build me a mortgage calculator as an interactive app, with sliders for loan amount, interest rate, and loan length in years. Show the monthly payment and total interest, and update them live as I move the sliders." Then drag a slider and watch the payment change.
If the numbers move as you drag, you are operating a running app, not opening a file you downloaded.
Try it (10 min)
Watch out for
- Clicking Export and thinking that is the point; the app already works in the panel, Export just lets you take it elsewhere
- Calling it 'a file' in your head; that misread stops you from actually using the live controls
- Asking for an app that needs your real bank data; by default an HTML Artifact runs on what you type and cannot reach your accounts unless you connect a tool, which takes a paid plan
- Cramming in ten features at once; a focused app (one calculator, one quiz) is far more likely to work on the first try
- Expecting the app to save your inputs for next time; it resets each session, so screenshot or export anything you want to keep
Paste this into Claude
Build me an interactive web app I can use right here in the panel. Do not give me a file to download; give me a working app. Make a mortgage calculator with: - A slider for loan amount (from $50,000 to $1,000,000) - A slider for annual interest rate (from 2% to 10%) - A slider for loan length in years (15, 20, or 30) It should show, updating live as I move any slider: - The estimated monthly payment - The total interest paid over the life of the loan Make it clean and easy to read. The key thing: when I drag a slider, the monthly payment and total interest should change immediately, without me clicking anything else.
What good looks like
- A working app opened in the Artifact panel with three sliders
- Dragging any slider changes the monthly payment immediately, with no extra click
- Both the monthly payment and the total interest are shown and clearly labeled
- You changed the loan length and saw the monthly payment move in the expected direction
- You can explain, in one sentence, why this is a running app and not a file you downloaded
When this breaks
- Breaks when you treat the HTML Artifact as a static file to download and store because you then never touch the live controls, so a working app sits unused as if it were a screenshot.
- Breaks when the app is asked to reach your real accounts or the live internet on its own because by default an HTML Artifact runs on the inputs you give it, so without a connected tool anything needing outside data fails silently.
AI can help with this
Paste this into claude.ai, filling in the brackets: 'Build me an interactive web app I use right in the panel, not a file to download. Make a [calculator / quiz / tracker] with [the controls you want]. Show [the results you want], updating live as I change a control. Keep it focused and easy to read.'
You can now
You can complete the lesson outcome in a real Claude chat, Project, Artifact, Connector, Desktop, or Code surface.
- You can verify that a working app opened in the Artifact panel with three sliders.
- You can verify that dragging any slider changes the monthly payment immediately, with no extra click.
- You can verify that both the monthly payment and the total interest are shown and clearly labeled.
- You changed the loan length and saw the monthly payment move in the expected direction.
Key takeaways
An HTML Artifact is a running app you operate in the panel, not a file you download. The interactivity is the point; Export is just the option to take a working app with you.
- Use the live controls in the panel; an HTML Artifact is a working app, not a static download.
- Read Export as 'take it with you,' not as 'this is just a file you save.'
- Expect apps to run on what you type by default; reaching your accounts or the live web needs a connected tool, available on paid plans.
- Build one focused app at a time so it works on the first try instead of guessing across features.
- Screenshot or export anything you want to keep, since the app resets each session.
Go deeper