# artf/grapesjs

**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/artf-grapesjs).**

25,918 stars · 4,620 forks · TypeScript · NOASSERTION

## Links

- GitHub: https://github.com/artf/grapesjs
- Homepage: https://grapesjs.com
- awesome-repositories: https://awesome-repositories.com/repository/artf-grapesjs.md

## Description

GrapesJS is a framework for creating no-code visual editors that produce HTML and CSS templates. It provides a browser-based interface for designing website and newsletter structures using a drag-and-drop page editor.

The project functions as a web builder framework, enabling the development of custom design environments. It includes a system for managing nested HTML elements, modifying layout properties via a graphical interface, and organizing components through a page layer hierarchy.

The toolset covers digital asset management for organizing images and files, as well as the ability to persist project states to local or remote storage. It also includes utilities for exporting complete templates and associated assets into downloadable archives for deployment.

## Tags

### Development Tools & Productivity

- [Visual Design Frameworks](https://awesome-repositories.com/f/development-tools-productivity/no-code-platforms/visual-design-frameworks.md) — Provides a comprehensive framework for building custom no-code visual design environments and drag-and-drop page editors. ([source](https://github.com/artf/grapesjs#readme))
- [Visual Editor Frameworks](https://awesome-repositories.com/f/development-tools-productivity/no-code-platforms/visual-editor-frameworks.md) — Functions as a framework for creating no-code visual editors that produce HTML and CSS templates.
- [No-Code Template Builders](https://awesome-repositories.com/f/development-tools-productivity/no-code-platforms/no-code-template-builders.md) — Provides a system for designing website and newsletter structures with integrated asset management.

### Part of an Awesome List

- [HTML Builders](https://awesome-repositories.com/f/awesome-lists/devtools/html-builders.md) — Offers a visual editor for creating website and newsletter structures using a drag-and-drop interface. ([source](https://github.com/artf/grapesjs#readme))
- [Web Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/web-frameworks.md) — Free and Open source Web Builder Framework. Next generation tool for building templates without coding.

### Software Engineering & Architecture

- [UI Component Model Trees](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-tools/internal-tree-representations/ui-component-model-trees.md) — Maintains an internal representation of the HTML structure to track changes before applying them to the document.
- [Live Preview Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/background-thread-dispatchers/dom-synchronization/live-preview-synchronization.md) — Provides real-time updates to the visual preview as the internal model tree is modified via the UI.
- [Event-Driven Plugin Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/hook-event-orchestration/event-driven-plugin-registries.md) — Provides an event-driven plugin architecture allowing external modules to hook into core lifecycle events.

### User Interface & Experience

- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/css-styling.md) — Implements a styling engine that maps visual property changes to specific CSS selectors and rules.
- [Drag-and-Drop Page Editors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-editors.md) — Ships a visual design tool for arranging nested HTML elements and managing CSS styles without writing code.
- [Visual Property Editors](https://awesome-repositories.com/f/user-interface-experience/styled-properties/visual-property-editors.md) — Provides a properties interface for adjusting CSS properties and layout settings for selected visual elements. ([source](https://github.com/artf/grapesjs#readme))
- [Visual HTML CSS Designers](https://awesome-repositories.com/f/user-interface-experience/visual-html-css-designers.md) — Provides a browser-based interface for modifying layout properties and persisting project states.
- [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Provides a drag-and-drop interface for users to create and modify HTML and CSS layouts without writing code.
- [Component Hierarchies](https://awesome-repositories.com/f/user-interface-experience/component-hierarchies.md) — Implements a tree-structure view for organizing and managing the nesting of visual components within a page layout. ([source](https://github.com/artf/grapesjs#readme))
- [Design Asset Repositories](https://awesome-repositories.com/f/user-interface-experience/design-asset-repositories.md) — Includes a centralized library for storing and organizing local or remote images for use across templates. ([source](https://github.com/artf/grapesjs#readme))
- [Layout Prototyping Tools](https://awesome-repositories.com/f/user-interface-experience/layout-prototyping-tools.md) — Allows for rapid sketching and testing of website structures before exporting final code for deployment.

### Web Development

- [Web Builder Frameworks](https://awesome-repositories.com/f/web-development/web-builder-frameworks.md) — Acts as a framework for creating no-code visual editors that produce HTML and CSS templates.
- [HTML and CSS Templates](https://awesome-repositories.com/f/web-development/web-standards/html-and-css-templates.md) — Enables the creation of structured website and newsletter layouts by arranging visual elements and adjusting CSS.

### Content Management & Publishing

- [Digital Asset Management Systems](https://awesome-repositories.com/f/content-management-publishing/digital-asset-management-systems.md) — Provides a digital asset management system for organizing images and files across multiple web design projects.

### Data & Databases

- [Template State Persistence](https://awesome-repositories.com/f/data-databases/state-persistence/browser-storage-persistence/template-state-persistence.md) — Provides a system for persisting and retrieving project states using local, remote, or database storage backends. ([source](https://github.com/artf/grapesjs#readme))
- [Layout Persisters](https://awesome-repositories.com/f/data-databases/state-persistence/layout-persisters.md) — Serializes the entire layout and component configuration into a portable JSON format for state persistence.

### Security & Cryptography

- [Sandboxed Rendering](https://awesome-repositories.com/f/security-cryptography/security/infrastructure-and-hardware/infrastructure-system-hardening/execution-sandboxes/sandboxed-rendering.md) — Uses iframe-based sandboxed rendering to isolate editor styles from the target project styles.