First demo time. We’ve managed to create a v1 grid structure that nails our ideal drag-and-drop experience.
One of the most intuitive website building experiences I’ve come across is the #squarespace grid structure, but I always felt it lacked flexibility in droppable regions. Our goal was to recreate that same intuitive feel but with tighter boxes and more precise drag-and-drop zones for greater control.
While there are excellent page builder libraries out there (like Craft.js), we decided to build our own solution for three key reasons:
🔹 Precise drag-and-drop: Existing libraries either had rigid drop zones or didn’t support our specific requirements for grid-based positioning. So we used react-dnd alongside a custom grid system to ensure precise, intuitive placement.
🔹 AI Integration: Since we’re planning to integrate an AI-powered building experience, we needed full control over how components move, resize, and style within our native grid system.
🔹 Custom resizer: We built a custom resizer native to our grid system, ensuring smooth adjustments across breakpoints while keeping everything structured.
Lot more to plan and build, but that’s what we’re here for. LFB! #buildinpublic #startup #software
