A powerful drag-and-drop website builder that helps you design and generate code for web applications across multiple frameworks.
Website Builder is a modern visual development tool that allows you to design websites through an intuitive drag-and-drop interface. Once your design is complete, you can generate all the necessary code files for your project in your chosen framework.
- Visual Drag-and-Drop Interface: Design your website without writing code
- Multi-Page Support: Create, rename, duplicate, and manage multiple pages for your website
- Responsive Design: Preview and optimize your design for different device sizes (Desktop, Laptop, Tablet, Mobile)
- Nested Components: Add components inside containers for complex layouts
- Dark/Light Theme: Switch between dark and light themes for the editor interface
- Extensive Component Library: Pre-built components including:
- Layout elements (Header, Navbar, Jumbotron, Footer, Divider, Container)
- Content elements (Text, Heading, Card, List)
- Interactive elements (Button, Form, Input)
- Media elements (Image, Video, Icon)
- Framework Selection: Generate code for different frameworks (React fully supported, Angular and Vue coming soon)
- Code Generation: Download a complete, ready-to-run project with all necessary files
- Detailed Property Customization: Fine-tune the appearance and behavior of each component
- Page Navigation: Link components to navigate between pages
- Movable Toolbox: Drag the toolbox anywhere on the screen or dock it to either side
- Redux State Management: Efficient state management for elements, pages, and theme
- TypeScript Support: Full type safety and better development experience
- Improved Component Architecture: Better separation of concerns and reusable components
- Enhanced Drag and Drop: Improved drag and drop functionality with proper handling of nested elements
- Improved Element Positioning: Better handling of element positioning and resizing
- Intuitive Canvas Layout: Properly centered canvas with improved element visibility
- Robust Element Interaction: Improved handling of element selection, repositioning, and resizing
- Persistent State: Save your work automatically with Redux Persist
- Advanced Style Editor: Categorized style and content properties for easier editing
- Responsive Element Scaling: Elements automatically scale when changing device sizes
- Redux Persist Integration: Added persistent storage to save your work automatically
- Advanced Style Editor: Implemented tabbed interface with categorized properties for style and content
- Responsive Element Scaling: Elements now automatically adjust when switching between device sizes
- Enhanced Element Constraints: Improved boundary constraints for elements within containers
- Optimized Performance: Reduced unnecessary re-renders with throttled updates
- Improved Nested Elements: Better handling of parent-child relationships for nested components
- Canvas Scaling: Automatic canvas scaling based on available screen space
- Element Path Breadcrumb: Added navigation for nested element hierarchy
- Expanded Component Properties: More customization options for all component types
- Improved Code Generation: Enhanced generated code with better component structure
- Bug Fixes: Fixed issues with element positioning, NaN errors, and improved visibility of elements on the canvas
- Canvas Improvements: Fixed canvas positioning and scaling issues for better usability
- Element Interaction Fixes: Resolved issues with element repositioning and resizing, preventing errors when elements are deleted during interaction
- Updated Dependencies: Upgraded to Next.js 15, React 19, and Tailwind CSS 4
- React: Full support with React Router for multi-page applications
- Angular: Limited support (coming soon)
- Vue: Limited support (coming soon)
- Node.js 18.0.0 or higher
- npm or yarn
- Clone the repository:
git clone https://github.com/AjinND/website-builder.git
cd website-builder- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
- Select a Framework: Choose your target framework (React, Angular, or Vue)
- Choose a Device Size: Select the device size to design for (Desktop, Laptop, Tablet, Mobile)
- Build Your Pages:
- Drag elements from the toolbox onto the canvas
- Click on elements to edit their properties in the style editor
- Add multiple pages using the + button in the page tabs
- Rename, duplicate, or delete pages as needed
- Set up navigation between pages
- Generate Code: Click the "Generate Code" button to download a zip file with all your project files
- Run Your Project: Extract the zip file and follow the instructions in the generated README to run your project locally
- Header: Page header with logo and navigation links
- Navbar: Navigation menu for your website
- Jumbotron: Hero section with heading, text, and call to action
- Footer: Page footer with links and copyright information
- Divider: Horizontal divider to separate content sections
- Container: Container to group and organize elements
- Div: Flexible div element for custom layouts
- Text: Simple text content blocks
- Heading: Section heading with customizable size (h1-h5)
- Card: Card with title, content, image, and action button
- List: Ordered or unordered list of items
- Button: Clickable buttons with customizable action
- Form: Input form with customizable fields
- Input: Text input field with various input types
- Image: Image element with optional link
- Video: Embedded video player
- Icon: Icon with customizable style
- Click on any component on the canvas to select it
- Use the style editor panel to modify its properties:
- Switch between Style and Content tabs to find relevant properties
- Change text content, colors, and font styles
- Set up links to other pages or external URLs
- Customize component-specific properties
- Adjust positioning and sizing
- Add or remove items from array properties (like navigation links)
- Drag a container element onto the canvas
- Drag other elements into the container
- Elements inside containers can be positioned relative to the container
- Containers can be resized to accommodate their contents
- Nested containers support unlimited depth of component hierarchy
When you generate code for a React project, you'll receive a zip file with the following structure:
my-react-app/
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── public/
│ └── index.html
└── src/
├── App.js
├── AppRouter.js
├── index.js
├── index.css
├── components/
│ ├── Header.js
│ ├── Navbar.js
│ ├── Jumbotron.js
│ ├── TextBlock.js
│ ├── ButtonElement.js
│ ├── ImageElement.js
│ ├── ContainerElement.js
│ ├── DivElement.js
│ ├── CardElement.js
│ └── [Other Components].js
└── pages/
├── Home.js
└── [OtherPages].js
- Extract the zip file
- Navigate to the project directory
- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm start
# or
yarn start- Open http://localhost:3000 in your browser to see your website
This project was built using:
- Next.js 15 - React framework
- React 19 - UI library
- React DnD - Drag and drop for React
- Redux Toolkit - State management
- Redux Persist - Persistent state storage
- Tailwind CSS 4 - Utility-first CSS framework
- JSZip - JavaScript library for creating zip files
- TypeScript - Type-safe JavaScript
- Lodash - Utility library
- OpenAI API - For AI-assisted features
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Full support for React, Angular and Vue frameworks
- Implement fully responsive design
- Additional components (carousels, tabs, accordions, etc.)
- Custom CSS editor
- Template library
- Enhance AI integration for code generation and design assistance
- Collaborative editing
- Real-Time preview to see your changes instantly as you build
- Component reuse across pages
- Export to popular hosting platforms
- Component library integration
- Undo/redo functionality
- Advanced animation options