O que é Lumora?
Lumora é um construtor de sites visual pronto para ser lançado como seu próprio SaaS. Seus usuários constroem páginas Bootstrap 5 arrastando seções, editam-nas ao vivo (também em código) e as publicam com um clique em seu próprio subdomínio ou domínio. Ele vem com contas, equipes, planos pagos do Stripe, um painel de administração e implantação via Docker.
Não é um kit de UI: cada tela nas capturas de tela é suportada pela API, um banco de dados Postgres com migrações versionadas e testes automatizados. O vídeo e as imagens da galeria animada mostram isso em ação.
01. Construtor visual
- Arraste e solte do painel de componentes (mouse e toque): mais de 60 componentes e seções do Bootstrap 5.
- Edição de texto inline com um duplo clique.
- Painel de propriedades: texto, classes, tipografia, espaçamento, cores, bordas, sombras e atributos.
- Desfazer/refazer (até 100 etapas), duplicar, mover, árvore de camadas e trilha de navegação.
- "Meus blocos": salve uma seção e reutilize-a em qualquer um dos projetos da equipe.
02. Estilos de página com um clique
O painel de estilo da página reestiliza toda a página de uma vez: 8 estilos prontos, uma paleta de marca com verificação de legibilidade (AA/AAA), Google Fonts e arredondamento de cantos, com uma prévia ao vivo. Ele é salvo dentro do projeto e exportado com ele.
03. Editor de código em tempo real
Um painel inferior com CodeMirror 6 para HTML, CSS e JS, com sincronização bidirecional: o que você digita é aplicado ao canvas, e o que você faz no canvas aparece no código instantaneamente. CSS personalizado é aplicado ao vivo e viaja com a exportação.
04. Modelos
8 modelos iniciais: SaaS, agência, café, fotografia, blog, estúdio de yoga, evento e loja. Eles são gerados a partir de um script, então você pode adicionar os seus próprios.
05. Design responsivo e modo escuro
Verifique cada página em desktop, tablet e celular sem sair do editor. Toda a interface (editor, painéis, diálogos e páginas legais) tem modos claro e escuro, ou segue a configuração do sistema.
06. Publicação e sites
- Publique em
https://<nome>.yoursites.com com um clique, com histórico de versões (5, 20 ou 50 dependendo do plano) e restauração. - SEO por site (descrição, imagem social, favicon, idioma, noindex),
robots.txt e sitemap.xml. - Links de visualização privada de 7 dias para mostrar um rascunho a um cliente.
- Domínios personalizados com verificação de DNS e HTTPS automático via Caddy.
- Formulários em sites publicados recebem envios (anti-spam, cota por plano, notificação por e-mail e exportação CSV).
- Estatísticas de visitas sem cookies ou dados pessoais.
07. Equipes e colaboração
- Equipes com funções (proprietário, administrador, editor, visualizador) e convites por e-mail.
- Comentários em elementos, com respostas e resolução.
- Autosave com controle de concorrência entre abas e membros, um rascunho local anti-perda e uma lixeira de 30 dias.
- Registro de atividade da equipe.
08. Contas e segurança de login
Cadastro com verificação de e-mail, recuperação de senha, verificação em duas etapas (TOTP + códigos de recuperação), login opcional com Google ou GitHub, e exportação e exclusão de dados da conta (GDPR). Novas contas recebem um guia de início rápido que avança por conta própria.
09. Planos e cobrança do Stripe
Planos Free, Pro e Team por espaço de trabalho, com limites aplicados no servidor. Integra o Stripe Checkout, o Portal do Cliente e webhooks assinados e idempotentes. Em desenvolvimento, o pagamento é simulado sem sair do aplicativo. O catálogo de planos e preços vive em um único arquivo (shared/src/plans.ts); sem cobrança (BILLING_DRIVER=none) funciona como uma ferramenta interna.
10. Administração
Um painel de plataforma para o primeiro usuário registrado: figuras, busca de usuários e espaços de trabalho, suspensão de conta e site, manuseio de relatórios e um log de atividade global.
11. Exportação
HTML de arquivo único, ZIP (index.html + CSS + JS), ZIP com Bootstrap local para uso offline e um projeto .json reimportável.
12. Segurança e operações
- Cookies de sessão HttpOnly, senhas scrypt, limitação de taxa, validação zod e uma verificação de origem contra CSRF.
- Um CSP de produção que bloqueia scripts inline e de terceiros; o canvas sanitiza HTML, e os sites publicados são servidos em seu próprio domínio, separado do aplicativo.
- Imagens enviadas são reencodificadas com sharp (sem metadados EXIF ou GPS).
- Docker + Compose (aplicativo, Postgres 16, MinIO, Caddy, backups),
/healthz, /readyz, métricas Prometheus, logs JSON e Sentry opcional.
13. Qualidade
Mais de 250 testes unitários (Vitest, também contra um Postgres real), 22 suítes de testes de ponta a ponta e acessibilidade (Playwright + axe), verificação de tipo rigorosa e lint. Verificado com uma instalação limpa do ZIP (npm ci, build, verificação de tipo, testes e lint).
Requisitos
- Node.js 20 ou posterior e npm 10.
- Desenvolvimento: nenhuma instalação do Postgres necessária (usa Postgres embutido via PGlite).
- Produção: Postgres 16 (gerenciado ou o que está em
compose.yml), um domínio para o aplicativo e outro com DNS curinga para sites publicados. - Opcional, com suas próprias chaves: Stripe, SMTP ou Resend para e-mail, armazenamento S3/R2, Google/GitHub OAuth e Sentry.
Bom saber
- A interface, código e e-mails estão em Inglês.
- As páginas de termos e privacidade são rascunhos: faça uma revisão profissional antes de abrir o serviço.
- Imagens de modelo carregam do CDN do Unsplash (Licença Unsplash) e não estão incluídas no pacote.
- Nenhuma chave ou credencial está incluída: defina-as em
.env com base em .env.example. - Licenças de componentes de terceiros (MIT, Apache-2.0 e similares) estão listadas em
THIRD-PARTY-NOTICES.md. - As capturas de tela, animações e vídeos foram feitos com o aplicativo real e dados de demonstração fictícios.
−33%
