workspace68 is a modern, browser-based visual website builder. Design responsive pages effortlessly with drag-and-drop components, full styling controls, animations, interactive actions, and AI-assisted generation from reference screenshots—then export production-ready React source code.
It is local-first: open the editor and start designing immediately. No account, no server, no setup. Everything autosaves to your browser, and signing in is only needed if you want cloud sync and publishing.
- Vercel: https://workspace68.vercel.app/
- Zero-setup editor: Open the editor and design immediately. Projects are written to
localStoragefirst, so the app never blocks on a server or a login. - Optional cloud sync: Sign in with Supabase any time to mirror projects to your library, publish a public URL, and work across devices. Signing in is never required to design or export.
- Portable projects: Export and import
.jsonproject files to move a design between machines.
- 45-block palette: Layout, typography, media, data, forms, and marketing sections — searchable and grouped, insertable by drag or by a single click.
- Visual Drag & Drop Builder: Easily arrange sections, cards, grids, buttons, typography, media, and interactive blocks using
@dnd-kit. - In-Canvas Resizing & Positioning: Manipulate layout and sizing directly on the canvas or fine-tune exact styles in the properties sidebar.
- Screen flow map: The Flow tab draws the graph of screens and the tap that opens each one, so multi-step flows stay legible.
- One-place theme panel: Seed colour, radius, typography, and light/dark scheme live in a single Theme tab and apply to every screen at once.
- Responsive Viewport Previews: Seamlessly switch between Desktop, Tablet, and Mobile canvas modes, plus an interactive full-screen Preview mode.
- AI-Powered Website Generation: Generate full page layouts and components directly from reference screenshots and prompts using any OpenAI-compatible vision model.
- Dark & Light Themes: Native dark and light mode support for both the editor UI and canvas preview.
- Copy design prompt: Turn the design into a precise brief — theme, screen flow, every block, style and action — that Claude Code, Codex, Gemini CLI or Cursor can build from directly.
- Production React Export: One-click download of your visual layout as a clean, modular React + Tailwind CSS project in a
.ziparchive. The shared block renderers ship with the export, so the built project matches the design pixel for pixel.
| Shortcut | Action |
|---|---|
P |
Toggle full-screen preview |
Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z |
Undo / redo |
Ctrl/Cmd + C / Ctrl/Cmd + V |
Copy / paste selection |
Ctrl/Cmd + D |
Duplicate selection |
Ctrl/Cmd + G / Ctrl/Cmd + Shift + G |
Group / ungroup |
Ctrl/Cmd + S |
Save (autosaves anyway) |
Delete / Backspace |
Remove selection |
| Arrow keys | Nudge selection 1px (Shift for 8px) |
+ / - / 0 |
Zoom in / out / fit |
Esc |
Leave preview, inline edit, or selection |
| Technology | Purpose |
|---|---|
| React 18 | UI component architecture and state-driven rendering |
| Vite 6 | Lightning-fast development tooling and optimized production bundling |
| Tailwind CSS | Utility-first styling with comprehensive responsive design support |
| Zustand | Centralized, reactive editor state management |
| @dnd-kit | Accessible, performant drag-and-drop toolkit |
| JSZip | Client-side ZIP compilation for instant React project downloads |
- Node.js (version 18 or higher recommended)
npmoryarn
Clone the repository and install dependencies:
git clone https://github.com/PRN-6/workspace68.git
cd workspace68
npm installStart the local development server:
npm run devOpen http://localhost:5173 in your browser.
- New design on the landing page — a project is created in your browser, no account needed.
- Add a screen from the Screens tab. Each screen is a page with its own route.
- Drag blocks from the Blocks tab onto the canvas, or hover a block and press
+to append it. - Select a block to edit its style, actions and animations in the right-hand panel.
- Link screens by setting a block's action to Go to screen; the Flow tab shows the resulting graph.
- Set the look in the Theme tab — it applies to every screen.
- Ship it from Export: copy the design prompt for an AI coding tool, download a React project, or publish a live URL.
Create an optimized build and test it locally:
npm run build
npm run previewTwo headless-Chrome scripts exercise the parts of the app that are easy to break silently:
node scripts/.verify.mjs # editor UI: tabs, block insert, prompt + export output
node scripts/.verify-export.mjs # generates a project with every block type, builds it, and renders it.verify.mjs drives a running dev server (pass a different base URL as the
first argument). .verify-export.mjs is self-contained: it generates a React
project containing every block type, builds it with Vite, serves the result and
asserts the rendered DOM has no nested anchors and no console errors.
- Open the editor and select AI Builder from the top toolbar.
- Provide your preferred LLM provider details:
- Base URL: (e.g.
https://api.openai.com/v1or an OpenAI-compatible endpoint) - Model Name: (e.g.
gpt-4o,gpt-4-vision-preview, or compatible vision models) - API Key: Your provider API key
- Base URL: (e.g.
- Upload a reference screenshot or mock-up and provide prompt instructions.
- The builder will generate an interactive page structure that you can inspect, edit, and refine.
Security Note: API keys are stored only in volatile browser memory during your active session and are never included in project files or exported packages.
This project includes a production preview runner (scripts/serve.js) configured for Render web services:
- Create a new Web Service on Render and link this repository.
- Configure settings:
- Environment:
Node - Build Command:
npm ci && npm run build - Start Command:
npm start
- Environment:
- Render binds the server automatically to the allocated
$PORT.
- Import the repository in Vercel.
- Framework Preset: Vite.
- Build Command:
npm run build. - Output Directory:
dist.
For vulnerability disclosures and reporting guidelines, please review our Security Policy.
Contributions, issues, and feature requests are welcome!
Please check out our Contributing Guide to get started with local development, architecture overview, and pull request guidelines. You can also explore open issues labeled good first issue.
This project is open-source software licensed under the MIT License.
Copyright (c) 2026 Prinson R N.