Updated: 2026-03-24Language: English
WebBuilder Documentation
Split into clear route sections so each panel card has a dedicated page. This keeps the docs easier to scan while still preserving complete technical coverage.

Introduction

WebBuilder is a visual no-code platform built with Next.js, Supabase, and a modular component system. This documentation covers both product-level usage and implementation-level details.

Framework

Next.js 16 + React 19

State

Zustand store model

Backend

Supabase + RLS

Storage

Vercel Blob + metadata

Quick Start

  1. 1. Create an account on /auth/sign-up and verify your email.
  2. 2. Open /dashboard and create a new page from a template.
  3. 3. Open /editor/[id] and compose your layout using the components panel.
  4. 4. Configure page settings, SEO metadata, and global CSS.
  5. 5. Save changes, preview on /preview/[id], then publish/export.

Architecture Overview

Authentication System
  • Supabase client and server SDK split for browser and SSR contexts.
  • Email/password sign-in, sign-up redirect, callback exchange, and state synchronization.
  • OTP recovery flow in login page with 6-digit segmented input and keyboard navigation.
  • Middleware session refresh via proxy to keep auth cookies current across requests.
Visual Builder Engine
  • Zustand store orchestrates page state, selected component, view mode, and editing controls.
  • Flow + freeform layout modes with drag-and-drop and position updates.
  • Component renderers map strongly typed component definitions to runtime UI output.
  • Version history integrates with page_versions for snapshot restore workflows.
Data and Persistence
  • Supabase tables: pages, page_versions, media with strict user-level RLS policies.
  • Server actions encapsulate CRUD for pages, media upload/delete, and version retrieval.
  • Vercel Blob stores uploaded files, while metadata persists in media table.
  • JSONB content structure stores component trees for highly dynamic page composition.
UI and Interaction Layer
  • shadcn/ui + Radix primitives provide composable, accessible UI building blocks.
  • Framer Motion powers transitions, auth feedback effects, and animation editor output.
  • Tailwind CSS v4 token system delivers consistent styling and theme-aware rendering.
  • Live preview and presentation mode offer practical review pathways before publishing.