How to add a custom dashboard page in Studio Two
Updated: 2 days ago
Open the Code tab in the Studio Two editor, start the Wix Extension Builder and choose Dashboard, then Dashboard Page. Enter a title and route, click Generate, edit the React file that is created, and publish the site. The page then appears in the Wix site dashboard.
Before you start
A site project open in the Studio Two editor, with access to the Code tab
Basic knowledge of React and TypeScript, since the page is a React component
A title and a route in mind for the page (route: lowercase letters, digits, hyphens and slashes)
Step by step
Open the Wix Extension Builder. In the Studio Two editor, switch to the Code tab. In the VS Code sidebar, open the Wix Extension Builder.
Choose the Dashboard Page template. Under Create an Extension, pick Dashboard, then Dashboard Page.
Fill in the form and generate. Enter a Page title, which is the name shown for the page. Enter a Page route using lowercase alphanumeric characters, hyphens and slashes. Click Generate.
Find the generated files. The files are created in src/extensions/dashboard/pages/<page-route>/. The page is registered in extensions.ts and appears under My Extensions. The folder holds a React component (<page-route>.tsx) and a configuration file (<page-route>.extension.ts).
Review the configuration file. The configuration file declares the page ID, title, route and the path to the component. Change title to rename the browser tab and sidebar label. Change routePath to alter the dashboard URL segment. Keep id stable once other code relies on it, because menu plugins and navigate() use it as the target page ID.
Edit the page component. Write the UI in <page-route>.tsx. Use the Wix Design System so the page matches native dashboard screens. Keep the generated Page.Header and Page.Content structure and replace the placeholder EmptyState with your own tables, cards or forms. As a quick test, change the subtitle in Page.Header and save.
Call Wix APIs if needed. From the component, use the Dashboard SDK for toasts, dashboard modals and navigation to other dashboard pages. Use the Wix JavaScript SDK to read and write site data, including business solution APIs.
Check the page in the dashboard. In the site dashboard, find the Apps section in the sidebar, below App Market. Click your page's title to open it and confirm that the title and your changes show.
Publish the site. Click Publish in the Studio Two editor. The page appears in the Wix site dashboard once the site is published.
Good to know
The generated page is a React component plus a configuration file. You own both and spend most of your time in the .tsx file.
The page only appears in the Wix site dashboard after the site is published.
The id in the configuration file is used as the target by menu plugins and navigate(), so changing it can break code that points to the page.
To link several custom pages, for example a list page and a detail page, use the navigation approach described in the separate Studio Two navigation guide.
You can also ask Aria, the Wix AI assistant, to create and customize the extension.
parnii note
Keep the page id fixed from the start, since other code can depend on it. Check each change in the dashboard before you publish.
FAQ
Where do I add a dashboard page in Studio Two?
Use the Code tab in the Studio Two editor. Open the Wix Extension Builder in the VS Code sidebar and choose Dashboard, then Dashboard Page under Create an Extension.
Where are the dashboard page files stored?
They are in src/extensions/dashboard/pages/<page-route>/ in your site project. The page is also registered in extensions.ts and listed under My Extensions.
Where does the custom page show up in the Wix dashboard?
It appears in the Apps section of the dashboard sidebar, below App Market, after you publish the site. Click the page title to open it.
Sources
Part of our Wix Studio Two series (Studio 2). Last checked: 02 November 2026.
