Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Last updated 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>

Gotcha

Prerequisite: You'll need to have an $EDITOR environment variable configured in order for this to work. For VSCode, add this to your .zshrc or .bashrc file, then open a new terminal window: export EDITOR="code -w".

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.

Protip

Remember that draft changes in the Studio are applied to a document with an ID that starts with drafts.. If you want to edit the draft version, make sure you include that prefix when you run the script.

E.g., yarn edit drafts.abcde-12345-fghijk-67890

Sanity – build remarkable experiences at scale

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.

Get startedWatch demo
Get started with Sanity

Other guides by author