Skip to main content

Using the builder

The canvas, selecting and moving elements, the code editor, shortcuts, and responsive design.

Builder overviewThe Builder is where you design and build your app. It's a visual workspace with a live preview canvas in the center, panels on the left for adding elements and managing pages, and an edit panel on the right for styling whatever you've selected.

Selecting elementsEverything on your page is an element. Headings, images, buttons, sections. To edit any part of your app, you first need to select it.

Reordering sectionsYour page is made up of sections and elements stacked together. You can rearrange them using drag-and-drop on the canvas or in the Layers panel.

Code editorThe code editor gives you direct access to the Next.js and Tailwind CSS source code of your app. Every page is a real .tsx file, and every style is a Tailwind class.

Context menu & shortcutsContext menu

Responsive designYour app needs to look good on every screen size. WebTwizz lets you preview different devices and adjust styles per breakpoint using Tailwind CSS classes.