Beta

Turn Claude's JSX artifacts into pixel-perfect images.

Claude generates beautiful interactive components as .jsx files.
snapjsx lets you view them live and export as high-resolution images.

Open Viewer Open Editor
carousel.jsx
const SLIDES = [ { render: () => ( <div className="slide"> <h1>Your Brand</h1> </div> )} ];
slide-1.png · 1080×1350 @2x
Your Brand
Instagram Carousel · Slide 1

How it works

1

Upload

Drop your .jsx file, paste code, or load from URL

2

Preview

See your component rendered live — interactive, just like in Claude

3

Edit (optional)

Tweak fonts, colors, spacing — or skip and go straight to export

4

Export

Download as PNG, JPEG, WebP or PDF in any size

Two tools, one workflow

Viewer

Interactive Preview

See your JSX component rendered exactly like in Claude's artifact viewer. Fully interactive — click buttons, scroll, explore.

  • File upload, paste, or URL
  • Full interactivity
  • Zoom controls
Editor

Export Studio

Export individual slides or entire carousels as high-resolution images. Tweak fonts, colors, spacing before export.

  • PNG, JPEG, WebP, PDF
  • Retina 2x export
  • IG Post, Story, Twitter, Pinterest & more
  • Font & color tweaks

What is a .jsx file?

Claude (AI by Anthropic) can generate interactive visual components — social media posts, carousels, dashboards, and more — as .jsx files. These are React components that need a runtime to display. snapjsx provides that runtime: upload your .jsx, see it rendered, and export it as an image.