Build a Dashboard Page in Studio Two

A dashboard page is a React component plus a configuration file. You generate the files first, then spend most of your time in the .tsx file: layout with the Wix Design System, Dashboard SDK calls, and reads and writes of site data.

This article walks through that loop from a scaffolded page to one that looks and behaves like a native Wix dashboard screen.

Follow the instructions below to:

1. Scaffold the page.
2. Set the configuration.
3. Build the page UI.
4. Call Wix APIs from the page.

Step 1 | Scaffold the page

Start from a generated dashboard page rather than an empty folder, so the file structure and registration are already in place.

For the full procedure, see Add a Dashboard Page Extension in Studio Two.

You can find the new files under src/extensions/dashboard/pages/<page-route>/. You spend most of this article in <page-route>.tsx. For what every file in the folder is for, see Dashboard Page Extension Files and Code.

Step 2 | Set the configuration

<page-route>.extension.ts is the configuration file you own. It declares the page ID, title, route, and path to the React component.

Keep id stable once other code depends on it. Menu plugins and navigate() both use this value as the target page ID.

Change title when you want a different browser tab title or sidebar label. Change routePath when you want a different dashboard URL segment.

For every field, see Dashboard Page Extension Files and Code.

Step 3 | Build the page UI

Write the page in <page-route>.tsx as a React component. Prefer the Wix Design System so the page matches native Wix dashboard screens.

A generated page typically wraps its content in WixDesignSystemProvider and Page:

Replace EmptyState with tables, cards, or forms as the page's job becomes clear. Keep the Page.Header and Page.Content structure so the layout stays aligned with other dashboard pages.

Step 4 | Call Wix APIs from the page

Inside the page component you can:

• Call the Dashboard SDK to show toasts, open dashboard modals, and send the Wix user to another dashboard page.
• Call the Wix JavaScript SDK to read and write site data, including business solution APIs.

To connect two or more of your pages, for example a list page and a detail page, see Navigate Between Dashboard Pages in Studio Two. For the navigate() contract, including calls from plugins and menu plugins, see About Dashboard Page Navigation.

When the page behaves the way you want, click Publish to ship it with your site.

See also

• About Dashboard Pages
• Add a Dashboard Page Extension in Studio Two
• Navigate Between Dashboard Pages in Studio Two
• Dashboard Page Extension Files and Code
• Dashboard Pages