See Sanity in action 👀 Join us for a live product demo + Q&A →

Embedding Sanity into an Astro admin page and importing schemas dynamically.

13 replies
Last updated: Feb 2, 2023
Hi! I am trying toembed my santiy into an admin page in Astro. Any ideas how can be done? I have tried this one, but it is not working. Something that maybe I am missing?
Thanks in advance

<div id="app">

<script type="module">
  import { defineConfig, renderStudio } from "<>"
  import { deskTool } from "<>"
  const config = defineConfig({
    plugins: [deskTool()],
    name: "Project name",
    projectId: "XXXXX",
    dataset: "production",
    schema: {
      types: [
          type: "document",
          name: "page",
          title: "Page",
          fields: [
              type: "string",
              name: "title",
              title: "Title"

  // This assumes that there is a &lt;div id="app"&gt;&lt;/div&gt; node in the HTML structure where this code is executed.
  renderStudio(document.getElementById("app"), config);
Jan 30, 2023, 9:32 AM
Have you specified a
somewhere in your config? I recognise this error from when I want testing out
Jan 30, 2023, 1:16 PM
☝️ probably something along those lines. Can you share your Studio config?
Jan 30, 2023, 7:18 PM
user M
, no I think I havent specify the basePath. Where should I do it? 😇
Feb 1, 2023, 9:38 AM
user M
this is my sanity.config.js:
import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemas'
import {structure} from './sidebar-structure'
import {media} from 'sanity-plugin-media'
import {BrandLogo} from './plugins/BrandLogo'

export default defineConfig({
  name: 'default',
  title: 'AARP',

  projectId: 'XXXXXX',
  dataset: 'production',

  plugins: [

  schema: {
    types: schemaTypes,

  studio: {
    components: {
      logo: BrandLogo
  } ,

  tools: (prev) =&gt; {
    // :point_down: Uses environment variables set by Vite in development mode
    if (import.meta.env.DEV) {
      return prev
    return prev.filter((tool) =&gt; !== 'vision')

Feb 1, 2023, 9:40 AM
You don’t happen to have a
file? If you do, could you send it?
Feb 1, 2023, 11:23 AM
Oh, I see. You have the
in an file called
. So, you need to actually add the
property to your Sanity-config with the value
. Example:

  "project": {
    "name": "Movies",
    "basePath": "/studio"
Feb 1, 2023, 11:25 AM
If you experience any issues regarding the
, make sure you have the latest version of
, since there was a bug that was fixed in version 3.2.4.
Feb 1, 2023, 11:28 AM
user M
, it works with the basePath, but is there a way to have automatically get all sanity schemas without copying the copde again in the admin.astro page? I mean, i have a repositoty for the backend, and other for the frontend. I will need to get all backend information on the frontend admin.astro without having to copy all the code. Do you know what I mean?
Feb 2, 2023, 12:26 PM
You could just import the files somehow. In your Sanity config, under
, is where you should put your schemas. But this does not have to be a hardcoded array, this can be files imported from anywhere. Look at the documentation here, and you will see that they import the
from another file like this:

import {schemaTypes}  from './schema'
Feb 2, 2023, 12:29 PM
user H
Feb 2, 2023, 1:45 PM
user M
from where you could get this -&gt;
./schemas ?Is there a full route for this?

import {schemaTypes} from './schemas'

Feb 2, 2023, 1:47 PM
I really recommend you reading the documentation, as all the questions you ask are answered there 😄 But essentially you create your schemas in a folder (i.e.
), and then in the same folder you create a
index.js / index.ts
file that exports the schema-types. And then you can just do
import {schemaTypes} from '&lt;rootDir&gt;/schemas'
Everything is told in detail here:
Feb 2, 2023, 10:34 PM
Also found this Astro + Sanity starter that maybe will help you out:
Feb 2, 2023, 10:36 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.