Redirecting to PayPal

Visual Editor for Claude Code

Create stunning UIs in Shuffle, then take full control with Claude Code. Sync projects locally and accelerate your workflow — all powered by the Shuffle CLI.

Try Visual Editor → Open the README
Shuffle CLI: Create a bridge between Shuffle and Claude Code.
user@host:~/demo$ npx @shuffle-dev/cli --help
user@host:~/demo$ npx @shuffle-dev/cli get example-project .shuffle
Example Claude Code queries: * Create a next.js app from .shuffle directory (to start) * Add new pages to my next.js app from .shuffle (to update)

The best of both worlds: visual creativity meets AI coding

Step 1 of 3

Build visually in Shuffle

Shuffle gives you 13,200+ responsive UI components to kickstart your projects — and with intuitive drag and drop, assembling beautiful layouts is faster than ever.

Try Demo
Step 2 of 3

Synchronize with your local machine

Download your project instantly using the Shuffle CLI. It connects your visual designs to your development environment, keeping everything in sync — no copy-paste required.

~$ npx @shuffle-dev/cli --help ~$ npx @shuffle-dev/cli get <project_id> .shuffle ~$ npx @shuffle-dev/cli sync <project_id>

You can find your project ID in the URL of the opened project, for example:

shuffle.dev/editor?project=cd0f7e984aed20beb2406e59502e7d26c44bc15f

Learn about all available commands in the README.

Step 3 of 3

Ask Claude Code for changes

Once your code is synced, use Claude Code’s AI to make edits instantly. Refactor components, tweak styles, or generate new sections — just describe what you want, and let Claude Code handle the rest.

Example Claude Code query:

Create a Vue project based on the .shuffle directory. Update text content and images to reflect a purpose of the website: selling invisible umbrellas.

Why use Shuffle + Claude Code?

Combine Shuffle's visual UI editor with Claude's intelligent coding to build faster, cleaner, and more confidently—without context switching.

Visual Editing with Real Code

Start in Shuffle to build your UI visually using Tailwind CSS or other frameworks. Use Claude Code to generate components, logic, or updates based on plain English. It fits right into the codebase Shuffle creates.

Fast Iteration, Fewer Disruptions

Prototype, preview, and adjust UI instantly in Shuffle. Let Claude make intelligent code changes around your edits - without breaking structure.

Edit Visually, Refactor Intelligently

Make layout and style changes in Shuffle without touching code. Use Claude to refactor or restructure your components without losing context.

Works with Your Stack

Shuffle exports clean, component-based code. Claude can extend that code with APIs, states, or server logic—tailored to your tech stack.

Ship Faster with Less Friction

Skip handoffs and messy edits. With Shuffle + Claude, you go from visual mockups to polished code in less time - and with fewer mistakes.

Understand Code at a Glance

Use Claude to explain complex logic, suggest improvements, or document your code. Combine that with Shuffle's clarity for a more readable frontend.

Don't miss the next deadline

Create beautiful templates in minutes.

Try Visual Editor →

The easiest way to create beautiful templates

The selected plan includes lifetime access to the editor for Tailwind CSS, Bulma, Bootstrap, MUI, and shadcn/ui.

Lifetime License

Create an account

Pay with card

Pay with card
Pay with PayPal

Pay with PayPal™

We issue VAT invoices.  

80+ Beautiful UI libraries

Switch between UI libraries and create unique projects every time. You have 13,200+ UI components at your disposal.

Flexible solution

Work in your favorite technologies: Tailwind CSS, Bootstrap, Bulma, MUI, and shadcn/ui.

Multiple products included

Access the Shuffle Editor, UI Library Creator, AI Assistant, Alternatives, Components Gallery, and create templates in the most convenient method for you.

Plugin support

Work the way you are comfortable. After exporting, improve your work in any IDE. Registered users can use Visual Studio Code and Cursor extension!

Shuffle Editor

An online editor for busy developers.

Shuffle Editor on Twitter Shuffle Editor on YouTube Shuffle Editor on Facebook

Products

Extensions

UI Components

Support

Company

© 2025 Shuffle. All rights reserved.