Craft.JS Editor is a drag-and-drop visual page builder built using Next.js, Craft.js, and Next UI. This project allows users to design layouts visually with reusable components like buttons, text blocks, images, inputs, and more – all without touching the underlying code.
🔗 Live Preview: https://roshan-roy.github.io/craftjs
- 🔲 Drag-and-drop UI builder powered by Craft.js
- 🧱 Prebuilt components like Button, Text, Input, TextArea, Image, and more
- 🛠 Visual layout editor with a component tree (Layers view)
- ✍️ Customize each component’s content and style through the right sidebar
- 📦 Clean and modular codebase for easy extension
- 💡 Built using Next.js for optimized performance and structure
| Area | Technology |
|---|---|
| Frontend | Next.js, Craft.js |
| UI Library | Next UI |
| Styling | CSS Modules / Tailwind / Next UI |
| State Management | Internal React State |
| Build Tool | Next.js Built-in |
- ✨ Live component editing: Modify props and styles from the sidebar
- 🧩 Reusable components with built-in drag support
- 🎯 Intuitive layout customization with minimal learning curve
- ⚡ Lightweight and responsive interface
- 🧠 No backend or authentication – purely frontend logic and rendering
- Component-based UI development with React & Next.js
- Visual drag-and-drop layout building using Craft.js
- UI customization with Next UI
- Modular architecture and clean code structure
- Sidebar customization and layer navigation for UX
- ✅ Button
- ✅ Text
- ✅ Input
- ✅ TextArea
- ✅ Image
- ✅ Code Block
- ✅ Snippet
- ✅ Container (for nesting)
Built using:
Made with 💻 and ⚙️ by Roshan