A modern, intuitive drag-and-drop website builder that allows you to create responsive websites without writing code. Design your website visually by dragging elements onto the canvas, customizing their properties, and exporting the generated HTML and CSS.
-
Intuitive Drag and Drop Interface: Easily build pages by dragging elements from the sidebar onto the canvas
-
Rich Element Library: Create content with various elements:
-
Basic elements: Headings, paragraphs, images, buttons
-
Layout elements: Containers, multi-column layouts
-
Form elements: Form containers, input fields
-
Detailed Property Editor: Customize every aspect of your elements:
-
Text formatting (font size, color, alignment)
-
Spacing controls (padding, margin)
-
Visual styling (background colors, border radius)
-
Element-specific properties
-
Responsive Design Preview: Test your design across different device sizes:
-
Desktop view
-
Tablet view
-
Mobile view
-
Full History Management: Never lose your work with:
-
Undo/redo functionality
-
Template saving to local storage
-
Export Options: Use your design anywhere with:
-
HTML export
-
CSS export
-
Real-time Preview: See exactly how your website will look to visitors
-
Alignment Controls: Precisely position elements with alignment options for text and buttons
- Node.js (v18.18.0 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/Satheeshraj05/Website-Builder.git
cd website-builder
- Install dependencies:
npm install
# or
yarn install
- Start the development server:
npm run dev
# or
yarn dev
- Open your browser and navigate to:
http://localhost:3000
-
Start with a Template: When you first open the builder, you'll see a default template with header, content, and footer sections.
-
Add Elements: Drag elements from the left sidebar onto the canvas. Elements are organized into categories:
-
Basic Elements: Headings, paragraphs, images, buttons
-
Layout: Containers, columns
-
Forms: Form containers, input fields
-
Edit Properties: Click on any element to select it and edit its properties in the right sidebar:
-
Content Tab: Edit the text content, URLs, or element-specific content
-
Style Tab: Customize appearance with options for colors, sizes, alignment, and more
-
Preview Your Design: Click the "Preview" button in the top toolbar to see how your website will look to visitors.
-
Test Responsiveness: Use the device toggle buttons (desktop, tablet, mobile) to check how your design adapts to different screen sizes.
-
Save Your Work: Click the "Save" button to store your template in the browser's local storage.
-
Export Your Website: Click the "Export" button to generate HTML and CSS code that you can use in any web project.
- Headings: Choose from H1-H6 levels, adjust alignment, color, and font size
- Paragraphs: Format text with alignment, color, and font size options
- Images: Set image source URL, alt text, dimensions, and sizing options
- Buttons: Customize style, size, link URL, alignment, padding, and margins
- Containers: Create styled boxes with custom padding, background color, and border radius
- Columns: Create multi-column layouts with customizable column count and gap spacing
- Forms: Set form action and method
- Inputs: Configure label text, placeholder, input type, and required status
website-builder/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main page component
├── components/ # React components
│ ├── canvas.tsx # Canvas rendering component
│ ├── canvas-element.tsx # Individual element renderer
│ ├── elements-sidebar.tsx # Element selection sidebar
│ ├── property-editor.tsx # Property editing panel
│ ├── website-builder.tsx # Main builder component
│ └── ui/ # UI components (shadcn/ui)
├── lib/ # Utility functions and types
│ ├── default-template.ts # Default template definition
│ ├── types.ts # TypeScript type definitions
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── next.config.mjs # Next.js configuration
├── package.json # Project dependencies
└── README.md # Project documentation
- Framework: Next.js with App Router
- UI Components: shadcn/ui
- Styling: Tailwind CSS
- Drag and Drop: @hello-pangea/dnd (Fork of react-beautiful-dnd)
- Icons: Lucide React
- TypeScript: For type safety and better developer experience
{
"dependencies": {
"@hello-pangea/dnd": "^16.0.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-react": "^0.294.0",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.1.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}The Website Builder works best in modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! Here's how you can contribute:
- Fork the repository
- Create a 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
Please make sure to update tests as appropriate and follow the code style of the project.
- Nested elements support
- More element types (video, social media embeds, maps)
- Custom CSS editor
- Template library
- Cloud storage for templates
- Team collaboration features
- Publishing to hosting platforms
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the beautiful UI components
- hello-pangea/dnd for the drag and drop functionality
- Lucide for the icon set
Created by Satheesh Raj