Редакторы контента часто жалуются: чтобы поправить абзац, нужно открыть 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. Просто напишите в мессенджер или на почту — мы пришлём пример реализации под ваш проект.
