Schneller in die Produktion gehen: Was gibt es Neues bei GrapesJS Shadcn

Laden Sie Ihren Page Builder auf! GrapesJS Shadcn fügt Live-Drag-Vorschauen, Rich Text / Befehle, dynamische Daten und Canvas-Presets zur schnelleren Aussendung an die Produktion hinzu.

Blocomposer
Blocomposer
Jun 11, 202621 days ago
5 Min-Lesezeit1,058-Ansichten
Einen visuellen Seiten-Builder zu bauen kann Sie dazu bringen, wochenlang die Editor-UI zu pixelpushen, anstatt Ihr Kernprodukt zu verfeinern. GrapesJS übernimmt die schwere Arbeit unter der Motorhaube, und unsere GrapesJS Shadcn-Verpackung sorgt direkt aus der Verpackung für diesen polierten, professionellen Look.
Unsere neueste Version konzentriert sich vollständig darauf, Entwicklungsreibungen zu beseitigen, die Benutzererfahrung zu optimieren und den Editor mit leistungsstarken, datengetriebenen Funktionen zu füllen. Hier ist eine Aufschlüsselung der Neuigkeiten.

Für Produktionsgeschwindigkeit gebaut

Wir haben verschiedene Fehlerbehebungen und UI/UX-Verbesserungen im gesamten Arbeitsbereich implementiert, um einen nahtlosen Arbeitsablauf zu gewährleisten.

Diese Veröffentlichung konzentriert sich laserfokussiert auf ein Hauptziel: die Nutzer schnell in die Produktion zu bringen. Anstatt Sie mit einem unbeschriebenen Blatt zu verlassen, haben wir sinnvolle Presets und UI-Layout-Muster eingebaut, von denen wir festgestellt haben, dass sie die reale Benutzererfahrung über Jahre mit Vorlagenbasierten Editoren verbessern.

Intelligente Textbearbeitung und Mathematikformeln

Der Rich Text Editor (RTE) erhielt zwei massive funktionale Verbesserungen:

KaTeX-Integration: 

Man kann jetzt komplexe mathematische Formeln direkt auf der Leinwand mit der KaTeX-Syntax nativ rendern und bearbeiten.

Katex formulasVariablen-Einfügen-Befehl: 

Das Tippen / im Texteditor öffnet ein Befehlsmenü, mit dem man schnell dynamische Variablen aus verbundenen Datenquellen einfügen kann.

Text variable

Dynamische Datenquellen und Selektor-Korrekturen

Die Verbindung von Design mit Daten ist heute viel robuster:

  • Selektorstabilität: Wir haben Altprobleme im Zusammenhang mit der Umbenennung von CSS-Selektoren behoben und sicherstellen, dass Ihr Designsystem bei Layoutänderungen nicht kaputtgeht.

  • Datengebundene Eigenschaften: Traits und Styles können nun direkt mit Datenquellenwerten verknüpft werden. Du kannst Komponentenattribute (wie eine Bild-URL oder Textausrichtung) dynamisch basierend auf dem aktiven Datensatz zuordnen.
    Data bound properties

Komponentenziehen & benutzerdefinierte Blöcke

Wir haben komplett neu gestaltet, wie Blöcke mit der Leinwand interagieren:

  • Vernünftige Zahlungsausfall: Neue benutzerdefinierte Standardblöcke sind mit vorhersehbaren leeren Zuständen, vorkonfigurierten Eigenschaften und den meisten relevanten Stileigenschaften ausgestattet.

  • Visuelle Drag-Vorschauen: Kein blindes Schleppen mehr. Wenn du eine Komponente vom Seitenpanel auf die Leinwand ziehst, siehst du eine Live-Vorschau des Elements genau dort, wo es landen wird.

Erweiterte Diagramme, Tabellen und benutzerdefinierte Auswahlen

Um die tiefere Fähigkeiten unseres Frameworks zu demonstrieren, haben wir zwei Hauptkomponenten eingeführt, die auf benutzerdefinierten Canvas-Spots und -Eigenschaften basieren:


Die Chart-Komponente: 

Plotte die Daten visuell direkt im Seitenlayout.

Charts

Die Tabellenkomponente: 

Baue mühelos strukturierte Zeilen und Spalten.

Table component

  • Optionen-Merkmal-UI auswählen: Wir haben eine schlanke, individuelle Trait-Benutzeroberfläche speziell zur Konfiguration ausgewählter Optionen eingeführt, wodurch lange Listen von Dropdown-Eigenschaften einfach zu verwalten sind.

Blitzschnelles Gebäude mit Leinwandflecken

Wir wollen wiederholende Drag-and-Drop-Aktionen minimieren. Dieses Update führt kontextuelle Leinwand-Spots ein, mit denen man vor oder nach einem ausgewählten Element sofort Komponenten hinzufügen kann.

Außerdem haben wir Spalten optimiert: Wenn ein Spaltenlayout leer ist, können Sie mit einem einzigen Klick Kindkomponenten hinzufügen, ohne Ziehen erforderlich. Größenverstellbare Komponenten zeigen jetzt auch exakte Live-Dimensionen an, wenn du sie skalierst, was dir sofortiges räumliches Bewusstsein verschafft.

Canvas spots

Visuelle Politur & Bessere Ikonen

Schließlich haben wir die Benutzeroberfläche durchgearbeitet, um Icon-Assets zu standardisieren und zu verbessern. Das Layout wirkt schärfer, die Aktionen sind intuitiver, und das visuelle Feedback passt perfekt zu den modernen UI-Erwartungen.

Bereit, es auszuprobieren? Hier empfangen Sie die neueste Version

Veröffentlicht Jun 11, 2026
Jul 3, 2026 aktualisiert
🔌 GJS.Market

Suchen Sie nach GrapesJS-Plugins?

Über 100 kuratierte Plugins, Presets und Vorlagen – sorgfältig auf Qualität ausgewählt und von der Community gepflegt.

Teilen Sie diesen BeitragTwitterFacebookLinkedIn
Veröffentlicht über
Blocomposer
Blocomposer
Besuchen Sie Shop →

Mehr von Blocomposer

Entdecken Sie weitere aufschlussreiche Beiträge und bleiben Sie mit den neuesten Inhalten auf dem Laufenden.

Alle Beiträge ansehen

Premium-Plugins von Blocomposer

Handverlesente, bezahlte Ergänzungen dieses Schöpfers erstellt.

Besuchen Sie Shop →