BLOCKS Page Builder

A modern visual page builder built with React, TypeScript, and Vite, powered by Craft.js for drag-and-drop functionality. This project allows you to create dynamic web pages through an intuitive drag-and-drop interface, without requiring technical programming knowledge.

Open Source Project - Contributions are welcome! See our Contributing Guide for more details.

Features

• Drag & Drop Interface: Drag and drop components to create pages quickly
• Pre-built Components: Rich library of reusable components
• Real-time Preview: Visualize your changes instantly
• Responsive: Create pages that adapt to different screen sizes
• Code Export: Generate clean and optimized React code
• Customizable Themes: Flexible theme system with customization support
• No Authentication: Direct access without login required

Installation

1. Clone the repository:

git clone git@github.com:leandroruel/poc-page-builder.git
cd blocks-page-builder

2. Install dependencies:

yarn install

3. Start the development server:

yarn dev

4. Open http://localhost:5173 in your browser

Available Scripts

• yarn dev - Start development server
• yarn build - Generate production build
• yarn preview - Preview production build
• yarn lint - Run ESLint linter

Project Structure

src/
├── components/          # Reusable components
│   ├── editor/         # Editor-specific components
│   └── admin/          # Administrative components
├── hooks/              # Custom hooks
├── layouts/            # Application layouts
├── pages/              # Application pages
├── routes/             # Route configuration
├── themes/             # Theme system
└── utils/              # Utilities and helpers

Main Features

Visual Editor

• Intuitive drag-and-drop interface
• Properties panel for customization
• Real-time preview
• Undo/Redo operations

Available Components

• Texts and headings
• Images and galleries
• Buttons and links
• Forms
• Containers and layouts
• Custom components

Theme System

• Pre-defined themes
• Color customization
• Customizable typography
• Configurable spacing

Configuration

Environment Variables

Create a .env file in the project root (if needed):

VITE_API_CONTEXT_PATH=/api

Customization

The project is structured for easy extension:

• Add new components in src/components/editor/
• Create new themes in src/themes/
• Configure additional routes in src/routes/

Responsiveness

The page builder generates pages that are automatically responsive, adapting to:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (up to 767px)

Deployment

To deploy to production:

yarn build

The build files will be in the dist/ folder and can be served by any static web server.

Contributing

Contributions are very welcome! This is an open source project and we love seeing the community get involved.

Important: AI/LLM Policy

Code generated by AI (ChatGPT, Claude, GitHub Copilot, etc.) will NOT be accepted in Pull Requests.

See our Contributing Guide for more details about this policy and how to contribute properly.

How to Contribute

1. Read our Contributing Guide
2. Fork the project
3. Create a branch for your feature (git checkout -b feature/AmazingFeature)
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Types of Contributions

• Report bugs - Found a problem? Open an issue!
• Suggest improvements - Have an idea? Share it with us!
• Improve documentation - Help other developers
• Implement features - Add new functionality
• Write tests - Improve test coverage

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments

We thank all contributors who help make this project better!

Project Status

• Active: Project in active development
• Open Source: Contributions welcome
• Growing: Adding new features regularly

Support

If you encounter any issues or have questions, please open an issue on GitHub.