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
  
  

• Default Rich Text Editor (RTE)
• Opinionated rich text editor to replace the default for enhanced text editing 
• Built on prosemirror with custom UI using react 

• Datasources 
• Creating data schemas 
• Importing and managing data 
• Dynamic variables 
• Runtime conditional logic integration 
• Runtime collections
  

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