Редакторы контента часто жалуются: чтобы поправить абзац, нужно открыть Sanity Studio, найти нужное поле, сохранить, переключиться на сайт и обновить страницу. Потеря контекста и времени. Мы решаем эту проблему с помощью Sanity Visual Editing и Presentation Tool — режима, когда правка вносится прямо на странице сайта.
Sanity Visual Editing превращает сайт в интерактивный интерфейс для редакторов: клик по тексту открывает соответствующее поле в Sanity Studio, изменение применяется мгновенно с live preview. Это не просто предпросмотр — это полноценное интерактивное редактирование. По нашим оценкам, такая связка сокращает время на контент-правки на 60%, а для мультиавторских проектов продуктивность команды растёт на 30-40%.
Как Visual Editing ускоряет работу редактора?
В основе технологии лежат Content Source Maps. Когда вы запрашиваете данные через next-sanity с флагом stega: true, Sanity внедряет в строки невидимые метаданные. Они указывают, из какого документа и поля взят текст. Visual Editing считывает эти метки при клике на элемент и открывает нужное поле в Studio. Редактору не нужно искать раздел или документ — всё происходит в контексте страницы.
Такой подход быстрее классического Preview, где требуется полная перезагрузка страницы и ручной поиск поля. Visual Editing работает через iframe и WebSocket — изменения отображаются за 200-300 мс. Мы применяли эту связку в более чем 10 проектах, и время на правки сократилось в среднем на 60%. Согласно Sanity Visual Editing documentation, Content Source Maps — это ключевой механизм для связи данных с визуальным редактором.
Почему Content Source Maps — основа Visual Editing?
Content Source Maps добавляют к ответу API метаданные о происхождении каждого поля. Когда stega включён, строки контента содержат невидимые символы с информацией о схеме, документе и пути. Visual Editing считывает эти метки при клике на элемент и точно знает, какое поле открыть в Studio. Это исключает ручной поиск — редактор кликает по тексту на странице и сразу попадает в нужное поле. Без Content Source Maps Visual Editing был бы просто предпросмотром без интерактива.
Подробнее о настройке stega
Для работы Visual Editing нужно включить stega на клиенте. Без этого редактор сможет только просматривать, но не кликать на элементы. Вот пример настройки:
// lib/sanity/client.ts import { createClient } from 'next-sanity' const client = createClient({ projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!, dataset: 'production', apiVersion: '2024-01-01', useCdn: false, stega: { enabled: true, studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL!, }, }) Для live preview с WebSocket используем defineLive. Этот пакет подключает useOptimistic и автоматически обновляет данные при изменении в Studio. Редактор видит правки в реальном времени без перезагрузки.
Шаг 1: Настройка Studio
Устанавливаем плагин @sanity/presentation и конфигурируем previewUrl с указанием origin и маршрутов для Draft Mode. Пример конфигурации:
// sanity.config.ts import { presentationTool } from '@sanity/presentation' export default defineConfig({ plugins: [ structureTool(), presentationTool({ previewUrl: { previewMode: { enable: '/api/draft-mode/enable', disable: '/api/draft-mode/disable', }, origin: process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000', }, }), ], }) Шаг 2: Реализация Draft Mode в Next.js
Создаём API-роуты /api/draft-mode/enable и /api/draft-mode/disable, используя validatePreviewUrl для проверки секретного токена.
// app/api/draft-mode/enable/route.ts import { validatePreviewUrl } from '@sanity/preview-url-secret' import { client } from '@/lib/sanity/client' import { draftMode } from 'next/headers' import { redirect } from 'next/navigation' export async function GET(req: Request) { const { isValid, redirectTo = '/' } = await validatePreviewUrl( client.withConfig({ token: process.env.SANITY_API_TOKEN! }), req.url ) if (!isValid) { return new Response('Invalid secret', { status: 401 }) } draftMode().enable() redirect(redirectTo) } // app/api/draft-mode/disable/route.ts import { draftMode } from 'next/headers' import { NextRequest, NextResponse } from 'next/server' export async function GET(req: NextRequest) { draftMode().disable() return NextResponse.redirect(new URL('/', req.url)) } Шаг 3: Подключение клиента
Добавляем VisualEditingProvider в layout, настраиваем sanityFetch и SanityLive для live-обновлений.
Что входит в настройку?
Мы предоставляем полный цикл работ — от аудита до деплоя с обучением редакторов:
| Этап | Что делаем | Результат |
|---|---|---|
| Аудит проекта | Проверяем схему, роутинг, версии пакетов | Отчёт с рекомендациями |
| Проектирование | Определяем, где нужно Visual Editing, какие поля | План интеграции |
| Настройка Studio | Устанавливаем Presentation Tool, конфигурируем preview | Рабочий интерфейс редактирования |
| Интеграция на фронте | Добавляем Draft Mode, VisualEditingProvider, live preview | Интерактивный предпросмотр |
| Тестирование | Проверяем все сценарии: guest, editor, admin | Чеклист пройден |
| Деплой | Настраиваем демо-сервер, CI/CD, переменные окружения | Работающий продакшен |
| Обучение | Документация и 1-2 сессии с редакторами | Команда готова работать |
Сравнение с альтернативами:
| Критерий | Sanity Visual Editing | Обычный Preview |
|---|---|---|
| Время реакции | 200-300 мс (WebSocket) | 2-3 секунды (перезагрузка) |
| Контекст | Редактор видит сайт, кликает на элемент | Нужно найти поле в Studio |
| Глубина правок | Любой элемент, включая изображения | Только текст или блоки |
| Поддержка изменений | Real-time через useOptimistic | Требует ручного обновления |
Сроки и опыт
Настройка Visual Editing с Presentation Tool и Draft Mode занимает от 1 до 2 дней для типового проекта. Для сложных проектов срок может увеличиться до 3–5 дней. Стоимость рассчитывается индивидуально — оценим ваш проект за один рабочий день.
Закажите настройку Visual Editing у нас — мы гарантируем корректную интеграцию благодаря 10+ годам опыта и 50+ успешным интеграциям с CMS. Просто напишите в мессенджер или на почту — мы пришлём пример реализации под ваш проект.