Integrated or standalone?

[zehawki]

I'm afraid I'm not really understanding whats the intent or direction of Toolpad. As mentioned in a number of places, its about making dashboards. Dashboards dont live in isolation - they could be part of existing codebases and deployments,

Re this page: https://mui.com/toolpad/studio/getting-started/installation/#install-toolpad-studio-in-an-existing-project

If one is installing in an existing project, then I would expect to import the package where ever I want, and have it render where I want, inside the router etc. Its really puzzling as to how this is supposed to be integrated.

There are 2 sides to any such tool - editor and view - and these are meant for different audiences - producer and consumer. On the producer side the editor can work standalone off any server. But once a dashboard has been created, the view side must render within whatever already exists. Ideally the YAML file should be the input to render the dashboard, right? I'm unable to figure this out.

Perhaps part of my confusion comes since I dont see a path for plain React deployment - this seems to be meant only for Nextjs? If so, why?

As an example, I have a number of dashboards - https://www.maincross.net/help/hero-dashboard, and more will get created. I see great value in creating these via Toolpad, but I dont have a clue as to how I would do that 😅

[Janpot]

Hi @zehawki let me sketch a bit the direction we have in mind for Toolpad. I think you are quite right in your assessment, let me try to phrase the current situation in your own terms, and the sketch a bit where we envision going:

• 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. The source of truth for these dashboards live in yaml files alongside your project and can be version controlled just like the rest of your code. Importantly as well is that it wants to closely integrate with existing code. Meaning it can drag&drop components you hand-write and it can interface with serverside code directly.
• consumer/view: at the moment Toolpad dashboards are rendered inside the Toolpad server, a self hosted node.js application that can take these yaml files and acts as a http server for a react application that acts as the dashboard. Besides that it is also hostable as a node.js http handler, you can run it in any node.js http server that supports those, like express.js (example).

Perhaps part of my confusion comes since I dont see a path for plain React deployment - this seems to be meant only for Nextjs? If so, why?

The path that we envision for the consumer/view: we'd like to enable you to integrate a Toolpad dashboard inside of a React application. Feel free to upvote and/or chime in on the issue. Eventually we also envision the editor to be embeddable as a React component but likely more on the longer term.

In the meantime we're also exploring a more code-centric way, a high level library to build those dashboards. The ultimate goal would be to have a shared set of primitives that can be used between visually created pages and code-based pages. And have a way to eject visually created pages to real code.