# blocks/blocks

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/blocks-blocks).**

5,089 stars · 327 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/blocks/blocks
- Homepage: https://blocks-ui.com
- awesome-repositories: https://awesome-repositories.com/repository/blocks-blocks.md

## Topics

`jsx` `lowcode` `mdx` `nocode` `react` `visual-editor` `wysiwyg`

## Description

Blocks is a no-code website builder and component-based UI framework designed to create production-ready websites through a visual interface. It functions as a visual page builder that assembles layouts using pre-designed JSX component blocks.

The system includes a visual theme engine used to manage brand identity through the definition of global colors and layout presets. This allows for the application of consistent visual themes across all pages of a site.

The platform covers visual website building, JSX page construction, and brand identity management. It utilizes a schema-driven layout engine and a token-based color system to convert visual editor configurations into source code.

## Tags

### User Interface & Experience

- [Visual Website Builders](https://awesome-repositories.com/f/user-interface-experience/visual-website-builders.md) — Provides a drag-and-drop environment for creating production-ready websites without writing manual code. ([source](https://blocks-ui.com))
- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Implements a modular architectural paradigm for building UIs through reusable layout blocks.
- [Visual Editor Mappings](https://awesome-repositories.com/f/user-interface-experience/jsx-rendering-components/jsx-rendering-engines/visual-editor-mappings.md) — Translates visual editor configurations into corresponding JSX components to generate production-ready website code.
- [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Allows users to arrange and design page layouts using pre-built component blocks. ([source](https://blocks-ui.com/getting-started))
- [Visual Theme Engines](https://awesome-repositories.com/f/user-interface-experience/visual-theme-engines.md) — Provides a styling system for managing brand colors and layout presets across a visual site.
- [Brand Identity Customization](https://awesome-repositories.com/f/user-interface-experience/brand-identity-customization.md) — Provides tools to define specific brand colors for text and backgrounds through a visual interface. ([source](https://blocks-ui.com/demo))
- [Color Systems](https://awesome-repositories.com/f/user-interface-experience/color-systems.md) — Manages brand colors through a token-based system that propagates throughout the component hierarchy.
- [Visual Themes](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes.md) — Applies predefined visual identities and layout presets to ensure consistency across all site pages. ([source](https://blocks-ui.com/demo))
- [Brand Theme Applicators](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/brand-theme-applicators.md) — Applies a consistent visual brand theme across the entire website using predefined layout and style tokens.

### Business & Productivity Software

- [Web Page Assemblies](https://awesome-repositories.com/f/business-productivity-software/document-assembly-systems/component-based-assemblies/web-page-assemblies.md) — Constructs full web pages by combining modular UI blocks based on structural schemas.

### Content Management & Publishing

- [No-Code Publishing](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/website-builders/no-code-publishing.md) — Enables publishing fully functional websites directly from a visual builder without manual coding.

### Software Engineering & Architecture

- [Visual Block Schemas](https://awesome-repositories.com/f/software-engineering-architecture/configuration-driven-schemas/visual-block-schemas.md) — Uses a structured data format to define the hierarchy and placement of visual blocks on a page.

### Web Development

- [No-Code Page Builders](https://awesome-repositories.com/f/web-development/no-code-page-builders.md) — Ships a visual tool for assembling web pages using predefined blocks and widgets. ([source](https://cdn.jsdelivr.net/gh/blocks/blocks@master/README.md))
- [Visual-to-Code Compilers](https://awesome-repositories.com/f/web-development/visual-to-code-compilers.md) — Converts drag-and-drop interface states into static or dynamic production-ready source code.
- [JSX Component Assemblies](https://awesome-repositories.com/f/web-development/web-page-construction/jsx-component-assemblies.md) — Assembles web page layouts using JSX-based blocks and components to accelerate development.

### Part of an Awesome List

- [Low-Code and Visual Builders](https://awesome-repositories.com/f/awesome-lists/devtools/low-code-and-visual-builders.md) — Simple drag-and-drop website page builder.
- [Visual Page Builders](https://awesome-repositories.com/f/awesome-lists/devtools/visual-page-builders.md) — Visual builder for creating web components and pages.