Shuffle: drag-and-drop editor for quickly building web templates, with support for the Cursor extension

Shuffle is an online web editor for developers focused on quickly building professional, responsive web templates. It offers a drag-and-drop interface and over 13,200 UI components supporting frameworks like Tailwind CSS, Bootstrap, Bulma, and Material-UI. Developers can drag and drop components directly to the canvas, tweak styles and content, and export clean source code with no external dependencies or vendor lock-in.Shuffle also supports AI-assisted design, allowing components to be generated from natural language descriptions or designs to be uploaded to generate templates. It's perfect for busy front-end developers, reducing rework and saving time for style tweaks or back-end development. The official documentation and community support are excellent for individual and team collaboration.

Function List

• Drag-and-drop editor: Quickly combine UI components and build page layouts through an intuitive drag-and-drop interface.
• Rich UI component library: 13,200+ responsive UI components covering categories like navigation bars, headers, forms, and more.
• Multi-framework support: Compatible with Tailwind CSS, Bootstrap, Bulma, Material-UI and shadcn/ui.
• AI-assisted design: AI automatically generates responsive UI components by chatting or uploading designs.
• Code Export: One-click export of dependency-free HTML, CSS and JavaScript code for easy integration.
• Custom UI Libraries: Support uploading external UI libraries such as Tailwind UI, Flowbite, etc., or building your own libraries.
• Project History: Automatic saving of project versions, support for previewing and restoring historical versions.
• CLI tools: Synchronizes projects to the local development environment via the Shuffle CLI, supporting frameworks such as Next.js.
• Real-time preview and collaboration: Supports real-time preview of editing results, and teams can collaborate on editing projects.
• SVG and gradient generator: Built-in tools to generate SVG waveforms, gradient backgrounds, and other visual elements.

Using Help

Installation and use process

Shuffle is an online tool that can be used without installing software. Users just need to visit https://shuffle.dev/, register an account to get started. Here are the detailed steps to use it:

1. Register & Login::
   • show (a ticket) https://shuffle.dev/Click on "Sign Up" in the upper right corner to register your account.
   • Sign up with your email or GitHub account, verify it, and log in.
   • A free trial account allows you to experience some of the features, but core features (such as code export) require subscription to a paid plan.
2. Create a new project::
   • Once logged in, click the "New Project" button and select a framework (e.g. Tailwind CSS or Bootstrap).
   • The system offers a choice of templates, or start with a blank canvas.
   • Select a UI library (e.g. DarkPro, Solstice) or upload a custom library (e.g. Tailwind UI).
3. Using the Drag and Drop Editor::
   • Adding Components: The left panel displays the component categories (e.g. Headers, Footers). Drag the desired component to the canvas.
   • Adjusting the style: Click on the component, the right property panel can modify the color, font, spacing, etc. Tailwind CSS or Bootstrap class.
   • Editorial content: Double-click the text area to enter content directly, or upload an image to replace the placeholder image.
   • Real-time preview: The "Preview" button at the top shows how the current design will look on different devices.
4. AI-assisted design::
   • Chat Mode: Click on the AI Assistant in the lower left corner, enter a description (e.g. "Create a blue navigation bar"), and AI automatically generates the component.
   • Upload Designs: Upload a design in PNG/JPG format, AI parses it and generates the corresponding components.
   • Adjusting AI to generate results: The generated components can be dragged and dropped for adjustment, and the styles can be fine-tuned in the Properties panel.
5. Export and Synchronization::
   • Export Code: Click on the "Export" button to download a ZIP file containing HTML, CSS and JavaScript.
   • Synchronizing with the CLI: Install the Shuffle CLI and run the command:

     npx @shuffle-dev/cli get <project_id> .shuffle --rules=windsurf
     

     The project ID can be found in the editor URL (e.g. shuffle.dev/editor?project=cd0f7e984aed20beb2406e59502e7d26c44bc15f).

   • After synchronization, the code can be integrated into Next.js or other framework projects.
6. Project history management::
   • The system automatically saves a snapshot of the project every few minutes.
   • Manual save using shortcut keys Shift + Ctrl + SThe
   • View the history in the "Project History" panel and click "Restore" to revert to a certain version.
7. Using additional tools::
   • SVG Waveform Generator: Select "Wave Generator" from the "Tools" menu, adjust the color and complexity, and download the SVG file.
   • Gradient Generator: Select color and direction, preview and export CSS gradient code.
   • Uploading custom libraries: Upload UI libraries in ZIP format in the "Library" panel, which should conform to the Shuffle format (see https://shuffle.dev/docs).

Featured Function Operation

• AI-driven component generation: AI functionality is the highlight of Shuffle. Users can describe their needs in natural language (e.g., "design a product card for an e-commerce site") and AI will generate responsive components. Once generated, users can drag the component to the canvas and adjust Tailwind CSS classes or content. When you upload your design, AI parses the layout and generates components that are close to the original image, making it ideal for quickly turning designs into code.
• Multi-framework supportFor example, if you select the Bootstrap framework, the component uses the Bootstrap class; switch to Tailwind CSS, the component automatically adapts the Tailwind class. For example, if you select the Bootstrap framework, the component uses Bootstrap classes; switch to Tailwind CSS and the component automatically adapts to Tailwind classes. This flexibility allows developers to switch frameworks without having to rewrite code.
• CLI Integration: The Shuffle CLI is for advanced users. Running the npx @shuffle-dev/cli --help View commands. After synchronizing the project locally, it can be further developed with IDEs such as VS Code, which is suitable for projects that require complex back-end logic.

caveat

• Free accounts have limited functionality, it is recommended to subscribe to a paid plan based on your needs after the trial (for details, see https://shuffle.dev/pricing).
• Uploaded custom UI libraries need to conform to the Shuffle format, it is recommended to refer to the official documentation. https://shuffle.dev/docsThe
• The project exports code with no external dependencies, but needs to be checked for browser compatibility (e.g. Tailwind CSS requires PostCSS configuration).

application scenario

1. Rapid Prototyping
   Developers need to quickly prototype web pages for their clients. Using Shuffle's drag-and-drop editor, combined with a library of off-the-shelf UI components, you can build responsive pages in minutes, export the code, and demo it.
2. E-commerce Web Development
   E-commerce developers can use UI libraries like Vendia to quickly build product showcase pages, shopping carts, and checkout pages.AI-assisted generation of product cards saves manual design time.
3. Dashboard & Admin Panel
   Data analysts or administrators can use the Trizzle or Artemis libraries to quickly build data presentation dashboards. the CLI tool supports synchronizing designs to Next.js projects, making it easy to add back-end APIs.
4. Personal Portfolio Website
   Freelancers can design unique homepages with Shuffle's gradient and SVG tools. Export the code and deploy to GitHub Pages or Vercel to go live quickly.
5. Teamwork Program
   Teams can collaborate on editing web templates with live preview and project history features. Designers upload mockups, developers tweak code, and the CLI synchronizes to the local development environment.

QA

1. What frameworks does Shuffle support?
   Supports Tailwind CSS, Bootstrap, Bulma, Material-UI and shadcn/ui. users can switch between frameworks and component code is automatically adapted.
2. How do I upload a custom UI library?
   Upload UI libraries in ZIP format in the "Library" panel, which must conform to the Shuffle format. Refer to https://shuffle.dev/docs Configure Tailwind UI or Flowbite.
3. What are the limitations of a free account?
   Free accounts are available to try some of the components and AI features, but paid accounts are required for exporting code and CLI synchronization. For more information, see https://shuffle.dev/pricingThe
4. How does the AI feature work?
   Open the AI Assistant in the bottom left corner of the editor, enter a description or upload a design, and drag and drop the AI generated component to adjust it. It is recommended to use a specific description to improve the accuracy of generation.
5. How can I use Shuffle projects in my local development environment?
   Running with the Shuffle CLI npx @shuffle-dev/cli get <project_id> .shuffle, synchronize projects locally, integrate with Next.js or other frameworks.