Project Structure

The different parts that make up your Sanity Studio

The usual way of customising a CMS install is to just replace parts of the code with your own. As most people who have modified a Wordpress installation can attest, this makes upgrades difficult and quickly leads to tangled code.

Sanity Studio’s file structure is a slim single-page React application where logic and code is contained in npm modules. The Studio comes with a build system that allows you to override, remove and compose existing functionality with a system of named parts.

This makes it easy to upgrade to new versions of Sanity, and also to install and ship plugins in self-contained packages.

Studio File Layout

├── config
│   └── @sanity
├── dist
├── node_modules
├── plugins
├── schemas
│   ├── castMember.js
│   ├── crewMember.js
│   ├── movie.js
│   ├── person.js
│   ├── schema.js
│   └── screening.js
├── static
│   └── project-logo.svg
├── package.json
├── sanity.json
└── yarn.lock

Sanity Studio contains the following files and folders out of the box:

  • config - Holds the configuration files for the plugins you've installed. Out of the box, this folder will usually only contain a checksums file, which keeps track of whether the plugin has updated it's config format since the file was created.
  • dist - Build destination folder.
  • plugins - Holds all "local" plugins. By local, we mean plugins that are specific to your Studio. Shared plugins are installed to node_modules like other npm modules. By default, this folder doesn't contain anything.
  • schemas - Holds the data schema for your Studio. If you want the schema to reside elsewhere, just change the path specified in sanity.json.
  • static - A folder to place static assets such as images, files etc that are related to Sanity Studio itself. Assets that are part of your content should be uploaded via the assets API.
  • sanity.json - The main "configuration file" for your Studio. Defines which plugins to load, where your schema is located, the ID of your project etc.
  • yarn.lock - Locks your dependencies down to specific versions. We use yarn internally to manage dependencies.
  • Also, package.json and node_modules are present, just like any other Node.js project.

Was this article helpful?