Swizz.ai
    Log InSign up free

    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
    ReactTypeScriptTailwind CSSVite

    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

    Same as Tablet

    Spacing

    96

    Colors

    Colors apply on every device

    Saved to your React source

    Example

    Illustration only: in the app you use the controls, and there is no code to edit.

    Start building

    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.

    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.

    Comparison of the Default and Development website builders
    What differsDefaultGuided wizard, visual editing, no code.DevelopmentYou are hereReact project, live preview, control down to the element.
    Best forBusiness and brochure sites you keep editing yourselfSites that need design control down to the element
    How you startA five-step wizard: Business, Brief, Colours, Logo, ReviewA four-step brief: Business Info, Brief, Content, Generate
    What Swizz buildsA page assembled from a reviewed section library, with copy written for your businessA multi-page website written in React, TypeScript and Tailwind CSS
    EditingClick any element and edit it visually, or ask AI to change the selectionA live preview with a visual inspector and an element-scoped AI chat
    Responsive designAdjust sections for desktop, laptop, tablet and mobileDesktop, tablet and mobile each edit their own breakpoint
    LanguagesWritten in the language of your briefPick from 44 languages, including right-to-left scripts
    Version historyAutomatic versions, named restore points and a snapshot before every publishYour last 50 versions, with a preview before you restore
    Publishing and domainsOne 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 appCreate → Website → Build from scratchCreate → Website → Explore Professional Builder

    See the Default 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.

    Loading page