GrapesJS Shadcn

grapesjs-shadcn ist ein modernes GrapesJS-Preset, das mit React, @grapesjs/React und Shadcn/UI entwickelt wurde, um dir ein sauberes, komposierbares und entwicklerfreundliches Schnitterlebnis direkt aus der Box zu bieten.

Es konzentriert sich auf eine ausgefeilte Benutzeroberfläche, sinnvolle Standardeinstellungen und Erweiterbarkeit für fortgeschrittene Seiten-, E-Mail- und Dokumenten-Builder-Workflows.

Das Preset wird mit einem vollständig verkabelten GrapesJS-Editor und einer verfeinerten UI-Schicht ausgeliefert, die mit Shadcn/UI und Tailwind CSS aufgebaut ist.

• Blockmanager

  • Wunderschönes, modernes Blockpanel
  • Eingebaute Suche für schnelle Blockerkennung
  • Saubere Gruppierung und skalierbares Layout

• Layers Manager

  • Voll ausgestatteter Layer-Manager
  • Klare visuelle Hierarchie
  • Geschmeidige Auswahl und Umsortierungserfahrung

• Seitenmanager

  • Seiten erstellen, umbenennen und duplizieren
  • Entwickelt für mehrseitige Workflows

• Themenmanager

  • Konfigurierbarer Themenmanager

• Vermögensverwalter

  • Assets-Modal mit Drag-&-Drop-Uploads
  • Saubere Vorschauen und intuitive Verwaltung
  • Asset-Panel mit Drag & Drop auf die Leinwand

• Gerätemanager

  • Inhalte auf verschiedenen Geräten (Desktop, Tablet, Mobil) vorschauen

• Topbar-Befehle

  • Gängige Editor-Befehle, die über eine saubere obere Leiste angezeigt werden
  • Rückgängig machen, Vorschau, Canvas-Aktionen und mehr

• Selector Manager

  • CSS-Selektorverwaltung zur Auswahl des Zustands und Hinzufügen von Klassen

• Trait Manager

  • Komponente Attribute und Verhalten bearbeiten

• Style Manager

  • Intuitive Steuerung

• Symbole

  • Wiederverwendbare Komponenten, die Zustand und Design teilen

• Canvas-Spots

• Passe schnell das Auffüllen und den Rand an, indem du visuelle Griffe direkt auf der Leinwand ziehst
  • Kontrolltransparenz pro Bauteil mit showPaddingSpot und showMarginSpot Eigenschaften
• Intelligentere mehrspaltige Größenanpassung, die die Breite auf benachbarte Spalten verteilt, "Springen" verhindert und die Layouts stabil hält
  • Für die besten Ergebnisse erzwingen Sie das Ziehen der Spalten und setzen Sie die prozentualen Spaltenbreiten standardmäßig durch.
• Eingebaute Abzeichen und eine obere Leiste mit Kontextmenüs – alles als React-Komponenten für einfaches Design und Anpassen implementiert
  
  

• Standard-Rich-Text-Editor (RTE)
• Meinungsbasierter Rich-Text-Editor zum Ersatz des Standard-Editors für erweiterte Textbearbeitung 
• Gebaut auf Prosemirror mit benutzerdefinierter Benutzeroberfläche unter Verwendung von React 

• Datenquellen 
• Erstellung von Datenschemata 
• Datenimportierung und -verwaltung 
• Dynamische Variablen 
• Laufzeit-bedingte Logikintegration 
• Laufzeit-Sammlungen
  

• Gebaut auf Tailwind CSS
• Passe Abstände, Farben, Typografie und Layout einfach an
• Entspricht bestehenden Designsystemen mit minimalem Aufwand
• Dunkel- und Hellmodus