[studio] Allow to embed a Toolpad Studio page as a React component

[Janpot]

Summary 💡

Currently it's possible to host a Toolpad application side-by-side with a Next.js application in a custom server. But I'd like to be able to render Toolpad pages within the Next.js app router. Toolpad should support importing an applicaion as a React Server Component

Examples 🌈

'use server'
// ./app/my-toolpad-app/[[...slug]]/page.js
import { ToolpadApp } from '@mui/toolpad';

export default function MyToolpadApp() {
  return <ToolpadApp dir='./my-toolpad-app' />
}

This should result in a Toolpad application in a Next.js project under /my-toolpad-app. it should work exactly as if it was hosted using createHandler: https://mui.com/toolpad/concepts/custom-server/

Alternative

We may also decide to provide Toolpad as a React client component + http handler for environments that don't support RSCs.

Motivation 🔦

• How to deploy multiple editors on a custom server #2908 (comment)
• [studio] Export as ESM import #315

Benchmark

• Retool Embeded https://retool.com/products/embed & https://docs.retool.com/apps/external/quickstarts/embed

[JerryWu1234]

this PR sounds good.
do you have more details?

[Janpot]

this PR sounds good. do you have more details?

this issue mostly serves to gather interest in the feature. it requires many fundamental changes to Toolpad to execute.

[buremba]

This would be a great addition, I am thrilled to see a PR already! I was struggling to use the ToolpadApp from Next.app as I didn't want to run the builder with runtime and this PR seems to address the issue.

[zehawki]

Continuing off #3478, I would love to have a way to render a dashboard inside a (vanilla) react app, ie client side given a YAML. For my use case, not so important for the dashboard editor to be integrated, so matches Toolpad current expectation "producer/editor: at the moment we see Toolpad as mostly a local development tool. You run it alongside your code editor, terminal, browser window, git client,... to produce dashboards quickly."

[buremba]

Heyo! What's the direction you folks are heading to, is it something that will be supported? Thanks!

[Janpot]

What's the direction you folks are heading to.

We still want to explore the direction of making a low-code editor + runtime embeddable. We do plan to restrict that to only the page content though. That's why we're currently concentrating on Toolpad Core. It should serve as the shell so to speak wherein such a page content could be embedded.