Skip to main content

How to Create

From Claude (JSX)

The fastest path. When Claude generates an interactive artifact, you can publish it directly. (JSX is the file format Claude uses for artifacts — you don't need to know what it is, just drag and drop.)

  1. In Claude, create an artifact (or find one you've already made)
  2. Click the download button to save the .jsx file
  3. On artifact.land, click + New
  4. Drop or select your .jsx file, add a title and description, choose visibility
  5. Click Save as draft — this uploads and compiles, but doesn't go live yet
  6. On the draft page, preview the artifact and adjust the cover if you want
  7. When it looks right, click Publish

artifact.land automatically compiles your JSX with the same libraries Claude uses — React, Tailwind, and more. No build step needed.

Self-contained HTML

For artifacts built with any tool — Cursor, v0, hand-coded, or bundled with Vite/Webpack.

  1. Create a single .html file with everything inlined (scripts, styles, SVGs)
  2. On artifact.land, click + New
  3. Drop or select your file, add a title and description, choose visibility
  4. Click Save as draft, preview it on the draft page, then click Publish when it looks right

HTML files are served exactly as uploaded. Include any libraries you need via CDN script tags.

Already confident? The + New form's Publish button skips the draft review and goes live immediately — handy for files you've already tested elsewhere.

From your terminal (aland)

When you're iterating on an artifact locally — or letting a coding agent work on it — aland, the artifact.land command-line client, publishes straight from a file on disk.

  1. Install aland via Homebrew — see the CLI page for the install command
  2. Run aland login once to link your account
  3. From the directory holding your .jsx or .html file, run aland push to create a draft
  4. Open the draft URL it prints, preview the artifact, and click Publish to make it live

Every CLI and agent publish creates a draft — going live is a deliberate web-session action, so nothing is ever published under your name without your click.

Supported JSX Libraries

When you upload a .jsx file, these libraries are automatically available via CDN:

Library Import
React 18react
ReactDOM 18react-dom
Tailwind CSSincluded automatically
Rechartsrecharts
D3.jsd3
Lucide Reactlucide-react
Three.jsthree
Lodashlodash
Chart.jschart.js
Tone.jstone
PapaParsepapaparse
Math.jsmathjs

Need a library that's not listed? Bundle your code as a self-contained HTML file instead.

Visibility

  • Public — appears in the Explore feed, discoverable by anyone
  • Unlisted — accessible via direct link, not shown in the feed