Shuffle
Shuffle is an online visual editor for developers, combining 13,400+ ready-made UI components with AI layout generation. It exports clean HTML, React, Next.js, Laravel or WordPress code with no external dependencies and no vendor lock-in.
What is Shuffle?
Shuffle is a browser-based visual editor aimed squarely at developers rather than designers. Now at version 3.0, it pairs a very large catalogue of ready-made interface parts — 13,400+ UI components spread across more than 80 libraries — with a set of AI features that generate layouts from a written prompt.
The catalogue is organised the way a page is actually built: navigations, headers, feature sections, pricing tables, forms, cards and footers. Libraries carry names like Casper, Saturn, Flaro, Gradia, Zospace and Solstice, alongside Artemis for dashboards and Vendia for e-commerce. Everything is available in the framework you already use: Tailwind CSS, Bootstrap, Bulma, Material-UI, shadcn/ui or React.
The AI side is unusual in its framing. Rather than a single assistant, Shuffle runs an AI Design Arena: you write one prompt, up to four models generate independent layout variants simultaneously, and you compare them side by side before picking a winner. The roster includes Claude Opus 5, GPT 5.6 Luna, Gemini 3.7 Flash, Gemini 3.1 Pro, Claude Fable 5 and GPT 5.6 Sol. A structured Prompt Builder lets you fix the site's goal, audience, visual style, typography, palette and sections instead of guessing at wording. Companion tools handle redesigning a site from its URL, newsletter design and WordPress theme generation.
The stated payoff is portability. Shuffle repeats that exported projects have no external dependencies and no vendor lock-in: you download HTML, Pug, React (JSX or TSX), Next.js, Laravel or Symfony sources, push them to GitHub, GitLab or Bitbucket, or deploy over SSH. For teams working with coding agents, the editor can emit a design.md specification, and a published CLI drives generation from a terminal. Extensions exist for VS Code, Cursor, Claude Code, GitHub Copilot, Windsurf and Codex.
The editor itself offers more control than most drag-and-drop tools: a DOM tree, grouped classes, editable CSS variables, per-component HTML editing, Google Fonts and Unsplash, multi-device preview and version history. Shuffle is published by REALWEB, a Polish business, and its terms are governed by Polish law.
What it does
- Generate several complete website designs from a single prompt, using up to four AI models in parallel
- Assemble pages by drag-and-drop from a catalogue of 13,400+ UI components
- Redesign an existing website by pointing the tool at its URL
- Export production-ready code as HTML, Pug, React, Next.js, Laravel, Symfony or a WordPress theme
- Publish straight to GitHub, GitLab or Bitbucket, or to your own server over SSH
- Build your own component library with the UI Library Creator, or upload one you already own
- Produce a design.md specification that coding agents can follow
When to use Shuffle / When not to
A quick filter to help you decide if Shuffle is the right fit.
When to use Shuffle
- Front-end and full-stack developers who need polished layouts without a designer on hand
- Freelancers and agencies shipping client websites on tight, repeatable deadlines
- Startup founders and small teams with no in-house design resource
- Product teams prototyping landing pages, dashboards or MVPs at speed
- Growth and e-commerce marketers who build their own campaign pages
When not to use Shuffle
- Teams needing programmatic access, since Shuffle publishes no public API
- Anyone looking for a mobile app, as the product is browser-only
- Projects that require third-party plugins or libraries inside the editor, which Shuffle explicitly does not support
- Organisations with strict procurement rules: no DPA, no published hosting location, no security certification
- Teams that need several people editing the same project at the same time
How to use Shuffle
A typical end-to-end flow, from setup to results.
- Open the editor from the homepage — Try Demo works without creating an account
- Pick the front-end technology for the project: Tailwind CSS, Bootstrap, Bulma, shadcn/ui or React
- Either write a prompt and let several AI models produce competing layouts, or start from a blank canvas
- Drag components in from the left-hand panel, or generate new ones with AI
- Edit copy and images in the right-hand Content panel, pulling images from your uploads or Unsplash
- Adjust the design through Change Styles: colours, typography, Google Fonts and CSS variables
- Open a component's HTML button for finer control, needed for anchors, embedded video or maps
- Preview across desktop, tablet and mobile, and roll back through version history if needed
- Create an account to keep your work, since demo projects are deleted after six hours
- Choose an export format (HTML, Pug or React) and a destination: ZIP, Git repository or SSH
Pros & Cons
Pros
- Component and library volume is hard to match: 13,400+ parts across 80+ libraries
- Exported code has no external dependencies and no vendor lock-in, which is the product's central argument
- Genuinely multi-framework, so you are not tied to a single styling stack
- Choosing between several AI models on the same prompt, then comparing results, is rare in this category
- The licence is permissive: unlimited end products, client work and commercial resale are all allowed
- A one-off lifetime licence is available for anyone who would rather avoid subscriptions
- The editor and its AI generation can be tried without creating an account
Cons
- No public API, so Shuffle cannot be wired programmatically into another product's workflow
- No mobile app of any kind
- No DPA, no trust or security page, and no published certification such as SOC 2 or ISO
- Neither the country nor the region where user data is hosted is disclosed anywhere
- The privacy policy is entirely silent on whether customer data trains AI models
- The terms of service are dated 1 January 2021 and predate the current AI offering by years
- Two people cannot work on the same project simultaneously
Pricing & Plans
There is no permanent free plan: every tier listed on the pricing page is paid. A demo mode is available without an account, but it caps AI generations and deletes projects after six hours. The lowest paid entry point is the Developer plan at USD 24.00 per month for a single account. The same tier costs USD 99.00 per year on annual billing, or USD 249.00 as a one-off lifetime licence.
- Developer (Single License) — USD 24.00 per month
- one account
- Developer (Single License) — USD 99.00 per year
- one account
- Developer (Single License) — USD 249.00 lifetime
- paid once
- one account
- Team License — priced by number of seats
- available monthly
- annually or as a lifetime licence
Data, GDPR & hosting
A consolidated view of how Shuffle handles your data.
GDPR overview
Implementation is partial but real. The privacy policy carries a dedicated section on legal bases addressed explicitly to people in the European Union, listing five grounds: contractual necessity, legal obligation, vital interests, legitimate interest and consent. A separate section names the GDPR outright and enumerates the rights of access, rectification or erasure, objection, restriction and portability, together with the right to complain to a supervisory authority. Requests go through account settings or to support@shuffle.dev. Because the controller, REALWEB, is itself established in Poland, no Article 27 representative is required and none is named. What is missing is equally telling: the policy never states compliance in so many words, publishes no DPA, names no subprocessors and discloses no hosting location.
Who owns the data?
Shuffle's terms are explicit that you keep your content: you retain all rights to any content you submit, post or display through the service, and you remain responsible for its legality and for protecting those rights. The commercial licence is generous — unlimited end products, personal or client work, and use inside products you sell — with one carve-out: you may not repackage Shuffle's components into a competing editor or component library. For personal data, the privacy policy names REALWEB as the controller, meaning it is the company answerable for how your account and usage information are processed.
Reuse rights
Reuse is effectively unrestricted. Exported projects carry no external dependencies and no vendor lock-in, so the code is yours to host, modify, resell or hand to a client without asking permission. The licence covers an unlimited number of end products, including ones with multiple paying users, and derivative templates built on top of Shuffle's components. Two limits apply: you cannot turn the component catalogue itself into a rival editor or UI library, and you cannot download the components wholesale and redistribute them as your own. Nothing in the terms requires attribution or prior notification.
Data retention & training
Hosting summary
Shuffle publishes no information about where user data is hosted. Neither the privacy policy nor the terms of service names a country, a region, a data centre or a cloud provider, and there is no trust or security page to consult. The only jurisdictional anchor available is the operator itself: REALWEB is established in Poland and the terms are governed by Polish law, which places the controller inside the European Union and within reach of the GDPR. That indicates where the company answers, not where the servers sit. The domain resolves to a Cloudflare anycast address, which reflects the content delivery network in front of the site and reveals nothing about storage location. References to hosting elsewhere on the site concern the customer's own deployment — pushing exported projects to a personal server or hosting provider — not Shuffle's own infrastructure. Anyone with data residency requirements will need to ask the vendor directly.
Things to keep in mind
Risks and trade-offs to weigh before adopting Shuffle.
- The lifetime licence is sold behind a countdown timer and a 'last chance' banner, with a rise to USD 349.00 announced — urgency pressure that should not drive the decision
- The 4.8/5 rating from 1,250 reviews appears only in the site's own structured data, with no verifiable third-party source
- Component counts are inconsistent across the site — 13,400+, 13,000+ and 10,000+ all appear — so treat the headline figure as marketing rounding
- Because the privacy policy is silent on AI training, you cannot assume your project content is excluded from it
- No postal address appears anywhere on the site and the terms name the operator only as 'REALWEB', which makes recourse harder than it looks
- Leaning on generated layouts can quietly erode the design judgement a developer would otherwise build; it works best as a starting point, not a substitute
- Demo work is destroyed after six hours, so anything produced without an account should be treated as disposable
Setup & Integrations
Technical difficulty
Low. Shuffle runs entirely in the browser with nothing to install, and the demo opens the editor without even an account. Basic use is drag-and-drop or prompt-driven. Some familiarity with HTML and CSS helps, because a few operations — adding anchors, embedding a video or a map — still require editing a component's HTML directly. The optional advanced paths raise the bar slightly: the npm CLI assumes a terminal, and deploying over SSH or Git means handling keys and OAuth authorisation for GitHub, GitLab or Bitbucket.
Deployment
Integrations
Supported languages
Behind Shuffle
Social
Resources
All the official URLs gathered for verification and reference.
Frequently asked questions
What exactly does Shuffle do?
Which front-end frameworks are supported?
In what formats can I export my work?
Can I try Shuffle without paying?
How much does it cost?
Is there an API?
Do I own the code and content I create?
Is my data used to train AI models?
Where is my data hosted?
Who is behind Shuffle?
Should you pick Shuffle?
Shuffle occupies a specific niche: it is a design tool built for people who write code, not for people who design. That focus shows in the details — a DOM tree, editable CSS variables, per-component HTML access, and an export step that produces sources you can read and own. The recurring promise of no external dependencies and no vendor lock-in is the product's real argument, and a credible one.
The AI layer is more interesting than most. Running four models against the same prompt and comparing the results side by side turns model choice into something the user controls rather than something the vendor decides. Paired with a published CLI and agent extensions, it points towards design generation as a scriptable step rather than a destination.
The weaknesses sit almost entirely on the governance side. There is no DPA, no security or trust page, no certification, and no statement of where user data is hosted. The privacy policy says nothing at all about whether customer data feeds model training — a conspicuous silence for a tool whose headline feature is AI generation. The terms of service still carry a January 2021 date, years older than the products they are meant to cover. None of this is disqualifying for an individual developer building client sites; all of it matters to a company with a procurement checklist.
Pricing is where Shuffle is most persuasive. At USD 24.00 monthly, USD 99.00 annually or USD 249.00 once, the cost of entry is low against the volume of assets on offer — though the lifetime price is advertised as rising to USD 349.00, and countdown timers deserve the usual scepticism. For a solo developer or a small agency the value is straightforward; for a regulated buyer, the documentation gaps will decide it.
- Choosing a selection results in a full page refresh.
- Opens in a new window.