1. Início
  2. Projetos
  3. Editor Vivo
Editor Vivo · Ferramenta do estúdio

Ferramenta para editar páginas web com o mouse, sem mexer no código

Uma camada de edição que se abre sobre qualquer site em desenvolvimento: você clica, move, altera textos ou imagens, e a mudança é levada ao código real com capturas do antes e do depois.

Quero algo assim
Status
Uso interno
Tipo
Ferramenta própria
Plataforma
Desktop (navegador local)
Ano
2026
Captura de tela de Editor Vivo
O projeto em 30 segundos

O que resolve e para quem

01

Problema

Pedir uma mudança visual por escrito — “suba isso um pouco”, “troque aquela foto” — é lento e ambíguo, e costuma exigir várias idas e vindas até ficar certo.

02

Solução

O site é aberto com uma camada de edição por cima. Cada salvamento registra exatamente o que mudou, com imagens otimizadas e capturas, e o assistente de código o aplica ao projeto real.

03

Para quem

Equipes que retocam sites todos os dias. Hoje é a ferramenta com a qual o próprio estúdio ajusta suas entregas.

O que faz

Do clique à mudança no código

01

Seleciona e age

Você passa o cursor, clica e aparece uma barra para mover, editar o texto, excluir ou substituir a imagem do elemento.

Seleciona e age
02

Edita o texto na própria página

Você escreve sobre o texto e vê o resultado na hora, com desfazer, refazer e um contador de mudanças pendentes no botão Salvar.

Edita o texto na própria página
03

Salva a intenção, não o código

Cada salvamento gera um pacote com as mudanças, as imagens otimizadas e capturas do antes e do depois, pronto para ser aplicado ao site.

04

Seguro por design

Funciona apenas no computador de quem edita e rejeita qualquer salvamento que não venha da própria página.

Em números

O que foi construído

Medido em testes
158 testes automatizados + 8 em navegador real

Todos aprovados ao final do desenvolvimento.

Medido em testes
6 de 6 tentativas de salvamento não autorizado bloqueadas

Teste de ataque reproduzido em auditoria: nenhuma chegou a gravar um arquivo.

Como é feito

Tecnologia por trás

Tecnologia
Node.jsTypeScriptPlaywrightsharp
Detalhe técnico

Aplicativo de linha de comando que se coloca na frente do servidor local do site, injeta a camada de edição e salva um pacote com um manifesto validado das alterações. O assistente de código do estúdio lê esse pacote e aplica as modificações.

Galeria

Mais telas do produto

Inspeção ao passar o cursor
Barra de edição do elemento
Mudanças prontas para salvar
Seu projeto

Precisa de algo como o Editor Vivo?

Conte-nos a ideia em duas linhas. Respondemos com escopo, prazo e uma primeira proposta.

Iniciar projeto Testar o Concept Engine
Continue explorando

Mais projetos