The Database-Ready Visual Website Builder
Levoks is a sophisticated, multi-layered visual development platform built with Next.js 16. It enables developers and designers to build full-stack applications with a live frontend canvas, a service-oriented backend builder, and a visual routing engine that wires everything together.
Levoks is built on a Serializable State Tree architecture. Every action across all three canvases is captured in a unified JSON structure managed by Zustand. This ensures that the entire project state—from the position of a button to the database schema of a microservice—can be saved, restored, and used for deterministic code generation.
The application maintains three specialized stores that interact through a shared ID namespace:
editorStore: Houses the frontend component tree, pages, and global elements.backendStore: Manages the microservice containers, backend blocks, and database models.routingStore: The connective tissue that maps frontend "Output" ports to backend/page "Input" ports.
The frontend editor is a high-fidelity "What You See Is What You Get" (WYSIWYG) environment.
- Layout: Sections, Containers, Multi-column Grids, Flex Stacks, Spacers, and Dividers.
- Typography: Dynamic Titles, Paragraphs, and Text blocks with rich inline editing.
- Media: Optimized Image and Video components.
- Interactive: Buttons, Forms, Input fields, and specialized UI components like Accordions, Tabs, and Repeaters.
- Social: Integrated Social Bars and Navigation Menus.
Elements tagged as "Global" (like Headers and Footers) are rendered across all pages. The editor manages these in a separate registry within the editorStore, ensuring consistency across the entire site without duplication.
The Backend Builder allows for visual microservice orchestration.
- Endpoints: RESTful blocks (
GET,POST,PUT,DELETE,PATCH) with configurable routes and response logic. - Data Models: Mongoose-based schema builders for MongoDB.
- Middleware: Drag-and-drop security and utility blocks including JWT Auth, CORS, Rate Limiting, and Request Logging.
- Control Flow: Logic blocks for If/Else conditions, Loops, and Try-Catch error handling.
Jumpstart development with production-ready templates:
- Auth System: Complete JWT-based registration and login flow.
- CRUD API: Standard Create-Read-Update-Delete patterns for any resource.
- Chat System: Real-time messaging architecture.
The Routing Engine is where the application logic is "wired."
- Output Ports: Frontend elements expose events (e.g.,
onClick,onSubmit) as signal generators. - Input Ports: Backend endpoints and Pages expose themselves as signal receivers.
- Ports & Wires: Connections are stored as edge definitions in the
routingStore. When generating code, theresolveConnectionsengine traces these paths to inject the correct API calls or navigation logic.
The core value of Levoks lies in its ability to transform visual state into clean, human-readable code.
The generator doesn't just produce files; it understands dependencies. If a button is wired to a specific microservice, the generator:
- Creates an
api.jshelper in the frontend. - Configures the correct
BASE_URLandPORTbased on the backend service definition. - Injects asynchronous
fetchlogic into the React component's event handler.
Projects are bundled into a Full-Stack ZIP via JSZip, containing:
/frontend: A complete Next.js/React project with Tailwind-ready CSS./backend: Multiple Node.js/Express services, each with its ownDockerfileand shareddocker-compose.yml.
.jpeg) |
.jpeg) |
.jpeg) |
.jpeg) |
- Node.js: v18.0.0 or higher
- Package Manager: npm, pnpm, or yarn
npm installnpm run dev: Starts the Levoks in development mode.npm run build: Creates an optimized production build of the editor.npm run lint: Runs ESLint for code quality checks.
We use Zustand selectors for performance optimization and Framer Motion for all canvas animations. Please ensure all new components are fully typed and follow the existing directory structure in src/components.
Generated with ❤️ by the Levoks Team.