O LiveLayout é um sistema de edição de mockups de produtos desenvolvido para oferecer uma experiência rápida, visual e intuitiva de personalização — tudo direto no navegador, sem necessidade de instalar qualquer software adicional.
Com ele, o usuário pode escolher um produto (camiseta, boné, moletons, entre outros), selecionar um modelo de layout e adicionar imagens, textos e outros elementos personalizados. Cada alteração é refletida instantaneamente na tela, permitindo visualizar o resultado final antes mesmo de finalizar a criação — daí o nome LiveLayout.
Principais características:
- Renderização em tempo real com Canvas e SVG, garantindo que cada ajuste de cor, texto ou imagem apareça imediatamente no mockup
- Múltiplos produtos suportados, com modelos de layout específicos para cada tipo de item
- Personalização completa: troca de cores do produto, inserção de textos e imagens, ajuste de elementos gráficos
- 100% client-side, construído com Bootstrap e JavaScript puro, sem dependência de backend para a edição
- Interface intuitiva, pensada para que qualquer usuário — mesmo sem experiência em design — consiga criar um layout personalizado em poucos passos
O projeto nasceu da vontade de explorar as capacidades nativas do navegador para renderização gráfica, combinando a flexibilidade do Canvas com a escalabilidade vetorial do SVG, resultando em uma ferramenta leve, responsiva e visualmente precisa.
O LiveLayout está disponível para teste em livelayout.rodrigoalvesguerra.com.br.
