# builderio/builder

**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/builderio-builder).**

8,699 stars · 1,150 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/BuilderIO/builder
- Homepage: https://builder.io
- awesome-repositories: https://awesome-repositories.com/repository/builderio-builder.md

## Topics

`angular` `builder` `cms` `drag-drop` `frontend` `gatsby` `headless` `headless-cms` `landing-pages` `next-js` `nocode` `page-builder` `pwa` `qwik` `react` `react-native` `shopify` `vue` `webcomponents` `wysiwyg`

## Description

Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface.

The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase.

The platform manages visual page building and headless content delivery using a JSON-based page schema. It includes capabilities for real-time state synchronization between the editor and live previews and maps visual elements to framework-specific component definitions.

## Tags

### Content Management & Publishing

- [Headless Visual CMS](https://awesome-repositories.com/f/content-management-publishing/headless-visual-cms.md) — Provides a headless visual CMS to update website content and layouts without redeploying the codebase.
- [Content Delivery APIs](https://awesome-repositories.com/f/content-management-publishing/headless-api-driven-services/content-delivery-apis.md) — Decouples visual content management from the frontend using APIs to serve layout and style data.
- [Visual Content Publishing](https://awesome-repositories.com/f/content-management-publishing/production-content-hosting/visual-content-publishing.md) — Deploys visual changes to a live site or application via integrated software kits. ([source](https://github.com/builderio/builder#readme))

### User Interface & Experience

- [Headless Visual Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/headless-visual-editors.md) — Operates as a headless visual editor that decouples layout management from the rendering engine.
- [Design-to-Code Tools](https://awesome-repositories.com/f/user-interface-experience/design-to-code-tools.md) — Transforms visual design mockups into functional frontend components for various JavaScript frameworks. ([source](https://github.com/builderio/builder#readme))
- [Drag-and-Drop Layout Engines](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-layout-engines.md) — Provides a layout engine that calculates visual coordinates and translates them into CSS and HTML structures.
- [Drag-and-Drop Page Editors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-editors.md) — Provides a visual interface for modifying site layouts and generating code using project components.
- [Visual Editing Tools](https://awesome-repositories.com/f/user-interface-experience/visual-editing-tools.md) — Provides an interactive editor to modify site layouts and generate code using existing project components. ([source](https://github.com/builderio/builder#readme))
- [Framework-Agnostic Rendering](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/framework-agnostic-rendering.md) — Implements a framework-agnostic rendering system that projects visual designs onto React, Vue, or Svelte.
- [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Allows users to create and edit website layouts visually using drag-and-drop tools.
- [Real-Time State Synchronization](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks/real-time-state-synchronization.md) — Syncs the visual editor state with a live preview via a messaging layer for instant updates.

### Web Development

- [JSON-Based Page Schemas](https://awesome-repositories.com/f/web-development/json-apis/json-based-page-schemas.md) — Stores page layouts as structured JSON objects that are interpreted by a client-side renderer.

### Development Tools & Productivity

- [Design-Developer Collaboration Workflows](https://awesome-repositories.com/f/development-tools-productivity/design-developer-collaboration-workflows.md) — Bridges the gap between designers and developers by integrating visual edits into code-based projects.

### Software Engineering & Architecture

- [Component Mappings](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings.md) — Maps visual editor elements to specific frontend component definitions across different libraries.