On This Page
I was living on the edge already, so I might as well embrace it 😆
I was able to do it and I am sharing my findings here. I am actually going to change my other projects that are using Sanity Studio to use this approach. It is much more convenient, because most of my smaller projects are not inside of a monorepo.
Hold up, what is Sanity?
Sanity is a headless CMS that allows you to create content schemas and manage content in a visual editor. In terms of data structure I would say it's quite similar to some of the other headless CMSs like Contentful or Prismic.
However, where Sanity shines is the abilty to customize the editor to your needs using React. Maybe that changes in the future and we can extend Sanity with Svelte components, looking at you Mitosis 👀
Before V3, Sanity Studio needed it's own build step. It is possible to keep V2 inside the same codebase, but let's be honest, no one likes another package.json file in their project (unless you're using a monorepo).
The new Sanity Studio is bundler agnostic and can be used with any framework. In other words, the new Sanity Studio comes bundled with a
renderStudio function that lets you mount it on any DOM element.
This means that it technically should be possible to embed Sanity Studio into a SvelteKit app... today — right? 🤔
In the offical announcement it shows an example of how to import it using Skypack. I tried that method, but I couldn't really get it to work (and it's not typed).
I also noticed it says: "In the near future, you should be able to do something like this 🤯". So I guess this method starts to work once V3 is officially released.
Finding a solution
The solution is actually quite simple. We can use the
renderStudio function to mount Sanity Studio into a specific Sveltekit route. But we got to make sure that we redirect all subpaths for the Studio’s
basePath, because Sanity Studio is an Single Page Application.
Alright, let's get started.
1. Install Sanity
In this example and at time of writing I'm using
3.0.0-dev-preview.22, which you can install using the following command. This will install the latest dev version of Sanity Studio.
2. Creating the Studio route
routes folder create a new folder called
studio and add another folder called
[...catchall] inside of it. This will catch all subpaths for the Studio. You can read more about
[...catchall] in the SvelteKit docs.
Inside of the
[...catchall] folder create a new file called
page.svelte and add the following code:
3. Create a Sanity config
We need to create a config, so that we can pass it to the
renderStudio function. Create a new file called
sanityConfig.ts and add the following code. You can obviously skip this step if you already have a Sanity Studio V3 config file.
In my projects, I usually have a
config folder inside a
lib folder called
sanity that has all my Sanity related config files. You store your config file wherever you want, but make sure you update the import path in the steps later on.
3. Create a re-usable Sanity Studio component
Let's create a re-usable component that we can use for mounting Sanity Studio V3.
Create a new file called
src/lib/components and add the following code:
Let's break it down, shall we 🤓
- First we import the
createConfigfunctions from Sanity. We also import the
StudioProps, so that our
configprop is nicely typed.
- Next up we create a
studioElvariable that we will use to mount the Studio to. After that we use the
onMountfunction to mount Sanity Studio once the component is mounted.
- We also add a couple of meta tags to the
of the page. This is to ensure robots don't index the page and that the viewport is set correctly.
- Finally we add a
element that we will use to mount Sanity Studio on. and add a couple of styles to make sure the Studio takes up the full height of the page.
What can be improved?
I guess we could dynamically import the Sanity Studio because it's quite a big bundle. But that's something for another day.
4. Update the Studio route
Now that we have our Sanity Studio component, we can update the Studio route to use it. Open the
page.svelte file in the
studio/[...catchall] folder and update it to the following:
And that's it! 🎉
You should now be able to access Sanity Studio V3 in your SvelteKit app under the
/studio route 🚀
I hope you found this tutorial useful. If you have any questions or suggestions, feel free to reach out to me on Twitter. I'm also available for hire, so if you need help with your project, feel free to contact me.