Jedes GrapesJS Projekt beginnt gleich. Man montiert den Editor, zieht einen Block auf die Leinwand, und es funktioniert am ersten Nachmittag. Dieser Teil ist wirklich einfach – der Editor ist eine gute Software und tut, was er verspricht.
Dann beginnen die Fragen. Wo befinden sich Seiten? Wie bekommt ein zweiter Nutzer ein Konto? Was bedeutetPublisheigentlich? Was dientacme.cound woher stammt sein Zertifikat? Wohin gehen Formulareinreichungen? Vier Wochen später haben Sie keine einzige Funktion geschrieben, die einem Kunden auffallen würde, und Sie haben eine Anwendung entwickelt, die mit GrapesJSnichts zu tun hat.
Diese Anwendung ist das, was wir ausgebaut haben. PageKit ist eine Produktions- Next.js -App, die sich um den Open-Source- GrapesJS -Kern herum dreht: Authentifizierung, Arbeitsbereiche, Multi-Tenant-Projekte, Seitenspeicherung, eine Publishing-Pipeline, benutzerdefinierte Domains, Lead-Capture, Checkout und ein Plugin-Loader. Sie wird als Quellcode unter einer einmaligen Lizenz ausgeliefert, Sie hosten sie selbst und können jede Zeile davon ändern.
Es ist bei v0.1.0, Vorveröffentlichung, und die Warteliste ist bei Pagekit geöffnet.gjs.market.
Der Editor ist die einfache Hälfte
Wir sagen das immer wieder, weil es die ganze These des Produkts ist. Die meisten GrapesJS Integrationen, die man heute kaufen kann, enden dort, wo die interessante Arbeit beginnt: Ein Projekt, ein Nutzer, veröffentlichen bedeutet "Laden eine ZIP herunter", und Domains sind Ihr Problem.
Die Hälfte, die einen Monat dauert, ist Mieter. Ein Arbeitsbereich mit vielen Projekten, jedes mit eigenen Seiten, eigener Domain und eigenem Veröffentlichungszustand. Inhaber-, Redakteur- und Betrachterrollen mit E-Mail-Einladungen und einem Wächter, der verhindert, dass der letzte Besitzer degradiert wird. Ein Opt-in-Review-Gate, damit das Marketingteam eines Kunden bearbeiten kann, ohne veröffentlichen zu können. Wildcard-Subdomains über Middleware plus benutzerdefinierte Domains mit On-Demand-TLS, sodass ein neues Projekt über HTTPS ohne Deployment erreichbar ist.
Nichts davon ist GrapesJS Arbeit. All das ist Arbeit, ohne die du nicht verschiffen kannst.
Vier Dinge, die eine GrapesJS Integration brechen
Wenn du den Editor schon einmal integriert hast, hast du mindestens einen dieser Modelle getroffen. Sie sind der eigentliche Grund, warum ein Wochenendprototyp einen Monat braucht, um produktionsreif zu sein – und jeder einzelne hat die Architektur geprägt.
1. Der Projektzustand ist nicht der Export.getProjectData() Gibt zurück, was eine Bearbeitungssitzung wiederherstellt.getHtml() und produziert,getCss()was du publizierst. Speicherst du das falsche, schickst du entweder Editor-Scaffolding an Besucher oder gibst deinen Nutzern eine Seite, die sie nicht mehr bearbeiten können. PageKit verwaltet zwei separate Speicher: eine Projekt-Daten-Spalte für die Sitzung, eine Publikationszeile für das gerenderte Artefakt. Veröffentlichte Seiten werden vom zweiten Seiten bereitgestellt und berühren nie den Editor-Codepfad – weshalb das Editor-Bundle nie geladen wird.
2. Die Leinwand ist ein iframe. Schriftarten, CSS-Resets und jede Laufzeitbibliothek, die der gerenderte Inhalt benötigt, müssen in den Rahmen eingefügt werden. Das Hinzufügen auf die Host-Seite bewirkt überhaupt nichts, was sich als Styling-Fehler liest und an einem Nachmittag in der falschen Datei debuggt. Alles, was die Canvas braucht, läuft durch,canvas.stylesundcanvas.scripts das, was du beim Bearbeiten siehst, ist das, was das veröffentlichte Dokument tatsächlich lädt.
3. Das Component-Skript ist ein serialisierter String. Er wird innerhalb des Canvas-Frames ausgeführt und kann sich nicht über den umgebenden Scope schließen. Ein Skript, das auf ein importiertes Symbol referenziert, kontrolliert die Typisierung sauber und wirft zur Laufzeit – unsichtbar, bis ein Benutzer diese Komponente auf eine Seite zieht. Jede benutzerdefinierte Komponente in PageKit übergibt ihre Abhängigkeiten durch Script-Props, und die Regel wird im Review durchgesetzt, anstatt in der Produktion entdeckt zu werden.
4. Benutzerdefinierte Typen müssen registriert werden, bevor Inhalte geladen werden. Inhalte, die auf einen Typ verweisen, der noch nicht registriert ist, verschlechtert sich leise zu einfachen Elementen und verliert dauerhaft sein Verhalten für diese Sitzung. Es gibt keine Fehler; die Seite wird jedes Mal schlechter, wenn sie geöffnet wird. Der Plugin-Loader löst die Plugins eines Projekts auf und registriert sie,bevorder Ladepfad läuft, und lehnt versionsinkompatible Plugins lautstark ab, anstatt lautlos im Canvas zu versagen.
OSS-Kern
PageKit basiert aufgrapesjs0.23.5 – dem Open-Source-Kern. Dies ist eine Lizenzentscheidung, bevor es eine technische ist: Das kommerzielle Studio SDK trägt eine Lizenz pro Domain, die nicht an Sie weiterverteilt werden kann, was es in einem als Quellprodukt verkauften Produkt unbrauchbar macht.
Alles, was man von einer modernen Editor-Shell erwarten würde – durchsuchbare Blockpalette, Layerbaum, Style-Manager, Traits, Gerätewechsel, Autosave, bewacht durch einen optimistischen Versionstoken, sodass zwei Tabs sich nicht lautlos gegenseitig überschreiben können – basiert auf der Kern-API und liefert die erhaltene Quellcode. Der Editor bleibt eine Abhängigkeit und kein Fork, daher bleiben Upstream-Fixs upstream.
Was ist in der Kiste
Neun Bereiche, alle aufgebaut und durch Tests abgedeckt: die Editor-Shell; Veröffentlichen mit zwischengespeicherten Publikationen, Wildcard-Subdomains und benutzerdefinierten Domains; SEO-Pro-Seite mit OG-Bildgenerierung, Sitemap und Robotern; Formulare mit einem Feld-Builder im Trait-Panel, Honeypot plus optionalem Turnstile oder hCaptcha sowie einem Lead-Posteingang mit CSV-Export; Mikro-E-Commerce mit Produkten, Warenkorb und Checkout hinter einem Zahlungsadapter; der Plugin-Loader mit einem In-Admin- gjs.market -Browser; A/B-Tests und Popups; Teamrollen und Genehmigungen; White-Label-Branding mit einer Offline-Lizenzprüfung von Ed25519.
Speicher, E-Mail und Zahlungen befinden sich jeweils hinter einer Schnittstelle, mit vernünftigen Offline-Standardeinstellungen – lokalem Dateisystem, SMTP und einem Test-Zahlungsanbieter, der den vollständigen Zahlungsablauf auf einem Laptop ohne Konten und ohne Schlüssel ermöglicht. Tauschen Sie S3 ein, senden Sie es erneut oder poststempeln Sie ab, Stripe oder PayPal mit Bereitstellung von Zugangsdaten.
Die Repository-Zahlen, die Sie selbst mit der Quelle vergleichen können: 19 Editor-Blöcke in vier Kategorien, sechs benutzerdefinierte Komponententypen, 23 Datenbanktabellen über 11 Drizzle-Migrationen, 12 Playwright-End-to-End-Spezifikationen, 10 Einheitssuiten und null GPL-Abhängigkeiten unter 16 Laufzeitpaketen.
Deine Installation wird mit einem Katalog geliefert
Der Plugin-Loader ist ein erstklassiger Teil des Produkts, und der gjs.market Storefront ist im Administrator als Vollbild-Format eingebaut, nicht als Link in einem Fußer. Manifests sind Zod-validiert, mehrere Bereiche werden mit deinem installierten GrapesJS überprüft, bevor etwas registriert wird, undnpm run create-pluginein neues wird gescaffoldet. Eine Installation zu verlängern bedeutet nicht, sie zu forken.
Was ist noch nicht gebaut
Zwei Dinge, und wir würden es vorziehen, dass Sie das jetzt lesen, als es nach dem Kauf zu entdecken. Mehrsprachige Seiten – Varianten pro Standort und ein Sprachwechselblock – sind entworfen, aber nicht geschrieben; es gibt heute keinen i18n-Code im Repository. KI-Kopiererstellung gegen den eigenen Schlüssel ist ebenfalls nicht geschrieben, und im aktuellen Quellcode gibt es keine KI-Abhängigkeit. Beides steht auf der öffentlichen Roadmap.
Alles andere oben genannte ist gebaut und wird getestet.
Laufen
Node.js 20+, PostgreSQL 16 und entweder ein VPS mit Docker (docker compose upbringt Postgres, die App und den Caddy) oder Vercel mit verwaltetem Postgres. Etwa 1 GB RAM für den Docker-Pfad und ein Wildcard-DNS-Eintrag für Subdomain-Routing. Shared Hosting funktioniert nicht – Next.js braucht eine Node-Laufzeit, und das sagen wir lieber hier, als Ihnen eine Rückerstattung zu verkaufen.
Lizenzierung und Early Access
Einmal, pro Stufe: Entwickler 199 $ für ein einzelnes Produktionsprojekt, Agentur 449 $ für bis zu zehn Kundenprojekte mit White-Label-Admin-Branding, SaaS / Unlimited 899 $, um Ihr eigenes gehostetes Produkt zu betreiben und Endnutzern Gebühren zu berechnen. Zwölf Monate Updates sind in jeder Stufe enthalten; erneuern Sie danach zu 40 % des Lizenzpreises pro Jahr. Da Sie selbst hosten, aktualisieren Sie nach Ihrem eigenen Zeitplan – Updates werden nie zwangsweise auf eine laufende Installation angewendet.
Die Lizenzprüfung überprüft ein mit Ed25519 signiertes Token offline mit einer langen Schonfrist. Wenn unser Lizenzserver komplett verschwindet, ist das Schlimmste, was passiert, eine Abweisungsbenachrichtigung im Admin-Panel. Er blockiert das Dashboard nie und berührt nie eine veröffentlichte Seite.
Early Bird: Die ersten 20 Käufer bekommen die Agentur-Stufe zum Entwicklerpreis, mit lebenslangen Updates.
Die Warteliste ist jetzt auf Pagekit geöffnet.gjs.market – eine E-Mail zum Start, der Early-Bird-Bonus und die Roadmap. Nichts weiter.