Description
Visual website builder for managing spaces, projects, pages, and page elements through a drag-and-drop editor. The app includes a structured canvas, reusable library items, token-driven styling, media management, and AI-assisted page generation so users can build and evolve sites inside a single studio workflow.
Features
- Drag-and-drop canvas editor with multi-panel layout (navigator, canvas, activity pane)
- Hierarchical workspace structure: Spaces > Projects > Pages > Elements
- Reusable component library system for building page elements
- AI-assisted page generation and image workflows powered by Gemini
- Design token system (Config) for consistent styling across projects
- Navigator/tree view for DOM structure with element selection and property panel
- Autosave with transaction management system
- Media management with multiple storage strategies (local, Vercel Blob, Unsplash)
- Responsive design support with ruler and grid visualization
- Tag and taxonomy system for organizing content
Tech Stack
- Next.js, React, TypeScript
- Tailwind CSS, shadcn/ui, Radix UI
- Zustand + Redux Toolkit (state management)
- Drizzle ORM + PostgreSQL
- AI SDK, Google Gemini
- TanStack React Query, React Hook Form
- Atlaskit Pragmatic Drag and Drop
- Clerk, Storybook, Fuse.js, Immer