0% Loading Visual Editor

Preview in new tab
Export project
Export format
Websites published on Shuffle's infrastructure are kept in a compatible format. You can easily download the code or publish it in other formats on your own infrastructure.
Mobile app designs export as HTML. Import the screens into Figma, or give the HTML to your coding agent to rebuild the design in your app.
Next.js (TSX) React components in TypeScript Next.js (JSX) React components in JavaScript HTML Static files ready for web deployment Pug Clean, indented templates Laravel PHP project with Blade templates Symfony PHP project with Twig templates
Destination
WordPress and Shopify themes are available for export exclusively as ZIP archives.
Mobile app designs export as HTML. Import the screens into Figma, or give the HTML to your coding agent to rebuild the design in your app.
ZIP archive Download all files to your device Git repository Push code to your connected repo SSH server Deploy directly to your own server Shuffle hosting Publish instantly with a public URL Figma Send your pages to Figma
index.html
save
Add a page cancel
Preparing your pages…

Select any element on the canvas to activate its settings menu.

Active page
Active

Preview in new tab, AI tools and the Browser view use this page. Click another page on the canvas to switch.

Canvas

Make a page active
Click
Edit in Browser view
Double-click
Move a page
Drag
Move around
Drag background
Scroll the active page
Scroll over it
Zoom
Ctrl/⌘ + scroll
Zoom to fit
0
Project history
Current version
Previous versions

Redirecting to PayPal

Tailwind Styles

Body
Fonts
Responsive breakpoints
Font family
Font size
Font weight
Letter spacing
Line height

Hi there!

You must have a full account to use all features.

Create Account
Colors
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink

Hi there!

You must have a full account to use all features.

Create Account
Spacing

Hi there!

You must have a full account to use all features.

Create Account
Border color
Border radius
Border width

Hi there!

You must have a full account to use all features.

Create Account
Box shadow

Hi there!

You must have a full account to use all features.

Create Account
Width
Min width
Max width

Hi there!

You must have a full account to use all features.

Create Account
Height
Min height
Max height

Hi there!

You must have a full account to use all features.

Create Account
Background size

Hi there!

You must have a full account to use all features.

Create Account
Background position

Hi there!

You must have a full account to use all features.

Create Account
Cursor

Hi there!

You must have a full account to use all features.

Create Account
Flex
Flex grow
Flex shrink

Hi there!

You must have a full account to use all features.

Create Account
Inset

Hi there!

You must have a full account to use all features.

Create Account
List style

Hi there!

You must have a full account to use all features.

Create Account
Object position

Hi there!

You must have a full account to use all features.

Create Account
Opacity

Hi there!

You must have a full account to use all features.

Create Account
Order

Hi there!

You must have a full account to use all features.

Create Account
SVG

Hi there!

You must have a full account to use all features.

Create Account
Z-index

Hi there!

You must have a full account to use all features.

Create Account
Custom CSS  

Hi there!

You must have a full account to use all features.

Create Account
__tailwind-ui.html index.html
save
Add a page cancel

Custom HTML

All changes saved

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.

What should we change on this page?

Describe it in your own words. The AI Agent can edit, add, remove or reorder sections, and you’ll see the result in the preview.

AI Agent

| |
Demo ideas to try: Pricing Section, Contact Form Dynamic Section, Invert Colors
or
index.html
save
Add a page cancel
Please wait a moment

AI is sketching, styling, and stitching everything together.

Draw your idea

← Return to the homepage
No internet connection. We will not save your changes.