Cannot get the plugin working

[andyjamesn]

I am starting with a fresh Sanity studio install with blank setup.

These are the steps I followed

1. install @tinloof/sanity-studio and add it to my config

 plugins: [structureTool(), visionTool(), pages({
    creatablePages: ["page"],
    previewUrl: {
      previewMode: {
        enable: "/api/draft",
      },
    },
  }),
  ],

2. Setup a page schema and add definepathName and import it in schema index.js

import {defineField, defineType} from 'sanity'
import { definePathname } from "@tinloof/sanity-studio";

export const page = defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
    }),
    definePathname({
        name: "pathname",
      }),
  ],
})

That is pretty much it.

But when I try and load it, I am getting a strange result

First I get this warning

If I click continue anyway, it seems to load studio inside itself

What am I missing?

[Jamiewarb]

This issue is unrelated to this plugin (this plugin wraps the presentation tool from Sanity, and what you're seeing is only the presentation tool).

Your issues happens when you don't have a frontend with visual preview running at the URL you've given the presentation tool, so it can't connect to it.

Do you have an endpoint in your app for /api/draft? This should be returning a URL to redirect the user to. That URL should take the user to the correct page on your website, where you should have visual editing set up. If this is a Next app, you can view a guide on this here: https://www.sanity.io/guides/nextjs-app-router-live-preview

If that isn't enough to solve your issue, I'd encourage you to look at documentation for Sanity Presentation and Visual Editing, or post for help in the Sanity Slack channel.