Yes — the free plan includes 300 credits per month with code export. Pro plans start at $20/month for more credits.

What code does Wonder export?

Wonder exports production-ready React components with Tailwind CSS styling.

Can I use Wonder without coding knowledge?

Yes — Wonder's visual canvas works like a design tool. The code export is optional for when you need it.

Wonder News

Wonder Is Now an Official Grok Bot Plugin

September 15, 2026

Wonder is now an official Grok Bot plugin. You can design with your Bot on a live canvas, trying different layouts and playing with styles. Wonder says the goal is to refine your designs together.

Handles Are Live in Wonder

August 7, 2026

Handles are live in Wonder. Grab yours before they're gone.

Collaboration Is Live in Wonder

August 5, 2026

Collaboration is live in Wonder. Other people's cursors are now on your canvas, moving around real code. In Wonder's words: we're sorry and you're welcome.

QuiverAI SVGs in Wonder

July 2, 2026

QuiverAI is now in Wonder — generate SVGs right inside your canvas: logos, typography, icons, lettering, illustrations, and more. You can even vectorize any image in seconds.

700+ Shader Presets

June 21, 2026

Wonder added over 700 shader presets — attach any SVGs or images and work with unique shaders right inside the canvas. Launched in partnership with Shaders.com.

Opus 4.8 in Wonder

June 6, 2026

Claude Opus 4.8 is now available in Wonder.

Figma Export to Wonder

May 21, 2026

Polished Figma designs often look different in production because Figma is built on WebGL. Wonder's new Figma export refines your designs and produces code that actually matches what you drew.

Google, GitHub, Microsoft Auth

April 21, 2026

More ways to sign in — Google, GitHub, Microsoft auth now live in Wonder.

Every time you switch between design and code, you lose something — your momentum, your fidelity, or your vision. Wonder is a design tool where everything you create is backed by real code.

Start with a prompt, generate designs on the canvas, connect via MCP, and export production-ready React + Tailwind. What you design is exactly how it ships.

https://www.wonder.design/

Wonder x Shaders Partnership

April 15, 2026

Wonder is partnering with Shaders.com to bring amazing shader effects directly into Wonder. Starting with a few presets, and with the Shaders MCP launch, the two platforms will integrate closer for a full loop of creating and polishing shaders.