Render a window view

Render your app's main, full-page view in the Dashboard window, the surface to the right of the dock and any open panel.

A window view is your app's main, full-page view. It fills the Dashboard to the right of the dock and any open panel, and it is where Media Library and Studios render. If you are coming from the App SDK, this is the surface your app already uses.

An application can declare at most one window view. Everything inside it belongs to your app, including its own navigation, so the Dashboard does not impose a layout on the window beyond its edges.

import {defineApplication, defineCliConfig, defineWindowView} from 'sanity/cli'

export default defineCliConfig({
  app: defineApplication({
    organizationId: 'your-organization-id',
    slug: 'content-activity',
    title: 'Content activity',
    views: [
      defineWindowView({name: 'main', title: 'Content activity', src: './src/window.tsx'}),
    ],
  }),
})

src is relative to the project root, the folder that contains sanity.cli.ts. The window view's name must be unique across the app's views and web workers.

If the window is the only surface your app needs, set entry instead. The CLI creates the window view for you, and the rest of this guide is optional.

import {defineApplication, defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  app: defineApplication({
    organizationId: 'your-organization-id',
    slug: 'content-activity',
    title: 'Content activity',
    entry: './src/App.tsx',
  }),
})

Declare defineWindowView explicitly when you need to configure the view, for example to set its dock item, or when the app also declares panel views, tile views, or web workers.

Each view renders in its own island, so it doesn't inherit the Dashboard's context or providers. Wrap the window in SanityApp, the same provider your app's panels and tiles use:

import {SanityApp} from '@sanity/sdk-react'
import type {ReactNode} from 'react'

export function Providers({children}: {children: ReactNode}) {
  return (
    <SanityApp fallback={null}>
      {children}
    </SanityApp>
  )
}

import {unstable_defineView} from 'sanity/dashboard'
import {Providers} from './Providers'

export default unstable_defineView('window', {
  title: ({view}) => view.title,
  window: () => (
    <Providers>
      { /* the rest of your app, including its own navigation */ }
    </Providers>
  ),
})

The Dashboard renders the window component into the window surface and uses title to label the app. Both receive view, which contains the view's name and title.

The dock sits on the far left, a panel view opens as a column beside it, and the window fills whatever is left. Opening a panel narrows the window rather than covering it, so design the window to reflow rather than assume a fixed width. On narrow screens, an open panel fills the width and the window is hidden behind it.