🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

How to port a custom tool from v2 to v3 in Sanity.io

9 replies
Last updated: Jan 6, 2023
HiI'm trying to port a custom tool from v2 to v3, and it uses the
<SanityPreview>
component. Where do I get this from in v3?

import React from "react";
import { SanityPreview } from "@sanity/base/preview";
import { Card, Box } from "@sanity/ui";

export default ({document, schemaType,})=>{
  const documentId = document._id;

  return (
    <Box paddingX={2} as="li">
      <Card
        state={{ selectedDocumentId: documentId }}
        padding={2}
        radius={2}
      >
        <SanityPreview layout="default" value={document} type={schemaType} />
      </Card>
    </Box>
  );
}
Jan 6, 2023, 1:15 AM
Are you using next js?
Jan 6, 2023, 2:18 AM
No, this is a sanity studio tool.&lt;SanityPreview&gt; is a react component that should return the same thing that is uses as a document list item in the deskTool.
Jan 6, 2023, 2:24 AM
Looks like you need a
defineConfig
object and run sanity build.
Jan 6, 2023, 2:33 AM
No this is not relevant.
Jan 6, 2023, 2:34 AM
// Single workspace configuration

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {schemaTypes} from './schemas'

export default defineConfig({
  projectId: '<projectId>',
	dataset: 'production',
  plugins: [deskTool()],
  schema: {
	  types: schemaTypes,
  },
})
Jan 6, 2023, 2:36 AM
Jan 6, 2023, 2:53 AM
Jan 6, 2023, 3:04 AM
I have found a solution using
<SanityDefaultPreview>
which gives me the desired result, albeit with a little more boilerplate required as I have to provide title and subtitle explicitly rather than relying on the preview definition in the document's schema (unless I am missing something here).

import React from "react";
import { Card, Box } from "@sanity/ui";
import { SanityDefaultPreview } from "sanity";

export default ({document})=>{

  return (
    <Box paddingX={2} as="li">
      <Card
        padding={2}
        radius={2}
      >
        <SanityDefaultPreview  layout={"default"} title={document.title} subtitle={document.subtitle} />
      </Card>
    </Box>
  );
}
Jan 6, 2023, 3:27 AM

Sanity– build remarkable experiences at scale

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

Was this answer helpful?