Integrate Windmill flows in React application
Hello we are building an enterprise level solution, and we have a screen of workflows in our dashboard and we want to implement Windmill flow in our react application. What are the best way to do it? Also what will be required to implement it? If someone can help me out then I will be really grateful.
18 Replies
Looking forward
@windmill
Can you explain a bit more how you plan to use windmill? Am I understanding correctly that you're thinking of using windmill as a workflow engine to run jobs on windmill and then trigger them from your react ui and show the results in your react ui?
We do have a workflow page in our dashboard, and we would like to implement a proper workflow module there from there we will show the list of flows, user can edit it delete it and create a new flow. We are using React under the hood.
@fjørdlek
ok then you can basically just use the api: https://app.windmill.dev/openapi.html to interact with windmill
You are suggesting to build the flow editor from scratch using these APIs?
ok, then I misunderstood again. What you want is to expose the windmill flow editor to the users. That would require you to have the whitelabeling license: https://www.windmill.dev/docs/misc/white_labelling
White labeling Windmill | Windmill
Windmill provides a library to embed the entire Windmill app or specific components - such as the Flow editor or the App editor - with a simplified UI into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.
you will then be able to use the flow editor as a react component in your project
Using React SDK?
correct, this will require you to first be an enterprise customer and on top of that the whitelabel license
the openlink api you provided me, I think most of those apis will be available in windmill-client as well? pls confirm?
@fjørdlek
Yes we are on it. But before that we have some queries to address so this is why I am throwing all the questions I have in my mind.
Can you pls confirm this?
Also does windmill provides custom components to build a flow editor from scratch in React?
From React SDK like you suggested about the flow editor, can we customize that flow editor with respect to our branding? after getting the while label license?
Looking forward
@fjørdlek
confirming that windmill-client has the apis available (typescript + python)
yes, you can fully customize and control what you show through props in the react component
How can we do achieve that? sorry for lot of questions but this part is critical for us
that's an example https://windmill-sdk-example.com/, you can find the code for this here: https://github.com/windmill-labs/windmill-whitelabelling-react-webpack?tab=readme-ov-file
GitHub
GitHub - windmill-labs/windmill-whitelabelling-react-webpack
Contribute to windmill-labs/windmill-whitelabelling-react-webpack development by creating an account on GitHub.
Also does windmill provides custom components to build a flow editor from scratch in React? About this question thats not possible right?
Yes I have already setup this repo locally, if we want to change the theme and colors etc then are you suggesting to over ride the current styling?
The UI will remain same right? thats not touchable?
You mean at a lower level, like giving you access to the individual nodes etc. the I think no (maybe @rubenf can share more details). You can use your own theme and apply your own classes to the elements though.
You are suggesting applying own classes and theme directly inside the SDK file right? please confirm.
The FlowBuilder component uses Tailwind CSS and provides the customUi prop for theming. The main styling approaches are importing the default styles, or using the customUi prop, or overriding specific CSS classes targeting the .tailwind.embedded container and internal flow elements.
Do we have any documentation where the details of such components like FlowBuilder are available?
I suppose that will be available after getting while label license right?