Web_Builder-Z-ai

Web Builder Z-AI

A comprehensive website builder with 25+ built-in features, designed for Cloudflare deployment. Prisma-free architecture with centralized API client ready for Workers migration.

Features

Visual Builder

• Canvas Block Editor — Drag-and-drop, resize, select, and multi-select blocks
• 16+ Block Types — Heading, paragraph, image, button, divider, spacer, container, columns, video, icon, form inputs, nav, footer, hero, cards, grid
• Property Panel — Right-side style editing for any selected block
• Sidebar Tabs — Blocks, Components, Templates, Assets, Files, Styles
• Templates — Pre-built starter layouts
• Preview Mode — Full-screen live preview
• Dark Theme — Professional dark UI (#0f0f0f/#1a1a1a/#2a2a2a)

Tools & Panels

• CodeMirror 5 Editor — Full code editor with HTML/CSS tabs
• Heatmap Simulator — Attention overlay showing visual hierarchy
• Layout Cloner — Import and clone layouts from URLs (with CORS proxy support)
• Performance Audit — Circular score indicators and optimization hints
• SEO Panel — Meta/OG tag management with Google search preview
• Pages Manager — Multi-page support with localStorage persistence
• Global Styles — Design token manager with CSS variables
• Mood Board to Design System — Non-AI K-Means clustering color extraction and full design token generation

Export & Persistence

• File Manager — Virtual file system (VFS) with ZIP export (JSZip)
• HTML Export — Clean HTML output of your designs
• Undo/Redo — 50-state history with debounced autosave
• Autosave — 10-second interval localStorage persistence
• Toast Notifications — Success, info, warning, error with progress bars
• Context Menu — Right-click actions on blocks

Mobile

• Bottom Drawer — Mobile-friendly panel
• Hamburger Menu — Responsive navigation
• Touch Block Repositioning — Native touch support

Keyboard Shortcuts

• Ctrl+S save, Ctrl+Z undo, Ctrl+Shift+Z redo

Quick Start

npm install
npm run dev

Then visit http://localhost:3000

Pages

Route	Description
/	Landing page with links to Dashboard and Builder
/dashboard	Data management dashboard (users, posts)
/website-builder.html	Full visual website builder
/api/health	API health check
/api/users	Users CRUD (GET, POST)
/api/users/[id]	Single user (GET, PUT, DELETE)
/api/posts	Posts CRUD (GET, POST)
/api/posts/[id]	Single post (GET, PUT, DELETE)

Architecture

src/
  app/
    page.tsx              # Landing page
    layout.tsx            # Root layout
    globals.css           # Tailwind + theme
    dashboard/page.tsx    # Data dashboard (fetch-based)
    api/
      health/route.ts     # Health check endpoint
      users/route.ts      # Users list + create
      users/[id]/route.ts # User CRUD
      posts/route.ts      # Posts list + create
      posts/[id]/route.ts # Post CRUD
  lib/
    api.ts                # Centralized API client (fetch-based)
    mock-data.ts          # Mock data store (replace with Workers API)
  types/
    index.ts              # TypeScript interfaces
public/
  website-builder.html    # Single-file visual builder
  css/                    # Builder CSS modules
  js/                     # Builder JS modules (12 files)
dist/
  website-builder.html    # Standalone builder (no build tools needed)

Data Flow

Frontend Component
    ↓ fetch()
lib/api.ts (centralized client)
    ↓ HTTP request
Next.js API Routes (/api/*)
    ↓ currently reads from
lib/mock-data.ts (in-memory mock store)
    ↓ replace with
Cloudflare Workers (D1 / KV / R2) ← future migration

Cloudflare Migration

This project is designed for zero-friction migration to Cloudflare:

1. API Routes (src/app/api/*) — Currently return mock data. Replace mock data calls with fetch() to your Cloudflare Workers URL.
2. Frontend — Uses NEXT_PUBLIC_API_BASE env var. Set it to your Workers URL and all data flows through Workers.
3. No Prisma — Zero database dependencies. Use Cloudflare D1, KV, or R2 as needed.
4. Static Export — The builder (website-builder.html) is pure static and works on Cloudflare Pages out of the box.

# When ready to connect Cloudflare Workers:
NEXT_PUBLIC_API_BASE=https://your-workers.your-subdomain.workers.dev npm run dev

Tech Stack

• Frontend: React 19, Next.js 16, Tailwind CSS 4
• API: Next.js Route Handlers with mock data
• Builder: Pure HTML5/CSS3/Vanilla JS (zero runtime deps)
• CDN: JSZip, CodeMirror 5 (loaded via CDN in builder)
• Build: Turbopack, TypeScript

License

MIT