Docs

Website Builder Guide

Design visually, code directly, generate with AI — then publish.

Website Builder Guide

Open a project from the Dashboard to enter the website editor.

Editor overview

  • Top bar — back, Design/Code mode, page picker, device preview, dark preview, published theme mode, undo, redo, save, Store Manager, and Publish.
  • Left panel (Design mode) — Blocks, Theme, AI, Pages, Assets, Nav, Libraries, and Outline.
  • Center canvas — live page preview with direct selection and editing.
  • Right panel — Style and Content tabs for the selected element.
  • Code mode — HTML, CSS, and JavaScript editors for the current page.

On mobile, the editor uses compact controls and panel sheets for common actions.

Design mode

Design mode is the visual editing workspace. You can:

  • Select elements on the canvas; double-click (or double-tap) text to edit it inline.
  • Use Style controls for layout, spacing, size, color, typography, borders, shadows, backgrounds, gradients, hover styles, animations, responsive rules, classes, and custom CSS.
  • Use Content controls for text, image source, alt text, maps, and embeds.
  • Copy, paste, duplicate, reset, group, ungroup, reorder, and align elements.
  • Save selected sections as reusable blocks — editing a reusable block updates it across pages.

Code mode

For full control: edit the current page's HTML, the CSS, and the JavaScript, save changes back to the project, and return to Design mode to continue visually. Keep valid HTML structure when editing imported or generated pages.

Adding and editing pages

Manage pages from the Pages panel and the page picker: switch pages, add new pages, and delete pages when allowed.

  • index.html is normally the homepage; the entry page cannot be deleted.
  • A project always has at least one page.
  • Deleting a page removes its matching managed navigation links.

Blocks and sections

The Blocks panel inserts ready-made content into the current page:

  • Basic blocks — headings, paragraphs, images, buttons, forms, lists, quotes, logos, videos, embeds, maps, and layout blocks.
  • Sections — hero, features, testimonials, pricing, call-to-action, team, FAQ, stats, gallery, table, embed, and footer layouts.
  • Starter kits, your saved reusable blocks, and community templates when available.

Fonts and colors

The Theme area controls your visual system: manage saved palette colors and apply them anywhere, choose project fonts, search and apply Google Fonts, upload your own font files (.ttf, .woff, .woff2), or use system fonts.

Images and assets

The Assets panel manages files used by your website: upload images and other files, insert them into the page, copy asset paths, pick assets for images and backgrounds, and set the project logo. Assets can include images, video, audio, fonts, PDFs, and icons.

The Nav panel manages site-wide navigation and footer: brand name, links (add, edit, reorder, remove), footer links, accent color, and logo. Applying updates keeps blog pages, generated pages, and storefront pages consistent.

Libraries

The Libraries panel manages third-party CSS and JavaScript helpers — browse available libraries, enable them for the project, and use their utility classes from the properties panel. Useful for imported templates and advanced users.

SEO

SEO is managed per page: title, meta description, Open Graph title/description/image — or auto-fill everything with AI. Saving SEO also generates sitemap.xml and robots.txt for your site.

The blog

The Blog Manager lets you create and publish posts inside your project: title, slug, excerpt, cover image or video, author, tags, and Draft/Published status. Write the body yourself or generate it with AI, and insert links, images, and videos. Published posts are written to blog/{slug}/index.html with an automatic blog index.

AI generation

The AI Assistant can:

  • Edit selected content.
  • Generate a new section (one or three options to choose from).
  • Generate a full page, or a multi-page site.
  • Follow a design direction or an admin-configured design template.
  • Generate SEO and image alt-text.

AI actions use AI credits — see how credits work.

Preview modes

Preview pages at desktop, tablet, and mobile widths, and preview dark mode inside the editor. The published theme mode controls the live site: Auto (follows the visitor's device), Light only, or Dark only.

Publishing changes

  1. Save all changed files.
  2. Open Publish, review the Site ID.
  3. Choose Publish or Republish and wait for progress to finish.
  4. Open or copy the published URL.

The publish flow prepares your files, adds generated storefront pages if the project has a store, adds a branded 404 page if needed, applies your published theme mode, uploads changed files, and finalizes the live version.

Connecting a custom domain

Custom domains are available on Starter, Pro, and Agency plans.

  1. Open the project's Publish screen and find Custom domains.
  2. Enter your domain and choose Connect.
  3. Copy the DNS records shown and add them at your domain provider.
  4. Return to the app and use Check status.

Statuses move through DNS setup required → Verifying → SSL pending → Live. Your fallback URL keeps working even after the custom domain is connected.

← Getting Started Design Studio →