Cos'è Lumora?
Lumora è un costruttore di siti web visivo pronto per essere lanciato come il tuo SaaS. I tuoi utenti costruiscono pagine Bootstrap 5 trascinando sezioni, le modificano in tempo reale (anche nel codice) e le pubblicano con un clic sul loro sottodominio o dominio. Include account, team, piani a pagamento Stripe, un pannello di amministrazione e distribuzione Docker.
Non è un kit UI: ogni schermata negli screenshot è supportata dall'API, un database Postgres con migrazioni versionate e test automatizzati. Il video e le immagini della galleria animata lo mostrano in azione.
01. Costruttore visivo
- Trascina e rilascia dal pannello dei componenti (mouse e touch): più di 60 componenti e sezioni Bootstrap 5.
- Modifica del testo in linea con un doppio clic.
- Pannello delle proprietà: testo, classi, tipografia, spaziatura, colori, bordi, ombre e attributi.
- Annulla/ripeti (fino a 100 passaggi), duplica, sposta, albero dei livelli e breadcrumb.
- "I miei blocchi": salva una sezione e riutilizzala in uno qualsiasi dei progetti del team.
02. Stili di pagina con un clic
Il pannello degli stili di pagina ristila l'intera pagina in una volta: 8 stili pronti, una palette di marca con un controllo di leggibilità (AA/AAA), Google Fonts e arrotondamento degli angoli, con un'anteprima dal vivo. Viene salvato all'interno del progetto ed esportato con esso.
03. Editor di codice in tempo reale
Un pannello inferiore con CodeMirror 6 per HTML, CSS e JS, con sincronizzazione bidirezionale: ciò che digiti viene applicato alla tela, e ciò che fai sulla tela appare nel codice istantaneamente. Il CSS personalizzato viene applicato in tempo reale e viaggia con l'esportazione.
04. Modelli
8 modelli di partenza: SaaS, agenzia, caffè, fotografia, blog, studio di yoga, evento e negozio. Vengono generati da uno script, quindi puoi aggiungere i tuoi.
05. Design responsivo e modalità scura
Controlla ogni pagina su desktop, tablet e mobile senza lasciare l'editor. L'intera interfaccia (editor, pannelli, dialoghi e pagine legali) ha modalità chiare e scure, o segue l'impostazione di sistema.
06. Pubblicazione e siti
- Pubblica su
https://<nome>.yoursites.com con un clic, con cronologia delle versioni (5, 20 o 50 a seconda del piano) e ripristino. - SEO per sito (descrizione, immagine sociale, favicon, lingua, noindex),
robots.txt e sitemap.xml. - Link di anteprima privati di 7 giorni per mostrare una bozza a un cliente.
- Domini personalizzati con verifica DNS e HTTPS automatico tramite Caddy.
- I moduli sui siti pubblicati ricevono invii (anti-spam, quota per piano, notifica via email ed esportazione CSV).
- Statistiche di visita senza cookie o dati personali.
07. Team e collaborazione
- Team con ruoli (proprietario, amministratore, editor, visualizzatore) e inviti via email.
- Commenti sugli elementi, con risposte e risoluzione.
- Salvataggio automatico con controllo della concorrenza tra schede e membri, una bozza locale anti-perdita e un cestino di 30 giorni.
- Registro delle attività del team.
08. Account e sicurezza di accesso
Registrazione con verifica email, recupero password, verifica in due passaggi (TOTP + codici di recupero), accesso opzionale con Google o GitHub, ed esportazione e cancellazione dei dati dell'account (GDPR). I nuovi account ricevono una guida per iniziare che avanza da sola.
09. Piani e fatturazione Stripe
Piani Free, Pro e Team per workspace, con limiti applicati sul server. Integra Stripe Checkout, il Portale Clienti e webhook firmati e idempotenti. In fase di sviluppo, il pagamento è simulato senza uscire dall'app. Il catalogo dei piani e dei prezzi vive in un unico file (shared/src/plans.ts); senza fatturazione (BILLING_DRIVER=none) funziona come uno strumento interno.
10. Amministrazione
Un pannello della piattaforma per il primo utente registrato: statistiche, ricerca utenti e workspace, sospensione dell'account e del sito, gestione dei report e un registro globale delle attività.
11. Esportazione
HTML in un unico file, ZIP (index.html + CSS + JS), ZIP con Bootstrap locale per uso offline, e un progetto .json reimportabile.
12. Sicurezza e operazioni
- Cookie di sessione HttpOnly, password scrypt, limitazione della velocità, validazione zod e controllo dell'origine contro CSRF.
- Un CSP di produzione che blocca script inline e di terze parti; il canvas sanitizza l'HTML, e i siti pubblicati sono serviti sul proprio dominio, separato da quello dell'app.
- Le immagini caricate vengono ricodificate con sharp (senza metadati EXIF o GPS).
- Docker + Compose (app, Postgres 16, MinIO, Caddy, backup),
/healthz, /readyz, metriche Prometheus, log JSON e Sentry opzionale.
13. Qualità
Più di 250 test unitari (Vitest, anche contro un vero Postgres), 22 suite end-to-end e di accessibilità (Playwright + axe), controllo dei tipi rigoroso e lint. Verificato con un'installazione pulita dal ZIP (npm ci, build, controllo dei tipi, test e lint).
Requisiti
- Node.js 20 o successivo e npm 10.
- Sviluppo: non è necessaria l'installazione di Postgres (utilizza Postgres incorporato tramite PGlite).
- Produzione: Postgres 16 (gestito o quello in
compose.yml), un dominio per l'app e un altro con DNS wildcard per i siti pubblicati. - Opzionale, con le proprie chiavi: Stripe, SMTP o Resend per email, archiviazione S3/R2, Google/GitHub OAuth e Sentry.
Buono a sapersi
- L'interfaccia, il codice e le email sono in inglese.
- Le pagine dei termini e della privacy sono bozze: fai rivedere professionalmente prima di aprire il servizio.
- Le immagini del template vengono caricate dal CDN di Unsplash (Licenza Unsplash) e non sono incluse nel pacchetto.
- Nessuna chiave o credenziale è inclusa: impostale in
.env basandoti su .env.example. - Le licenze dei componenti di terze parti (MIT, Apache-2.0 e simili) sono elencate in
THIRD-PARTY-NOTICES.md. - Gli screenshot, le animazioni e il video sono stati realizzati con l'app reale e dati demo inventati.
−33%
