Using self hosted n8n with react flow frontend

Questions
1

  • Backend: self hosted n8n on railway

  • Frontend: React (react flow, nextjs)

    ISSUE:

  • the react flow output and n8n input for workflow is quite different so a lot of manual conversion.

  • I have to figure out the entire frontend on my own

  • Can not leave react because of the team and management.

    any solution for that.

    #urgent #sos

2

What does the frontend need to do? Build workflows?

3

yes. there are other legacy modules too. Workflow feature is a new addition.

Basically the idea is to have a more simplified UI and support some other nodes (which will be http nodes under the hood) and use n8n for the execution.

We plan to build supporting modules of n8n like credentials too

4

Hi @Rakesh_Gupta,

This is a classic “data transformation” problem. The core issue is that React Flow produces a generic graph structure, while the n8n backend requires a very specific JSON format for its workflows.

The best solution is to create a transformation layer on your frontend.

Solution: Create a Mapper Function

Build a dedicated function in your React app that takes the React Flow JSON as input and outputs the n8n workflow JSON.

Here’s the strategy:

  1. Get the Target Format: Build a simple, representative workflow directly in the n8n UI and export it as JSON. This is the exact structure you need to create.
  2. Map Nodes: In your function, loop through the nodes array from React Flow. For each node, create a corresponding n8n node object, mapping fields like id, position, and crucially, converting your frontend’s form data into n8n’s parameters and credentials structure.
  3. Map Connections: Loop through the edges array from React Flow and convert it into the connections object that n8n expects. You’ll need to map the source, target, sourceHandle, and targetHandle to n8n’s input/output format (e.g., “main”: [[{“node”: “node-id”, “output”: “main”}]]).
  4. Send the Final JSON: Call this mapper function right before you send the data to your backend. Your React app will now be sending a perfectly formatted n8n workflow.

This approach keeps the logic on the frontend, respects your tech stack, and automates the entire conversion process.

5

yes. that’s been the bottle neck for us to have it for all the nodes with config validaitons.

also, any suggestions for supporting modules like credentials, templates, insights. how should I move with that?

also, as an alternative idea, should I take out the frontend package out in a repo, strip the design system and write all the UI stuff as per our design and use as a micro frontend.

which one do you think will be easier to pull out - we are a team of 2, one mid level frontend engineer and one mid level backend engineer.

6

Any one with the idea for this? would be much helpful.