Published February 10, 2023
How to Edit Sanity Documents in Your $EDITOR of Choice
By Corey Ward
As developers, it's working inside of the Sanity Studio, sometimes it's useful to be able to eject from the Studio Editor UI and access the JSON document directly in a text editor like VSCode. Whether it's to remove or reformat a document or two to match an updated schema, work around an error in a component, or even to copy/paste fields, objects, and arrays around between documents as a bit of a manual-migration, being able to quickly load and modify documents becomes a bit of a superpower.
While the Sanity CLI supports this natively, the syntax isn't always easy to remember, especially with the various flags required to make the process as straightforward as possible. Instead, I prefer to have a single, easy to remember command to edit a document. That's what I'm going to walk you through setting up in this guide. By the end, you'll be able to run yarn edit <document-id> to open any document in your project in VSCode or your favorite editor, make changes, close the file, and the Sanity CLI will update the live document.
Let's get started!
The first step is to create a script that will run to invoke the Sanity command that performs this work. Copy and paste the following into a file in your Sanity Studio project repo at scripts/editDocument.js:
/**
* Convenient way to edit a document in your $EDITOR.
* Usage: `node scripts/editDocument.js <documentId>`
*/
const { spawn } = require("child_process")
const [documentId] = process.argv.slice(2)
if (!documentId) {
throw new Error("No document id was provided.")
}
spawn("sanity", ["documents", "create", "--id", documentId, "--replace"], {
cwd: process.cwd(),
stdio: "inherit",
shell: true,
})Next, add a new entry under the scripts property in your package.json file to make accessing this script easy:
{
"name": "your-project",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy",
"edit": "node scripts/editDocument.js" // <---- add this line
}
}Now, grab the id for any document in your dataset and give it a whirl!
yarn edit <document-id> # - or - npm edit <document-id>
This will open the document in your configured $EDITOR and wait for it to be saved and closed. If there are no changes, it will abort, but if there are changes, it will update the document in Sanity.
Sanity – The Content Operating System that ends your CMS nightmares
Sanity replaces rigid content systems with a developer-first operating system. Define schemas in TypeScript, customize the editor with React, and deliver content anywhere with GROQ. Your team ships in minutes while you focus on building features, not maintaining infrastructure.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
