Confirm AI Code Replacement
Please review the code below and decide if you would like to replace the current component code with this version.
Select any element on the canvas to activate its settings menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt labore et dolore magna. Aliqua ut enim ad minim veniam.
You can use CSS values or Bootstrap variables, just like in .scss files.
We'll show you a Bootstrap variable name and its default value on the label hover. Click on the label to restore input to the default value.
Instead of writing values by hand, you can use pickers specially prepared for colors, sizes, shadows, transitions, and fonts.
Bootstrap Styles menu has two preview modes. One is for your pages (e.g., index.html), and the other is for Bootstrap UI components of the current category.
By default, custom components are saved globally (it is the same object).
If you want to create a new object with its own content, please use save as new component.
By default, only edited code is overwritten.
If you want to create your own component for further reuse, please use save as component.
AI is sketching, styling, and stitching everything together.
Please review the code below and decide if you would like to replace the current component code with this version.
...
Enter your own API key to bypass Shuffle's usage limits.
The scan is in progress.
The AI will include it in the generated component (upload logo, icons, videos, or other visual elements).
Clearly tell the AI where to insert the asset and how to position any related content (for example, "Use it as a logo").
Your uploaded file will be added directly to the generated component. After uploading, you can guide the AI on where exactly to use it, e.g. as a logo or as a section image.
Select data name, then edit data. Remember to save changes.
There is a newer version or session on the server. Please reload the editor to resolve.
Hint: In 9 cases out of 10 it is caused by opening the same project in multiple browser windows.
Try to use Shuffle Editor on higher resolution or change your device.
You can find previously uploaded files under the Project Files tab.
Use the search input
to browse the Unsplash library.
Once saved, you can return to it anytime in the Project Files tab.
Image generation typically completes within 30 seconds.
Select or upload a new SVG icon.
No icons found!
Git integration allows you to configure auto deployments with platforms like Vercel, Netlify, Firebase, and many more.
Create Account
SSH integration allows you to configure auto deployments to any hosting provider.
Create Account
Hosting integration allows you to deploy your project with a single click.
Create AccountYour agent will download the project and all its assets.
Your agent will convert this project into a WordPress theme.
Create a design specification that coding agents can follow to build new pages in this style or apply the same look to an existing project.
Takes up to 30 seconds.This may take up to 30 seconds.
DESIGN.md
Transform your project into a production-ready WordPress theme with Shuffle. Ready to install on your site.
Use the left column to select a category of components. Drag them into the canvas to add them to your project.
After dropping the component on the canvas, you can turn on Drag Mode, move elements around, and add new elements.
Create as many pages as your website needs. Manage them from the dropdown menu.
You can customize the chosen framework here. It doesn't matter if the framework uses Sass, tailwind.config.js, or theme.js. We will show you the same understandable visual interface.
The right menu allows you to modify an element's CSS classes and create new ones when needed.
Shuffle allows you to download the project in HTML, JSX or TSX, and PUG formats. Use icons near the Export button to switch formats.
If you don't want to download the project on your disk, export it to the Github repository. This option allows you to configure auto-deployment with platforms like Vercel, Netlify, etc.
Here's a list of keyboard shortcuts that would speed up your workflow.
Save a copy of the current project version in the history. We also save it automatically every few minutes.
Open/Close Components library.
Toggle the drag mode for a component.
When hovering over a component, holding the shift will hide its menu.
Undo the last action.
Redo the last undone action.
Open Change Styles menu.
Open Custom HTML (when hovering on a component).
Move a component UP or DOWN (when hovering on a component).
Change a component to PREVIOUS or NEXT in a library (when hovering on a component).
Delete a component (when hovering on a component).
Change page preview to <number> (when you've created more than one).
Resize the preview window to desktop size.
Resize the preview window to tablet size.
Resize the preview window to mobile size.
Open the preview in a new window.
Export the project.
Close modals.
Generate and compare designs from multiple AI models.
If you want to reuse the same set of classes, group them together so you can apply them all at once with a single click.
Below is an example illustrating how to use groups.
What would you like to change?
Shuffle pairs an AI visual editor with thousands of pro components, so you can design, build and export production‑ready code without starting from scratch.
"Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient."
Take your design beyond the editor. Download the full source code or publish directly from Shuffle.
Choose your plan in the next step.
Built in Shuffle.
Yours to take anywhere.
One project. More ways to launch.
Turn what you have in mind into a UI you can make your own. Let AI handle the first draft.
Choose your plan in the next step.
Less starting from scratch.
More bringing ideas to life.
See Shuffle AI in action