Editor visual sem código

O editor carrega o seu site real dentro de um frame e permite apontar para qualquer coisa nele. Selecionar um elemento abre um painel de propriedades agrupado do jeito que uma ferramenta de design agrupa: conteúdo, tipografia, fundo, borda, espaçamento, tamanho e posição. Cada mudança é registrada contra a variante que você está editando, nunca contra a página.

Uma árvore de hierarquia roda ao lado do canvas para quando apontar não é preciso o bastante, com um breadcrumb mostrando exatamente qual nó está selecionado. Um campo de seletor CSS existe pelo mesmo motivo: quando você já sabe o seletor, digitá-lo é mais rápido que procurá-lo.

Uma lista de mudanças mostra tudo que a variante faz, em ordem, e cada item pode ser removido individualmente. Essa lista é a variante. É o que é aplicado na página do visitante e o que a fila de implementação lê depois para dizer a um desenvolvedor o que fixar no código.

Dois controles menores importam mais do que parecem. Um alternador de interatividade troca entre selecionar elementos e realmente usar a página, então você consegue abrir um menu ou um modal e editar o que está dentro. Um seletor de aparelho reenquadra o canvas nas larguras que o seu tráfego usa, porque uma variante que só funciona na largura de desktop não está pronta.