O que é o Visual Editing da DatoCMS?

O Visual Editing da DatoCMS é um recurso que permite que editores de conteúdo cliquem diretamente em qualquer elemento de um site ao vivo para editá-lo no CMS. Em vez de procurar em formulários de registro para encontrar o campo certo, os editores podem simplesmente clicar no título, imagem ou bloco que desejam alterar. O sistema usa esteganografia — caracteres Unicode invisíveis anexados a cada string nas respostas da API GraphQL — para codificar a origem de cada valor, de modo que o frontend saiba automaticamente exatamente de onde cada conteúdo vem. Combinado com o modo de rascunho e atualizações em tempo real, fazer alterações se torna uma experiência WYSIWYG contínua.

Para quem é

• Editores de conteúdo que querem parar de fazer "detetive" com formulários de registro e, em vez disso, clicar diretamente nos elementos da página para editá-los
• Desenvolvedores que precisam de uma implementação extremamente simples que funcione com projetos DatoCMS existentes e não exija a conexão manual de cada conteúdo ao seu campo de origem
• Equipes que usam Next.js, Astro, Svelte ou Vue que desejam oferecer aos seus editores uma experiência de edição visual sem trocar de provedor de hospedagem ou reconstruir o frontend

Principais recursos

Clique para editar com Content Link

Os editores visitam o site no modo de rascunho, passam o mouse sobre o conteúdo para ver o que é editável e clicam para abrir o DatoCMS em uma nova aba. Isso funciona inteiramente no frontend com qualquer hospedagem — Vercel, Netlify, Cloudflare, você escolhe. Chega de perguntar "Ei, onde está aquele campo mesmo?"

Modo Visual lado a lado

O plugin Web Previews recebe uma atualização: pré-visualização à esquerda, painel de edição à direita. Clique em qualquer conteúdo e o painel de edição abre ali mesmo. Sem troca de abas, sem perda de contexto, atualizações ao vivo instantâneas. O plugin também permite links de pré-visualização na barra lateral do CMS, navegação bidirecional entre os painéis e um modo de Edição Visual em tela cheia.

Codificação automática de metadados

A esteganografia incorpora a origem de cada valor (ID do registro, caminho do campo, localidade) diretamente nas respostas da API GraphQL. O componente `` varre automaticamente a página em busca desses metadados e renderiza sobreposições de edição nos nós DOM corretos — sem necessidade de conexão manual. Funciona com todo o modelo de conteúdo pronto para uso: links para registros, blocos, Texto Estruturado e conteúdo modular.

O que se destaca

"Chega de procurar em formulários de registro para encontrar o campo certo."

Isso não é apenas uma ferramenta de pré-visualização — é uma mudança fundamental na forma como os editores interagem com o conteúdo do CMS headless. A abordagem de esteganografia significa que os desenvolvedores não precisam conectar manualmente cada conteúdo ao seu campo de origem, o que seria tedioso na melhor das hipóteses e um pesadelo de manutenção na pior. Em vez disso, os metadados vêm automaticamente junto, tornando a configuração mínima: apenas dois cabeçalhos adicionados às solicitações GraphQL existentes e um componente no layout.

Vale a pena conferir se…

Você está cansado de editores perguntando "onde está aquele campo mesmo?" e deseja uma experiência de edição visual que funcione com seu projeto DatoCMS existente, qualquer provedor de hospedagem e com o mínimo esforço do desenvolvedor. Está disponível em todos os planos (incluindo o Gratuito) com SDKs para Next.js, Astro, Svelte e Vue.