¿Qué es la edición visual de DatoCMS?
La edición visual de DatoCMS es una función que permite a los editores de contenido hacer clic directamente en cualquier elemento de un sitio web en vivo para editarlo en el CMS. En lugar de buscar en formularios de registros para encontrar el campo correcto, los editores pueden simplemente hacer clic en el titular, la imagen o el bloque que desean cambiar. El sistema utiliza esteganografía (caracteres Unicode invisibles añadidos a cada cadena en las respuestas de la API GraphQL) para codificar el origen de cada valor, de modo que el frontend sepa automáticamente exactamente de dónde proviene cada pieza de contenido. Combinado con el modo borrador y las actualizaciones en tiempo real, realizar cambios se convierte en una experiencia WYSIWYG fluida.
Para quién es
- Editores de contenido que quieren dejar de jugar al detective con formularios de registros y, en su lugar, hacer clic directamente en los elementos de la página para editarlos
- Desarrolladores que necesitan una implementación extremadamente simple que funcione con proyectos existentes de DatoCMS y no requiera conectar manualmente cada pieza de contenido con su campo de origen
- Equipos que usan Next.js, Astro, Svelte o Vue que quieren ofrecer a sus editores una experiencia de edición visual sin cambiar de proveedor de alojamiento ni reconstruir su frontend
Funciones clave
Hacer clic para editar con Content Link
Los editores visitan el sitio web en modo borrador, pasan el cursor sobre el contenido para ver qué es editable y hacen clic para abrir DatoCMS en una nueva pestaña. Esto funciona completamente en el frontend con cualquier alojamiento: Vercel, Netlify, Cloudflare, lo que sea. No más preguntas como "oye, ¿dónde está ese campo?".
Modo visual lado a lado
El complemento Web Previews se actualiza: vista previa a la izquierda, panel de edición a la derecha. Haz clic en cualquier pieza de contenido y el panel de edición se abre justo allí. Sin cambio de pestañas, sin pérdida de contexto, actualizaciones en vivo instantáneas. El complemento también habilita enlaces de vista previa en la barra lateral del CMS, navegación bidireccional entre paneles y un modo de edición visual a pantalla completa.
Codificación automática de metadatos
La esteganografía incrusta el origen de cada valor (ID del registro, ruta del campo, configuración regional) directamente en las respuestas de la API GraphQL. El componente `` escanea automáticamente la página en busca de estos metadatos y renderiza superposiciones de edición en los nodos DOM correctos, sin necesidad de cableado manual. Funciona con todo el modelo de contenido de forma predeterminada: enlaces a registros, bloques, texto estructurado y contenido modular.
Lo que destaca
"No más buscar en formularios de registros para encontrar el campo correcto."
Esto no es solo una herramienta de vista previa: es un cambio fundamental en la forma en que los editores interactúan con el contenido de un CMS headless. El enfoque de esteganografía significa que los desarrolladores no tienen que conectar manualmente cada pieza de contenido con su campo de origen, lo que sería tedioso en el mejor de los casos y una pesadilla de mantenimiento en el peor. En su lugar, los metadatos viajan automáticamente, lo que hace que la configuración sea mínima: solo dos encabezados añadidos a las solicitudes GraphQL existentes y un componente en el diseño.
Vale la pena echarle un vistazo si…
Estás cansado de que los editores pregunten "¿dónde está ese campo?" y quieres una experiencia de edición visual que funcione con tu proyecto existente de DatoCMS, cualquier proveedor de alojamiento y un esfuerzo mínimo de desarrollo. Está disponible en todos los planes (incluido el gratuito) con SDK para Next.js, Astro, Svelte y Vue.
