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.
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?".
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.
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.
"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.
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.
Otras herramientas que podrías considerar
Loading comments…
Creador
meowbyte
Visitar sitio web
datocms.com/blog/introducing-visual-editing
Información del proyecto
Palabras clave del producto
Logro
