BuildIT

Free, Figma-style drag-and-drop website builder. Design on a free-form canvas, then export one self-contained HTML file you can host anywhere. No accounts and no database: designs are saved in the browser (localStorage). Live at https://buildin-it.vercel.app.

Features

• 19 components (text, headings, buttons, media, cards, navbar, hero, pricing, testimonials, stats, footer and more) and reusable custom components.
• Free-form canvas: snapping guides, 8 resize handles, arrow-key nudging, zoom and pan, desktop / tablet / mobile widths, preview mode.
• Inspector for content, colors, typography, spacing, borders, shadows, opacity and transforms, plus raw JSON editing. Layer panel with rename, reorder, lock and grouping.
• Undo/redo for every change (Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y) and a history panel to jump back.
• Export: clones the canvas exactly as rendered, strips editor chrome and inlines the CSS, so the HTML file matches the design. It scales down to fit smaller screens.
• AI assistant (Groq, server-side key) for help with the editor.

Setup

pnpm install
cp .env.example .env.local   # add GROQ_API_KEY
pnpm dev

The editor works without a key; only the assistant reports that AI isn't configured.

Deploy

Vercel (or any Node host). Set GROQ_API_KEY. For rate limits that hold across serverless instances, also set UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN (free Upstash Redis).

Rate limiting

AI requests are limited per visitor IP (default 8/minute and 100/day) plus an app-wide cap (60/minute), so many IPs together can't drain the Groq quota. Blocked requests get a 429 with Retry-After, and the browser stops sending requests until the wait is over. Tune the limits in .env.example.

Scripts

pnpm dev · pnpm build · pnpm start · pnpm typecheck