GrapesJS Shadcn

grapesjs-shadcn is a modern GrapesJS preset built with React, @grapesjs/react, and shadcn/ui, designed to give you a clean, composable, and developer-friendly editing experience out of the box.

It focuses on a polished UI, sensible defaults, and extensibility for advanced page, email and document builder workflows.

---

The preset ships with a fully wired GrapesJS editor and a refined UI layer built with shadcn/ui and Tailwind CSS.

• Blocks Manager

  • Beautiful, modern blocks panel
  • Built-in search for fast block discovery
  • Clean grouping and scalable layout

• Layers Manager

  • Full-featured layer manager
  • Clear visual hierarchy
  • Smooth selection and reordering experience

• Pages Manager

  • Create, rename, and duplicate pages
  • Designed for multi-page workflows

• Theme Manager

  • Configurable theme manager

• Asset Manager

  • Assets modal with drag & drop uploads
  • Clean previews and intuitive management
  • Asset panel with drag and drop to canvas

• Device Manager

  • Preview content across devices (desktop, tablet, mobile)

• Topbar Commands

  • Common editor commands exposed via a clean top bar
  • Undo / redo, preview, canvas actions, and more

• Selector Manager

  • CSS selector management for selecting the state and adding classes

• Trait Manager

  • Edit component attributes and behaviors

• Style Manager

  • Intuitive style controls

• Symbols

  • Reusable components that share state and styling

• Canvas Spots

  • Quickly adjust padding and margin by dragging visual handles right on the canvas
    • Control visibility per component with showPaddingSpot and showMarginSpot properties
  • Smarter multi-column resizing that redistributes width across neighboring columns, preventing “jumping” and keeping layouts stable
    • For the best results enforce column dragging and default percent column widths.
  • Built-in badges and a top bar with context menus — all implemented as React components for easy styling and customization

---

• Built on Tailwind CSS
• Customize spacing, colors, typography, and layout easily
• Matches existing design systems with minimal effort
• Dark and light mode

---

Datasources are already implemented for:

• Creating data schemas
• Importing and managing data

The only missing piece is the official GrapesJS API required for:

• Dynamic components
• Runtime conditional logic integration

The conditional builder UI is already complete, including:

• Conditional rules
• Logical groups
• Future-ready bindings for dynamic components

Once the official API is available, datasource providers and conditions can be enabled with minimal changes.

---

• Google Fonts Integration
  • Built-in font loading and management

• Default Rich Text Editor (RTE)
  • Opinionated rich text editor to replace the default for enhanced text editing