Redirecting to PayPal

Visual Editor for Windsurf

Create stunning UIs in Shuffle, then take full control with Windsurf. 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 Windsurf.
user@host:~/demo$ npx @shuffle-dev/cli --help
user@host:~/demo$ npx @shuffle-dev/cli get example-project .shuffle --rules=windsurf
Example Windsurf 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,400+ 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 --rules=windsurf ~$ 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 Windsurf for changes

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

Example Windsurf 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 + Windsurf?

Windsurf is your AI Code Editor — Shuffle is the fastest way to create UIs for your websites. Together, they remove bottlenecks from idea to deployment.

Seamless Visual-to-Code Transition

Design visually in Shuffle without worrying about code structure, then let Windsurf handle the complex development tasks. The AI understands your codebase context and can make sophisticated improvements while maintaining your design integrity.

AI-Powered Code Enhancement

Windsurf's AI agent can instantly refactor components, optimize performance, add functionality, or completely transform your application's purpose - all through simple, natural language commands.

Massive Component Library Access

Leverage Shuffle's extensive collection spanning 80+ UI libraries across Tailwind CSS, Bootstrap, Material-UI, and more. From dashboards to landing pages, find the perfect starting point for any project, then enhance it with Windsurf's intelligent development tools.

Accelerated Development Cycles

Combine the speed of visual design with the power of AI coding. What traditionally takes days of component building and styling can now be accomplished in hours, freeing you to focus on unique features and business logic instead of repetitive UI development.

Iterate Without Rewrites

Shuffle makes UI changes effortless. Windsurf helps update your codebase intelligently. Edit visually and regenerate what you need - without breaking flow.

Built for real teams

Works with real code. No lock-in. Shuffle and Windsurf combine the best of visual editing and AI for developers who ship their products.

Don't miss the next deadline

Create beautiful templates in minutes.

Try Visual Editor →

The easiest way to create beautiful websites

New price from Feb 7th, 2026 ▼

The selected plan includes lifetime access to Shuffle Editor.

Lifetime License

Create an account

OR USE EMAIL
Pay with card

Pay with card
Pay with PayPal

Pay with PayPal™

We issue VAT invoices. Already have an account? Sign in

80+ Beautiful UI Libraries

With 13,400+ ready-to-use components, you can design faster and explore limitless creative possibilities.

AI Design Features

Let AI generate layouts, components, and styles that stay consistent, so you can focus on refining your vision instead of starting from scratch.

Flexible Solution

Work in frameworks you love: Tailwind CSS, Bootstrap, and more. Export projects to your favorite stack: Next.js, Laravel, WordPress, and beyond.

All-in-One Toolkit

Get everything you need to build websites and templates efficiently: Shuffle Editor, UI Library Creator, Components Gallery. Choose the tools and workflow that best fit you, all in one platform.

Shuffle Editor

Build websites faster with an AI Visual Editor

Shuffle Editor on Twitter Shuffle Editor on YouTube Shuffle Editor on Facebook new Join our Discord server

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.