to.it
Drag-and-drop builder to create professional websites without writing code.
Role
Technical design and full-stack development of the visual editor, back-end, and infrastructure.
Architecture
Vue 3, Nuxt, Node.js, PostgreSQL, Kubernetes — modular architecture with canvas editor, REST API, and containerized deployment.
Results
Production application with active users. Visual editor capable of handling complex layouts with optimized performance.
Context
to.it is a platform that allows users to create professional websites through drag-and-drop, without writing any code. The product targets non-technical users who need showcase websites or landing pages quickly.
The main challenge was building a performant visual editor capable of handling complex layouts while remaining accessible to users without technical skills.
Goals and Constraints
- Build a drag-and-drop editor capable of handling grids, columns, and nested components
- Maintain smooth performance even with complex pages
- Provide real-time preview of modifications
- Enable one-click export and publishing
- Ensure automatic responsive design
Solution and Architecture
The visual editor is built on a Vue 3 canvas architecture with a modular component system. Each page element is a reactive Vue component rendered in a canvas container that manages drag-and-drop interactions.
The Node.js back-end handles project persistence, asset management, and publishing. PostgreSQL stores page structures and user configurations.
The entire application is deployed on Kubernetes with automatic scaling based on load.
Technical Decisions
- Vue 3 canvas over GrapesJS: for full control over rendering and native integration with the Vue ecosystem
- Event-driven architecture: communication between the editor and configuration panel via an event bus
- Progressive rendering: components are loaded on demand to maintain performance
- Pinia state management: for editor state and Undo/Redo management