Website Builder · Development
React websites you shape visually and with AI
Describe your project and approve the brief. Swizz.ai writes a multi-page React, TypeScript and Tailwind CSS website that you refine in a live preview with a visual inspector and element-level AI.
In the app it's called Professional Builder: choose Website, then Explore Professional Builder.
- React, TypeScript and Tailwind CSS
- Desktop, tablet and mobile edited separately
- 44 site languages, including right-to-left
- Your last 50 versions, one click to restore
How it works
From brief to React website in four steps
The same four steps you'll see in the app. Content choices are optional: Swizz decides anything you leave blank.
Publishing and custom domains are available on paid plans.
Try it
Visual edits, written to your React source
Pick a device, move a control and watch the preview change. When you save, changes are written to your React source as Tailwind classes: Mobile edits base classes, Tablet adds md: and Desktop adds lg:.
Device
Edits apply at desktop size only
Typography
Spacing
Colors
Colors apply on every device
Saved to your React source
ExampleIllustration only: in the app you use the controls, and there is no code to edit.
In the app it's called Professional Builder: choose Website, then Explore Professional Builder.
The workspace
One workspace for every kind of edit
Your site runs in a live preview while you edit. Change one element or the whole site with AI, fine-tune styles and roll back any change.
Element AI Chat
Click any element and tell the AI what to change. It edits exactly that element and shows you each step as it works.
Inspector & States
Adjust layout, spacing, typography, colors, borders and effects, edit the text and links inside an element, and style its hover, focus, active and disabled states.
Layers & Sections
Reorder, duplicate, rename, hide or delete sections, or drop in a ready-made hero, pricing, testimonials, FAQ or gallery section.
Version History
Versions are saved automatically as you work, including AI edits, visual edits and restores. Preview any of your last 50 and restore it in one click.
Self-Healing Preview
If the preview breaks, the AI looks for the cause and tries a fix on its own. When it can't, it says so and you describe the problem in chat.
Examples
One builder, many kinds of websites
Three sites for made-up brands, each started from a quick-start type and written in a different language.
- Tech / SaaSEnglish
Tallyfern
An invoicing app site with features, pricing and a sign-up call to action.
- Law FirmDeutsch
Kanzlei Almrain
A German-language law practice site with services, team and contact pages.
- Restaurantالعربية · Right-to-left
Mawqid
An Arabic family restaurant site, laid out right to left, with menu and contact pages.
ExampleExample designs for made-up brands. Your site is designed from your own brief.
Capabilities
The finishing details are built in
Links, images, extra pages, working contact forms and a safety net under every change.
Links to Anything
Link text to a page, a section, a URL, an email address or a phone number.
Images for the Exact Spot
Generate an AI image shaped to the selected element, or upload a PNG, JPG or WebP.
Pages on Demand
Add a page and generate it with AI in a click. Swizz tells you when it's ready.
Contact Forms That Work
Messages arrive by email at your account address or another address you verify.
Questions Without Edits
Ask which sections a page has or which colors your theme uses, and nothing changes.
Undo and Redo
Step back through up to 50 changes with Ctrl or ⌘ + Z, and forward again with Shift added.
Publish and connect your own domain
Publish from the editor with one click, then connect your own domain. Swizz shows the DNS record to add and keeps checking until the domain is connected. Publishing and custom domains are on paid plans.
Two ways to build
Default or Development: pick your path
Both end with a live website on your own domain. Choose the one that matches how much control you want.
| What differs | DefaultGuided wizard, visual editing, no code. | DevelopmentYou are hereReact project, live preview, control down to the element. |
|---|---|---|
| Best for | Business and brochure sites you keep editing yourself | Sites that need design control down to the element |
| How you start | A five-step wizard: Business, Brief, Colours, Logo, Review | A four-step brief: Business Info, Brief, Content, Generate |
| What Swizz builds | A page assembled from a reviewed section library, with copy written for your business | A multi-page website written in React, TypeScript and Tailwind CSS |
| Editing | Click any element and edit it visually, or ask AI to change the selection | A live preview with a visual inspector and an element-scoped AI chat |
| Responsive design | Adjust sections for desktop, laptop, tablet and mobile | Desktop, tablet and mobile each edit their own breakpoint |
| Languages | Written in the language of your brief | Pick from 44 languages, including right-to-left scripts |
| Version history | Automatic versions, named restore points and a snapshot before every publish | Your last 50 versions, with a preview before you restore |
| Publishing and domains | One click to publish, then connect your own domain. Paid plans. | One click to publish, then connect your own domain. Paid plans. |
| Where to find it in the app | Create → Website → Build from scratch | Create → Website → Explore Professional Builder |
FAQ
Questions about the Development builder
The Default builder creates your site from professionally designed sections that you edit in a visual editor. Development writes a React, TypeScript and Tailwind CSS project that you refine in a live preview, with an inspector, controls per device and per state, and AI that edits one element at a time. You pick the builder when you start a website.
Professional Builder is the in-app name for this builder. On the create screen, choose Website and then Explore Professional Builder. Projects you start this way carry a Professional badge in your Websites list, while sites from the Default builder are badged Builder.
Not in the editor. You change your site with the visual inspector and the AI assistant, and Swizz writes those changes into the React source for you. There is no code editor, file view or code download to manage.
A running React project with up to four pages. Swizz writes your Home page and prepares the others, so you can generate each one with AI in a click and add more pages whenever you need them. Your site runs in a live preview while you work on it, and changes are saved as versions you can restore.
Yes. Choose from 44 languages while you answer the brief, including Arabic, Hebrew, Persian and Urdu. Swizz writes your site in the language you pick, and right-to-left languages get a right-to-left layout.
The build keeps running. Open the project again from your Websites list to pick up where it left off. A build that stopped early is marked unfinished, and resuming it generates only the pages that are still missing.
More from Swizz.ai
One account, three more ways to create
Websites, posts and logos share a single Swizz.ai account, so your brand stays consistent wherever you build it.
Your next website, written in React
Describe your project, approve the brief and refine every detail in a live preview until it's ready to publish.
In the app it's called Professional Builder: choose Website, then Explore Professional Builder.