Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Janpot opened this issue Dec 20, 2023 · 4 comments 路 May be fixed by #3125
Open

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

Janpot opened this issue Dec 20, 2023 · 4 comments 路 May be fixed by #3125
Labels
new feature New feature or request waiting for 馃憤 Waiting for upvotes

Comments

@Janpot
Copy link
Member

Janpot commented Dec 20, 2023 •
edited by oliviertassinari

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 馃敠

Benchmark
@Janpot Janpot added new feature New feature or request waiting for 馃憤 Waiting for upvotes labels Dec 20, 2023
@JerryWu1234
Copy link
Contributor

this PR sounds good.
do you have more details?

@Janpot
Copy link
Member Author

Janpot commented Dec 22, 2023

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.

@Janpot Janpot linked a pull request Jan 25, 2024 that will close this issue
Draft
9 tasks
@buremba
Copy link

buremba commented Feb 9, 2024 •
edited

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.

@Janpot Janpot mentioned this issue Apr 4, 2024
Merged
4 tasks
@zehawki
Copy link

zehawki commented Apr 29, 2024 •
edited

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."

@Janpot Janpot mentioned this issue Apr 30, 2024
Merged
@oliviertassinari oliviertassinari changed the title Support Toolpad applications as a server component [studio] Allow to embed a Toolpad Studio page a React component Apr 30, 2024
@oliviertassinari oliviertassinari changed the title [studio] Allow to embed a Toolpad Studio page a React component [studio] Allow to embed a Toolpad Studio page as a React component Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new feature New feature or request waiting for 馃憤 Waiting for upvotes
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Next.js integration: run Toolpad apps as React server components Janpot/mui-toolpad
4 participants
@buremba @Janpot @zehawki @JerryWu1234