@sanity/visual-editing
Advanced tools
[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://
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.
npm install @sanity/visual-editing
import { enableVisualEditing } from '@sanity/vision-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}`)
}
},
},
})
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.
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 { draftMode } from 'next/headers'
import { VisualEditing } from 'next-sanity'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
{draftMode().isEnabled && (
<VisualEditing
zIndex={1000} // Optional
/>
)}
</body>
</html>
)
}
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
/>
)}
</>
)
}
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,
LiveReload,
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 />
<LiveReload />
</body>
</html>
)
}
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/vision-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
}
data-sanity-edit-targetYou 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.
enableVisualEditing({
zIndex: 1000,
})
FAQs
[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://
The npm package @sanity/visual-editing receives a total of 65,075 weekly downloads. As such, @sanity/visual-editing popularity was classified as popular.
We found that @sanity/visual-editing demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 63 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.