Was ist Lumora?
Lumora ist ein visueller Website-Builder, der bereit ist, als Ihr eigenes SaaS gestartet zu werden. Ihre Benutzer erstellen Bootstrap 5-Seiten, indem sie Abschnitte per Drag & Drop einfügen, bearbeiten sie live (auch im Code) und veröffentlichen sie mit einem Klick auf ihrer eigenen Subdomain oder Domain. Es wird mit Konten, Teams, Stripe-Bezahlplänen, einem Admin-Panel und Docker-Bereitstellung geliefert.
Es ist kein UI-Kit: Jeder Bildschirm in den Screenshots wird von der API unterstützt, einer Postgres-Datenbank mit versionierten Migrationen und automatisierten Tests. Das Video und die animierten Galerie-Bilder zeigen es in Aktion.
01. Visueller Builder
- Drag & Drop aus dem Komponenten-Panel (Maus und Touch): mehr als 60 Bootstrap 5-Komponenten und Abschnitte.
- Inline-Textbearbeitung mit einem Doppelklick.
- Eigenschaften-Panel: Text, Klassen, Typografie, Abstände, Farben, Ränder, Schatten und Attribute.
- Rückgängig/Wiederherstellen (bis zu 100 Schritte), duplizieren, verschieben, Ebenenbaum und Breadcrumb.
- "Meine Blöcke": Speichern Sie einen Abschnitt und verwenden Sie ihn in jedem der Projekte des Teams erneut.
02. Ein-Klick-Seitenstile
Das Seitenstil-Panel gestaltet die gesamte Seite auf einmal um: 8 fertige Stile, eine Markenpalette mit Lesbarkeitsprüfung (AA/AAA), Google Fonts und Eckenabrundung, mit einer Live-Vorschau. Es wird im Projekt gespeichert und mit ihm exportiert.
03. Echtzeit-Code-Editor
Ein unteres Panel mit CodeMirror 6 für HTML, CSS und JS, mit bidirektionaler Synchronisation: Was Sie eingeben, wird auf die Leinwand angewendet, und was Sie auf der Leinwand tun, wird sofort im Code angezeigt. Benutzerdefiniertes CSS wird live angewendet und reist mit dem Export.
04. Vorlagen
8 Starter-Vorlagen: SaaS, Agentur, Café, Fotografie, Blog, Yogastudio, Veranstaltung und Shop. Sie werden aus einem Skript generiert, sodass Sie Ihre eigenen hinzufügen können.
05. Responsives Design und Dunkelmodus
Überprüfen Sie jede Seite auf Desktop, Tablet und Mobilgerät, ohne den Editor zu verlassen. Die gesamte Benutzeroberfläche (Editor, Panels, Dialoge und rechtliche Seiten) hat helle und dunkle Modi oder folgt der Systemeinstellung.
06. Veröffentlichung und Websites
- Veröffentlichen Sie auf
https://<name>.yoursites.com mit einem Klick, mit Versionshistorie (5, 20 oder 50 je nach Plan) und Wiederherstellung. - Pro-Website-SEO (Beschreibung, Social Image, Favicon, Sprache, noindex),
robots.txt und sitemap.xml. - Private 7-tägige Vorschau-Links, um einem Kunden einen Entwurf zu zeigen.
- Benutzerdefinierte Domains mit DNS-Überprüfung und automatischem HTTPS über Caddy.
- Formulare auf veröffentlichten Websites erhalten Einsendungen (Anti-Spam, pro Plan Kontingent, E-Mail-Benachrichtigung und CSV-Export).
- Besuchsstatistiken ohne Cookies oder persönliche Daten.
07. Teams und Zusammenarbeit
- Teams mit Rollen (Besitzer, Admin, Editor, Betrachter) und E-Mail-Einladungen.
- Kommentare zu Elementen, mit Antworten und Auflösungen.
- Automatisches Speichern mit gleichzeitiger Kontrolle über Tabs und Mitglieder, ein Anti-Verlust-Lokaldraft und ein 30-tägiger Papierkorb.
- Aktivitätsprotokoll des Teams.
08. Konten und Anmeldesicherheit
Registrierung mit E-Mail-Verifizierung, Passwort-Wiederherstellung, Zwei-Faktor-Authentifizierung (TOTP + Wiederherstellungscodes), optionale Anmeldung mit Google oder GitHub sowie Export und Löschung von Kontodaten (DSGVO). Neue Konten erhalten einen Leitfaden zum Einstieg, der sich von selbst weiterentwickelt.
09. Pläne und Stripe-Abrechnung
Kostenlose, Pro- und Teampläne pro Arbeitsbereich, mit auf dem Server durchgesetzten Grenzen. Integriert Stripe Checkout, das Kundenportal und signierte, idempotente Webhooks. In der Entwicklung wird die Zahlung simuliert, ohne die App zu verlassen. Der Plan- und Preiskatalog befindet sich in einer einzigen Datei (shared/src/plans.ts); ohne Abrechnung (BILLING_DRIVER=none) funktioniert es als internes Tool.
10. Verwaltung
Ein Plattformpanel für den ersten registrierten Benutzer: Statistiken, Benutzer- und Arbeitsbereichsuche, Konto- und Standortsperrung, Berichtserstellung und ein globales Aktivitätsprotokoll.
11. Export
Einzeldatei HTML, ZIP (index.html + CSS + JS), ZIP mit lokalem Bootstrap für die Offline-Nutzung und ein wieder importierbares .json Projekt.
12. Sicherheit und Betrieb
- HttpOnly-Sitzungscookies, scrypt-Passwörter, Ratenbegrenzung, zod-Validierung und eine Herkunftsprüfung gegen CSRF.
- Eine Produktions-CSP, die Inline- und Drittanbieter-Skripte blockiert; das Canvas bereinigt HTML, und veröffentlichte Seiten werden unter ihrer eigenen Domain bereitgestellt, getrennt von der App.
- Hochgeladene Bilder werden mit sharp neu kodiert (keine EXIF- oder GPS-Metadaten).
- Docker + Compose (App, Postgres 16, MinIO, Caddy, Backups),
/healthz, /readyz, Prometheus-Metriken, JSON-Protokolle und optional Sentry.
13. Qualität
Mehr als 250 Unit-Tests (Vitest, auch gegen ein echtes Postgres), 22 End-to-End- und Zugänglichkeitssuiten (Playwright + axe), strenge Typprüfung und Lint. Verifiziert mit einer sauberen Installation aus der ZIP (npm ci, Build, Typprüfung, Tests und Lint).
Anforderungen
- Node.js 20 oder höher und npm 10.
- Entwicklung: keine Postgres-Installation erforderlich (es verwendet eingebettetes Postgres über PGlite).
- Produktion: Postgres 16 (verwaltet oder das in
compose.yml), eine Domain für die App und eine andere mit Wildcard-DNS für veröffentlichte Seiten. - Optional, mit Ihren eigenen Schlüsseln: Stripe, SMTP oder Resend für E-Mail, S3/R2-Speicher, Google/GitHub OAuth und Sentry.
Gut zu wissen
- Die Benutzeroberfläche, der Code und die E-Mails sind in Englisch.
- Die Bedingungen und Datenschutzseiten sind Entwürfe: Lassen Sie sie von einem Fachmann überprüfen, bevor Sie den Dienst eröffnen.
- Vorlagenbilder werden vom Unsplash CDN geladen (Unsplash-Lizenz) und sind nicht im Paket enthalten.
- Keine Schlüssel oder Anmeldeinformationen sind enthalten: Setzen Sie sie in
.env basierend auf .env.example. - Lizenzen von Drittanbieterkomponenten (MIT, Apache-2.0 und ähnliche) sind in
THIRD-PARTY-NOTICES.md aufgeführt. - Die Screenshots, Animationen und Videos wurden mit der echten App und erfundenen Demodaten erstellt.
−33%
