Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@sanity/visual-editing

sanity-io509.6kMIT2.13.20TypeScript support: included

npm stat [npm version](https://

sanity.io, visual-editing, presentation, preview, overlays

readme

@sanity/visual-editing

npm stat npm version gzip size size

This package is used with the Presentation tool in the Sanity Studio to create clickable elements to take editors right from previews to the document and field they want to edit.

Getting started

npm install @sanity/visual-editing react react-dom

Table of contents

Usage

Plain JS

import {enableVisualEditing} from '@sanity/visual-editing'

// Enables visual editing overlays
enableVisualEditing()

// Integrate with a router that uses the History API
enableVisualEditing({
  history: {
    subscribe: (navigate) => {
      const handler = (event: PopStateEvent) => {
        navigate({
          type: 'push',
          url: `${location.pathname}${location.search}`,
        })
      }
      window.addEventListener('popstate', handler)
      return () => window.removeEventListener('popstate', handler)
    },
    update: (update) => {
      switch (update.type) {
        case 'push':
          return window.history.pushState(null, '', update.url)
        case 'pop':
          return window.history.back()
        case 'replace':
          return window.history.replaceState(null, '', update.url)
        default:
          throw new Error(`Unknown update type: ${update.type}`)
      }
    },
  },
})

Next.js

If you're using Next v13 or later you can use first class components that integrate with the router. Depending on which router you're using you may use either, or both, of the following components.

App Router

For App Router you should use the VisualEditing component from next-sanity:

npm i next-sanity

In your root layout.tsx, assuming you're using Draft Mode to toggle when to enable Visual Editing, add the VisualEditing component:

import {VisualEditing} from 'next-sanity'
import {draftMode} from 'next/headers'

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>
        {children}
        {draftMode().isEnabled && (
          <VisualEditing
            zIndex={1000} // Optional
          />
        )}
      </body>
    </html>
  )
}

Pages Router

For Pages Router you should use the VisualEditing from @sanity/visual-editing/next-pages-router. Assuming you're using Draft Mode or Preview Mode to toggle when to enable Visual Editing, add the VisualEditing component to your _app.tsx:

import {VisualEditing} from '@sanity/visual-editing/next-pages-router'
import type {AppProps} from 'next/app'
import {useRouter} from 'next/router'

export default function App({Component, pageProps}: AppProps) {
  const {isPreview} = useRouter()
  // A common alternative pattern to `isPreview` and `useRouter` is to pass down the draftMode/preview from getStaticProps/getServerSideProps/getInitialProps
  // const { draftMode } = pageProps
  return (
    <>
      <Component {...pageProps} />
      {isPreview && (
        <VisualEditing
          zIndex={1000} // Optional
        />
      )}
    </>
  )
}

Remix

For Remix apps you should use VisualEditing from @sanity/visual-editing/remix in your app/root.tsx:

import {json} from '@remix-run/node'
import {Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData} from '@remix-run/react'
import {VisualEditing} from '@sanity/visual-editing/remix'

export const loader = () => {
  return json({
    ENV: {
      SANITY_VISUAL_EDITING_ENABLED: process.env.SANITY_VISUAL_EDITING_ENABLED === 'true',
    },
  })
}

export default function App() {
  const {ENV} = useLoaderData<typeof loader>()

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <main>
          <Outlet />
        </main>
        {ENV.SANITY_VISUAL_EDITING_ENABLED && (
          <VisualEditing
            zIndex={1000} // Optional
          />
        )}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

React.js

On React apps that don't have a first-class framework integration may use the enableVisualEditing function directly in a useEffect hook.

import { enableVisualEditing } from '@sanity/visual-editing'
import { useEffect } from 'react'

export default function VisualEditing() {
  useEffect(() => {
    const disable = enableVisualEditing({
      history: {} // recommended, integrate your router here so it works with the URL bar in Presentation
      zIndex: 1000, // optional
    })
    return () => disable()
  }, [])

  return null
}

Refresh API

The refresh API is complimentary to the Loaders and Preview Kit APIs. It's used to refresh the page when the user has made changes to the document in the Studio and wants to see the changes reflected in the preview or when clicking on the "Refresh" button in the Presentation Tool UI. For some frameworks, like Next.js App Router, Remix and soon SvelteKit, there's first-class implementations of the refresh API that does what you want out of the box, while still allowing you to customize it if you need to.

  • When to use:
    • When you're using a framework that has a refresh API that provides a better experience than a full page reload.
    • You have data fetching used in your app that it's either impractical or too costly to refactor to use Loaders or Preview Kit.
    • You have other data fetching than Content Lake GROQ queries, for example GraphQL or REST APIs that you want to refresh.
  • When not to use
    • If you're using a framework without a first-class refresh API.
    • You're already using Loaders or Preview Kit for all your data fetching.

The TypeScript signature for the API is:

interface VisualEditingOptions {
  refresh?: (payload: HistoryRefresh) => false | Promise<void>
}
type HistoryRefresh =
  | {
      source: 'manual'
      livePreviewEnabled: boolean
    }
  | {
      source: 'mutation'
      livePreviewEnabled: boolean
      document: {
        _id: string
        _type: string
        _rev: string
        slug?: {
          current?: string | null
        }
      }
    }

Returning false will trigger the default behavior, which is different depending on the source and livePreviewEnabled state. Returning a Promise will report to Presentation Tool that a refresh is happening and will show a loading UI while the Promise is pending.

Plain JS

source: 'manual'

It's fired when the user clicks on the "Refresh" button in the Presentation Tool. The default behavior is effectively the same as window.location.reload().

source: 'mutation'

The default behavior is to return false, as we can't make any assumptions of what the default behavior should be for your app if we don't know what framework you're using.

The payload will contain livePreviewEnabled and document properties. livePreviewEnabled is true if either Loaders are detected to be setup in Live Mode, or if Preview Kit is enabled. It allows you to chose a reload strategy based on wether the route you're on has live preview functionality or not, allowing you to incrementally adopt Loaders or Preview Kit without having to refactor all your data fetching at once.

The document part of the payload contains the _id, _type, _rev and slug properties of the document that was changed in the Studio. Depending on your app, you may want to use this information to decide if you want to refresh the page or not as well as which API to use.

Next.js App Router

[!NOTE] There's no default refresh API for Pages Router, as it doesn't have a first-class refresh API like App Router or Remix. But you can still use the refresh option to implement your own refresh logic by using the refresh prop on the <VisualEditing /> component provided by @sanity/visual-editing/next-pages-router.

For App Router you should use the VisualEditing component from next-sanity:

npm i next-sanity

The implementation makes use of Server Actions, here's the default internal implementation (simplified):

// app/layout.tsx
import {VisualEditing} from 'next-sanity'
import {revalidatePath, revalidateTag} from 'next/cache'
import {draftMode} from 'next/headers'

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        {draftMode().isEnabled && (
          <VisualEditing
            refresh={async (payload) => {
              'use server'
              // Guard against a bad actor attempting to revalidate the page
              if (!draftMode().isEnabled) {
                return
              }
              if (payload.source === 'manual') {
                await revalidatePath('/', 'layout')
              }
              // Only revalidate on mutations if the route doesn't have loaders or preview-kit
              if (payload.source === 'mutation' && !payload.livePreviewEnabled) {
                await revalidatePath('/', 'layout')
              }
            }}
          />
        )}
      </body>
    </html>
  )
}

source: 'manual'

If your application is using revalidateTag then it's common to add the tag all to all data fetches. If you follow this pattern then you can reduce the impact of a manual refresh by using it here as well:

<VisualEditing
  refresh={async (payload) => {
    'use server'
    // Guard against a bad actor attempting to revalidate the page
    if (!draftMode().isEnabled) {
      return
    }
    if (payload.source === 'manual') {
      await revalidateTag('all')
    }
  }}
/>

source: 'mutation'

If you're using revalidateTag, [and the GROQ webhook pattern][https://github.com/sanity-io/next-sanity#tag-based-revalidation-webhook], then you can reuse it here on route level as well:

<VisualEditing
  refresh={async (payload) => {
    'use server'
    // Guard against a bad actor attempting to revalidate the page
    if (!draftMode().isEnabled) {
      return
    }
    if (payload.source === 'manual') {
      await revalidateTag('all')
    }
    if (payload.source === 'mutation') {
      // Call `revalidateTag` in the same way as ./app/api/revalidate/route.ts
      await revalidateTag(payload.document._type)
    }
  }}
/>

You can use payload.livePreviewEnabled and payload.document to better target scenarios where you want to revalidateTag or when it may already be handled by a useQuery hook from @sanity/react-loader already, or a useLiveQuery hook from next-sanity/preview or @sanity/preview-kit.

Remix

For Remix apps the implementation is much like the one for Next.js App Router when it comes to what happens depending on the source and livePreviewEnabled properties of the payload.

Remix doesn't have Server Actions yet, under the hood the useRevalidator hook is used. Here's the default internal implementation (simplified):

// app/root.tsx
import {useRevalidator} from '@remix-run/react'
import {VisualEditing} from '@sanity/visual-editing/remix'

export default function App() {
  const {ENV} = useLoaderData<typeof loader>()
  const revalidator = useRevalidator()

  return (
    <html lang="en">
      <body>
        <Outlet />
        {ENV.SANITY_VISUAL_EDITING_ENABLED && (
          <VisualEditing
            refresh={(payload) => {
              if (payload.source === 'manual') {
                revalidator.revalidate()
              }
              if (payload.source === 'mutation' && !payload.livePreviewEnabled) {
                revalidator.revalidate()
              }
            }}
          />
        )}
      </body>
    </html>
  )
}

If you only want to configure when revalidation is called, and not the actual implementation, then you can call the refreshDefault function so you don't have to handle useRevalidator and its loading states yourself.

<VisualEditing
  refresh={(payload, refreshDefault) => {
    if (payload.source === 'manual') {
      return refreshDefault()
    }
    // Always revalidate on mutations for document types that are used for MetaFunctions that render in <head />
    if (payload.source === 'mutation' && payload.document._type === 'settings') {
      return refreshDefault()
    }
  }}
/>

SvelteKit

A first class implementation for SvelteKit is coming soon.

Manually configuring "Edit in Sanity Studio" elements

data-sanity-edit-target

You can choose which element to render the "Edit in Sanity Studio" buttons on by adding a data-sanity-edit-target attribute to the element you want to be clickable. This allows you to move the edit container to a parent wrapper element.

In this example, by default the edit button would be placed on the <h1> tag

<section>
  <h1>{dynamicTitle}</h1>
  <div>Hardcoded Tagline</div>
</section>

But by adding the data-sanity-edit-target attribute to the <section> tag, the edit button will be placed on it instead.

<section data-sanity-edit-target>
  <h1>{dynamicTitle}</h1>
  <div>Hardcoded Tagline</div>
</section>

Manually setting the edit target will use the first element it finds with encoded metadata and remove clickable buttons from all other child elements.

Change the z-index of overlay elements

enableVisualEditing({
  zIndex: 1000,
})

changelog

Changelog

2.13.20 (2025-04-30)

Bug Fixes

  • deps: require peer dependency @sanity/client to ^7.0.0 (de3db1f)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.18
      • @sanity/preview-url-secret bumped to 2.1.10
      • @sanity/visual-editing-csm bumped to 2.0.16

2.13.19 (2025-04-30)

Bug Fixes

  • deps: update dependency @sanity/client to v7 (#2964) (473f7ed)
  • deps: upgrade to react compiler RC (29a886b)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 3.0.2
      • @sanity/insert-menu bumped to 1.1.11
      • @sanity/presentation-comlink bumped to 1.0.17
      • @sanity/preview-url-secret bumped to 2.1.9
      • @sanity/visual-editing-csm bumped to 2.0.15

2.13.18 (2025-04-11)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.29.0 (2a8ff1e)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.10
      • @sanity/presentation-comlink bumped to 1.0.16
      • @sanity/preview-url-secret bumped to 2.1.8
      • @sanity/visual-editing-csm bumped to 2.0.14

2.13.17 (2025-04-10)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/visual-editing-csm bumped to 2.0.13

2.13.16 (2025-04-10)

Bug Fixes

  • deps: update dependency styled-components to ^6.1.17 (#2904) (adfb416)
  • deps: update react compiler dependencies 🤖 ✨ (#2897) (5c72b41)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.9
      • @sanity/presentation-comlink bumped to 1.0.15
      • @sanity/visual-editing-csm bumped to 2.0.12

2.13.15 (2025-04-01)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.28.4 (#2884) (be6dca0)
  • deps: update react compiler dependencies 🤖 ✨ (#2878) (664abd9)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.8
      • @sanity/presentation-comlink bumped to 1.0.14
      • @sanity/preview-url-secret bumped to 2.1.7
      • @sanity/visual-editing-csm bumped to 2.0.11

2.13.14 (2025-03-24)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2856) (5d1e4bb)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.7
      • @sanity/presentation-comlink bumped to 1.0.13
      • @sanity/visual-editing-csm bumped to 2.0.10

2.13.13 (2025-03-21)

Bug Fixes

  • deps: update dependency styled-components to ^6.1.16 (#2841) (abaa57b)

2.13.12 (2025-03-17)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2827) (a72e9b8)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.6
      • @sanity/presentation-comlink bumped to 1.0.12
      • @sanity/visual-editing-csm bumped to 2.0.9

2.13.11 (2025-03-14)

Bug Fixes

  • support upcoming presentation debug features (00db0db)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.11

2.13.10 (2025-03-13)

Bug Fixes

  • improve next.js pages router experience (ce98771)

2.13.9 (2025-03-12)

Bug Fixes

  • prevent over-fetching schema union types (#2817) (51bf535)

2.13.8 (2025-03-12)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.28.2 (#2779) (6336984)
  • deps: update dependency @sanity/client to ^6.28.3 (#2808) (a2f657d)
  • deps: update React Compiler dependencies 🤖 ✨ (#2800) (371b821)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.5
      • @sanity/presentation-comlink bumped to 1.0.10
      • @sanity/preview-url-secret bumped to 2.1.6
      • @sanity/visual-editing-csm bumped to 2.0.8

2.13.7 (2025-03-03)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2774) (3fed1f2)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.4
      • @sanity/presentation-comlink bumped to 1.0.9
      • @sanity/preview-url-secret bumped to 2.1.5
      • @sanity/visual-editing-csm bumped to 2.0.7

2.13.6 (2025-02-24)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2745) (c185f58)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.3
      • @sanity/presentation-comlink bumped to 1.0.8
      • @sanity/visual-editing-csm bumped to 2.0.6

2.13.5 (2025-02-18)

Bug Fixes

  • make styled-components a peer (7d0e17b)

2.13.4 (2025-02-18)

Bug Fixes

2.13.3 (2025-02-17)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2694) (b80c478)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.2
      • @sanity/presentation-comlink bumped to 1.0.7
      • @sanity/visual-editing-csm bumped to 2.0.5

2.13.2 (2025-02-12)

Bug Fixes

2.13.1 (2025-02-10)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2651) (0692000)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.1
      • @sanity/presentation-comlink bumped to 1.0.6
      • @sanity/visual-editing-csm bumped to 2.0.4

2.13.0 (2025-02-07)

Features

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/insert-menu bumped to 1.1.0
      • @sanity/presentation-comlink bumped to 1.0.5
      • @sanity/visual-editing-csm bumped to 2.0.3

2.12.14 (2025-02-05)

Bug Fixes

2.12.13 (2025-02-05)

Bug Fixes

  • visual-editing: prevent snapshot overfetching (#2615) (5533a2b)

2.12.12 (2025-02-04)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2604) (60f5349)

2.12.11 (2025-01-30)

Bug Fixes

  • allow react-router v6 used by remix v2 (431654f)

2.12.10 (2025-01-28)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.27.2 (#2578) (de598b8)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.4
      • @sanity/preview-url-secret bumped to 2.1.4
      • @sanity/visual-editing-csm bumped to 2.0.2

2.12.9 (2025-01-27)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2565) (74fdcdd)

2.12.8 (2025-01-23)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.1.3

2.12.7 (2025-01-22)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.3
      • @sanity/preview-url-secret bumped to 2.1.2
      • @sanity/visual-editing-csm bumped to 2.0.1

2.12.6 (2025-01-22)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.2
      • @sanity/preview-url-secret bumped to 2.1.1
      • @sanity/visual-editing-csm bumped to 2.0.0

2.12.5 (2025-01-21)

Bug Fixes

  • deps: update dependency @sanity/ui to v2.11.4 (#2533) (800f6fd)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/presentation-comlink bumped to 1.0.1
      • @sanity/visual-editing-csm bumped to 1.0.1
    • devDependencies
      • @sanity/insert-menu bumped to 1.0.20

2.12.4 (2025-01-20)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2529) (72897c6)

2.12.3 (2025-01-17)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 3.0.1
      • @sanity/presentation-comlink bumped to 1.0.0
      • @sanity/visual-editing-csm bumped to 1.0.0

2.12.2 (2025-01-14)

Bug Fixes

  • explicitly fetch preview snapshots on connect (#2487) (cf07d56)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.12.1 (2025-01-13)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2483) (e059b2e)

2.12.0 (2025-01-10)

Features

  • add optional redirect override to svelte preview handler (#2363) (ba2c3b2)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.1.0

2.11.9 (2025-01-09)

Bug Fixes

  • visual-editing: fix svelte imports (#2473) (040603e)
  • visual-editing: remove unnecessary comlink delay (98bd6aa)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 3.0.0
    • devDependencies

2.11.8 (2025-01-09)

Bug Fixes

  • ship react 19 ready typings (67b9187)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.5
      • @sanity/preview-url-secret bumped to 2.0.7
    • devDependencies

2.11.7 (2025-01-09)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.6

2.11.6 (2025-01-08)

Bug Fixes

2.11.5 (2025-01-06)

Bug Fixes

  • deps: Update dependency xstate to ^5.19.1 (#2357) (98045c9)
  • visual-editing: Don't show "Open in Studio" offscreen when at top of screen (#2356) (140ac4f)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.4
    • devDependencies

2.11.4 (2025-01-02)

Bug Fixes

  • temporarily disable react compiler (5cbaefa)

2.11.3 (2024-12-21)

Bug Fixes

2.11.2 (2024-12-21)

Bug Fixes

  • make &lt;VisualEditing&gt; render in portals consistently (#2345) (c25d0af)

2.11.1 (2024-12-21)

Bug Fixes

  • improve race condition connectivity handling (#2342) (a98d6cf)
  • optimistically set the mutator actor (5347ac0)
  • preload feature request (9dfcb4c)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.3
    • devDependencies

2.11.0 (2024-12-19)

Features

  • visual-editing: add svelte optimistic state support (#2307) (73c7247)

2.10.10 (2024-12-16)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2318) (6cf2417)

2.10.9 (2024-12-16)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.10.8 (2024-12-16)

Bug Fixes

  • visual-editing: execute fetches after node connect event (#2308) (c29a4b3)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.2
    • devDependencies

2.10.7 (2024-12-12)

Bug Fixes

2.10.6 (2024-12-09)

Bug Fixes

  • deps: update react compiler dependencies 🤖 ✨ (#2271) (9634150)

2.10.5 (2024-12-06)

Bug Fixes

  • open-in-studio: set preview correctly for hash router studios (#2296) (97a243c)

2.10.4 (2024-12-05)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.1
    • devDependencies

2.10.3 (2024-12-02)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.23.0 (#2244) (eeacde8)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.5
    • devDependencies

2.10.2 (2024-11-28)

Bug Fixes

  • fully support React Compiler (823a894)

2.10.1 (2024-11-28)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 2.0.0
    • devDependencies

2.10.0 (2024-11-27)

Features

2.9.0 (2024-11-26)

Features

Bug Fixes

  • visual-editing: unset overlay applied cursor on mouseleave (#2181) (2d39ab7)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 1.1.4
    • devDependencies

2.8.0 (2024-11-19)

Features

  • visual-editing: add async getSnapshot to optimistic documents (#2180) (c602969)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.22.5 (#2185) (da0aa32)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.4
    • devDependencies

2.7.2 (2024-11-15)

Bug Fixes

2.7.1 (2024-11-14)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 1.1.3
    • devDependencies

2.7.0 (2024-11-12)

Features

  • visual-editing: add defineOverlayComponents helper function (#2124) (bfabaa4)

Bug Fixes

  • deps: upgrade @sanity/mutate, xstate & @xstate/react (#2146) (6f4a765)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 1.1.2
    • devDependencies

2.6.0 (2024-11-12)

Features

Bug Fixes

  • deps: update dependency @sanity/client to ^6.22.4 (#2132) (4f96d9a)
  • visual-editing: correct component resolver array return types (#2117) (b60dc53)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.3
    • devDependencies

2.5.2 (2024-11-07)

Bug Fixes

  • resolve node:crypto error on Shopify Hydrogen (26f48ef)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.2

2.5.1 (2024-11-06)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.22.3 (0b78719)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.1
    • devDependencies

2.5.0 (2024-11-06)

Features

  • visual-editing: allow passing props to overlay components (#2071) (c139267)

Bug Fixes

  • visual-editing: memoize useDocuments functions (#2090) (6fae7c2)
  • visual-editing: prevent always activating elements on registration (#2100) (018f43a)

2.4.4 (2024-11-05)

Bug Fixes

2.4.3 (2024-11-04)

Bug Fixes

  • presentation: remove media from preview snapshot payload (#2079) (f1d04b3)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.4.2 (2024-10-28)

Bug Fixes

  • visual-editing: correct insert after action, add dismiss (#2057) (af5a881)
  • visual-editing: nested union schema field resolution (#2056) (1d20494)
  • visual-editing: remove useOptimistic nullable check (#2058) (eb62091)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.4.1 (2024-10-24)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 1.1.1
    • devDependencies

2.4.0 (2024-10-24)

Features

  • visual-editing: add package version mismatch warning (#2040) (c112de4)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/comlink bumped to 1.1.0
    • devDependencies

2.3.2 (2024-10-24)

Bug Fixes

  • visual-editing: add silent catch to features request (#2038) (a20b0fd)

2.3.1 (2024-10-23)

Bug Fixes

  • resolve issues with newly added canary features (#2036) (7b6507b)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.3.0 (2024-10-22)

Features

  • visual-editing: add OptimisticDocument commit method (#2023) (270c67d)

Bug Fixes

  • deps: Update dependency @sanity/mutate to v0.10.1-canary.5 (a093dc8)
  • visual-editing: resolve inline schema types when getting fields (#2026) (6827561)

2.2.2 (2024-10-21)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.2.1 (2024-10-21)

Bug Fixes

  • comlink: handle heartbeat compatibility correctly (#2006) (65af1e1)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.2.0 (2024-10-21)

Features

  • visual-editing: add duplicate context menu action (#1979) (fd6210c)
  • visual-editing: allow mounting custom overlay components (#1949) (053ee6e)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.22.2 (8617331)
  • use @sanity/comlink for postMessage events (e69d16f)
  • visual-editing: always report document paths if unresolved (#1948) (a8b7c34)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 2.0.0
    • devDependencies
      • @sanity/comlink bumped to 1.0.0

2.1.10 (2024-09-11)

Bug Fixes

  • deps: update dependency @sanity/client to ^6.21.3 (#1793) (1dc1b1b)
  • send preview search param explicitly (2d02d41)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 1.6.21
    • devDependencies

2.1.9 (2024-08-12)

Bug Fixes

  • deps: update dependency @sanity/client to v6.21.2 (#1749) (b9efdd2)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 1.6.20
    • devDependencies

2.1.8 (2024-08-05)

Bug Fixes

  • visual-editing: improve overlay mutation handling (#1705) (73cef51)

2.1.7 (2024-08-02)

Bug Fixes

  • deps: update dependency @sanity/client to v6.21.1 (#1704) (32f1ef8)
  • visual-editing: import svelte types from dist over src (#1700) (1642978)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.18 to ^1.6.19
    • devDependencies

2.1.6 (2024-07-03)

Bug Fixes

  • deps: update dependency @sanity/client to v6.20.1 (#1680) (bb89688)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.17 to ^1.6.18
    • devDependencies

2.1.5 (2024-06-13)

Bug Fixes

  • deps: Update dependency valibot to v0.31.1 (#1645) (0cc3a62)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.1.4 (2024-06-07)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

2.1.3 (2024-05-30)

Bug Fixes

  • deps: update dependency @sanity/client to v6.19.1 (#1602) (ebaa50c)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.16 to ^1.6.17
    • devDependencies

2.1.2 (2024-05-29)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.15 to ^1.6.16

2.1.1 (2024-05-29)

Bug Fixes

2.1.0 (2024-05-28)

Features

  • visual-editing: export VisualEditing component (#1576) (7b23f09)

Bug Fixes

  • deps: update dependency @sanity/client to v6.19.0 (#1575) (f0094a1)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.14 to ^1.6.15
    • devDependencies

2.0.0 (2024-05-28)

⚠ BREAKING CHANGES

  • move react and react-dom to peer deps (#1570)

Bug Fixes

1.8.22 (2024-05-27)

Bug Fixes

  • deps: update dependency @sanity/client to v6.18.3 (#1563) (609a3b1)
  • visual-editing: move react-is to devDependencies (#1566) (3441313)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.13 to ^1.6.14
    • devDependencies

1.8.21 (2024-05-15)

Bug Fixes

  • improve lazy loading of enableVisualEditing (#1528) (2f83a85)

1.8.20 (2024-05-15)

Bug Fixes

  • deps: update dependency @sanity/client to v6.18.2 (#1519) (78c387e)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.12 to ^1.6.13
    • devDependencies

1.8.19 (2024-05-13)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.8.18 (2024-05-05)

Bug Fixes

  • deps: update dependency @sanity/client to v6.17.2 (#1449) (928b45c)
  • deps: Update dependency @vercel/stega to v0.1.2 (#1447) (31d40cf)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.11 to ^1.6.12
    • devDependencies

1.8.17 (2024-05-02)

Bug Fixes

  • visual-editing: maintain overlay element registration when toggling (#1437) (647d07d)

1.8.16 (2024-04-26)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.8.15 (2024-04-22)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.20 (#1385) (8ead6bf)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.10 to ^1.6.11
    • devDependencies

1.8.14 (2024-04-19)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.19 (#1374) (fde2034)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.9 to ^1.6.10
    • devDependencies

1.8.13 (2024-04-19)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.17 (#1368) (e5a3202)

1.8.12 (2024-04-17)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.17 (#1360) (635d9f9)

1.8.11 (2024-04-17)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.17 (d203cbd)
  • inline async-cache-dedupe to improve ESM interop (cb53fbd)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.8 to ^1.6.9
    • devDependencies

1.8.10 (2024-04-16)

Bug Fixes

  • update allowed canary range for next (3c2c0ae)

1.8.9 (2024-04-16)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.13 (#1327) (a52f2c2)
  • update allowed canary range for next (564e965)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.7 to ^1.6.8
    • devDependencies

1.8.8 (2024-04-11)

Bug Fixes

  • allow canary releases of next (eb3b92a)

1.8.7 (2024-04-05)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.11 (#1273) (d2131b7)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.6 to ^1.6.7
    • devDependencies

1.8.6 (2024-04-05)

Bug Fixes

  • deps: update dependency @sanity/client to v6.15.10 (#1258) (9bf3cdb)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped from ^1.6.5 to ^1.6.6
    • devDependencies

1.8.5 (2024-04-02)

Bug Fixes

  • visual-editing: prevent focusing both clicked and focused elements (#1238) (cc04b4e)

1.8.4 (2024-03-21)

Bug Fixes

  • improve vite compat with styled-components (#1195) (69df4db)

1.8.3 (2024-03-20)

Bug Fixes

  • ship TS Node16 compatible typings (a21794d)
  • visual-editing: relatively import type (#1175) (c22e826)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @sanity/preview-url-secret bumped to 1.6.5
    • devDependencies

1.8.2 (2024-03-18)

Bug Fixes

  • support aria-label on &lt;svg&gt; elements (#1161) (f8f28b7)

1.8.1 (2024-03-15)

Bug Fixes

  • add /create-data-attribute export that works without use client (5569dd7)

1.8.0 (2024-03-15)

Features

  • visual-editing: add createDataAttribute to remix and next-pages-router (7fca312)

1.7.1 (2024-03-11)

Bug Fixes

  • handle iframe scrollIntoView edge case (3cb3900)

1.7.0 (2024-03-07)

Features

  • visual-editing: export svelte preview store, deprecate in loader (#1064) (07cda92)

Bug Fixes

  • deps: Update dependency valibot to v0.30.0 (#1071) (8734f34)
  • don't render overlays if the Vercel Toolbar is present (#1075) (296e1c7)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.6.0 (2024-03-06)

Features

  • visual-editing: add sveltekit specific exports (#1038) (d36d24d)
  • visual-editing: export createDataAttribute (#1037) (2db8ac3)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.5.2 (2024-02-27)

Bug Fixes

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.5.1 (2024-02-26)

Bug Fixes

  • deps: update dependency @sanity/client to v6.14.4 (#1002) (1239cb2)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.5.0 (2024-02-23)

Features

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.4.0 (2024-02-21)

Features

Bug Fixes

  • deps: Update dependency valibot to v0.29.0 (#953) (a31911b)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.3.1 (2024-02-16)

Bug Fixes

  • deps: update dependency @sanity/client to v6.13.3 (#929) (f711adc)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.3.0 (2024-02-15)

Features

Bug Fixes

  • deps: update dependency @sanity/client to v6.13.3 (#921) (e150d8d)

Dependencies

  • The following workspace dependencies were updated
    • devDependencies

1.2.2 (2024-02-09)

Bug Fixes

1.2.1 (2024-02-08)

Bug Fixes

  • prevent text underline on the "Open in Studio" buttons (5589c54)

1.2.0 (2024-02-07)

Features

  • add VisualEditing component for Remix (#860) (0c48e8c)

1.1.0 (2024-02-07)

Features

  • add VisualEditing component for Next.js Pages Router (#856) (2c7c362)

1.0.1 (2024-02-05)

Bug Fixes

  • rename @sanity/overlays to @sanity/visual-editing (#834) (1d28908)

1.0.0 (2024-02-05)

Bug Fixes