Qu'est-ce que Lumora ?
Lumora est un constructeur de sites web visuel prêt à être lancé en tant que votre propre SaaS. Vos utilisateurs construisent des pages Bootstrap 5 en faisant glisser des sections, les modifient en direct (dans le code aussi) et les publient en un clic sur leur propre sous-domaine ou domaine. Il est livré avec des comptes, des équipes, des plans payants Stripe, un panneau d'administration et un déploiement Docker.
Ce n'est pas un kit UI : chaque écran dans les captures d'écran est soutenu par l'API, une base de données Postgres avec des migrations versionnées et des tests automatisés. La vidéo et les images de la galerie animée le montrent en action.
01. Constructeur visuel
- Glissez-déposez depuis le panneau de composants (souris et tactile) : plus de 60 composants et sections Bootstrap 5.
- Édition de texte en ligne avec un double clic.
- Panneau des propriétés : texte, classes, typographie, espacement, couleurs, bordures, ombres et attributs.
- Annuler/rétablir (jusqu'à 100 étapes), dupliquer, déplacer, arbre de calques et fil d'Ariane.
- "Mes blocs" : enregistrez une section et réutilisez-la dans n'importe quel projet de l'équipe.
02. Styles de page en un clic
Le panneau de style de page redéfinit toute la page d'un coup : 8 styles prêts à l'emploi, une palette de marque avec un contrôle de lisibilité (AA/AAA), Google Fonts et arrondi des coins, avec un aperçu en direct. Il est enregistré dans le projet et exporté avec celui-ci.
03. Éditeur de code en temps réel
Un panneau inférieur avec CodeMirror 6 pour HTML, CSS et JS, avec synchronisation bidirectionnelle : ce que vous tapez est appliqué au canevas, et ce que vous faites sur le canevas apparaît instantanément dans le code. Le CSS personnalisé est appliqué en direct et voyage avec l'exportation.
04. Modèles
8 modèles de démarrage : SaaS, agence, café, photographie, blog, studio de yoga, événement et boutique. Ils sont générés à partir d'un script, vous pouvez donc ajouter les vôtres.
05. Design réactif et mode sombre
Vérifiez chaque page sur bureau, tablette et mobile sans quitter l'éditeur. L'ensemble de l'interface (éditeur, panneaux, dialogues et pages légales) a des modes clair et sombre, ou suit le paramètre système.
06. Publication et sites
- Publiez sur
https://<nom>.yoursites.com en un clic, avec historique des versions (5, 20 ou 50 selon le plan) et restauration. - SEO par site (description, image sociale, favicon, langue, noindex),
robots.txt et sitemap.xml. - Liens de prévisualisation privés de 7 jours pour montrer un brouillon à un client.
- Domaines personnalisés avec vérification DNS et HTTPS automatique via Caddy.
- Les formulaires sur les sites publiés reçoivent des soumissions (anti-spam, quota par plan, notification par e-mail et export CSV).
- Statistiques de visite sans cookies ni données personnelles.
07. Équipes et collaboration
- Équipes avec rôles (propriétaire, administrateur, éditeur, spectateur) et invitations par e-mail.
- Commentaires sur les éléments, avec réponses et résolutions.
- Sauvegarde automatique avec contrôle de concurrence entre les onglets et les membres, un brouillon local anti-perte et une corbeille de 30 jours.
- Journal d'activité de l'équipe.
08. Comptes et sécurité de connexion
Inscription avec vérification par e-mail, récupération de mot de passe, vérification en deux étapes (TOTP + codes de récupération), connexion optionnelle avec Google ou GitHub, et exportation et suppression des données du compte (RGPD). Les nouveaux comptes reçoivent un guide de démarrage qui avance de lui-même.
09. Plans et facturation Stripe
Plans gratuits, Pro et Équipe par espace de travail, avec des limites appliquées sur le serveur. Intègre Stripe Checkout, le Portail Client et des webhooks signés et idempotents. En développement, le paiement est simulé sans quitter l'application. Le catalogue des plans et des prix se trouve dans un seul fichier (shared/src/plans.ts); sans facturation (BILLING_DRIVER=none), il fonctionne comme un outil interne.
10. Administration
Un panneau de plateforme pour le premier utilisateur enregistré : chiffres, recherche d'utilisateur et d'espace de travail, suspension de compte et de site, gestion des rapports et un journal d'activité global.
11. Exportation
HTML en un seul fichier, ZIP (index.html + CSS + JS), ZIP avec Bootstrap local pour une utilisation hors ligne, et un projet .json réimportable.
12. Sécurité et opérations
- Cookies de session HttpOnly, mots de passe scrypt, limitation de débit, validation zod et vérification d'origine contre CSRF.
- Un CSP de production qui bloque les scripts en ligne et tiers ; le canvas assainit le HTML, et les sites publiés sont servis sur leur propre domaine, séparé de celui de l'application.
- Les images téléchargées sont ré-encodées avec sharp (sans métadonnées EXIF ou GPS).
- Docker + Compose (application, Postgres 16, MinIO, Caddy, sauvegardes),
/healthz, /readyz, métriques Prometheus, journaux JSON et Sentry optionnel.
13. Qualité
Plus de 250 tests unitaires (Vitest, également contre un vrai Postgres), 22 suites de tests de bout en bout et d'accessibilité (Playwright + axe), vérification stricte des types et lint. Vérifié avec une installation propre à partir du ZIP (npm ci, construction, vérification des types, tests et lint).
Exigences
- Node.js 20 ou ultérieur et npm 10.
- Développement : aucune installation de Postgres nécessaire (il utilise Postgres intégré via PGlite).
- Production : Postgres 16 (géré ou celui dans
compose.yml), un domaine pour l'application et un autre avec DNS wildcard pour les sites publiés. - Optionnel, avec vos propres clés : Stripe, SMTP ou Resend pour les e-mails, stockage S3/R2, Google/GitHub OAuth et Sentry.
Bon à savoir
- L'interface, le code et les e-mails sont en anglais.
- Les pages de conditions et de confidentialité sont des brouillons : faites-les examiner par un professionnel avant d'ouvrir le service.
- Les images de modèle se chargent depuis le CDN Unsplash (Licence Unsplash) et ne sont pas incluses dans le package.
- Aucune clé ou identifiant n'est inclus : définissez-les dans
.env en fonction de .env.example. - Les licences des composants tiers (MIT, Apache-2.0 et similaires) sont listées dans
THIRD-PARTY-NOTICES.md. - Les captures d'écran, animations et vidéos ont été réalisées avec l'application réelle et des données de démonstration fictives.
−33%
