Documentation

Learn how to turn your n8n workflows into professional interfaces.

Getting Started

FlowUI works by analyzing the JSON structure of your n8n workflow file. It specifically looks for entry points like Webhooks or Form Triggers to generate the input fields.

Export your workflowIn your n8n editor, open the workflow menu (top right) and select "Download". This gives you a .json file.
Import to FlowUIGo to the Create UI page and upload the JSON file or paste the code directly into the editor.
CustomizeFlowUI automatically detects fields. You can verify the generated form in the "Live Preview" panel.
Deploy(Coming Soon) Save the form and get a public shareable link or embed code for your website.

Preparing Your Workflow

Supported Trigger Nodes

FlowUI currently supports the following trigger nodes for automatic form generation:

Webhookn8n-nodes-base.webhook
Form Triggern8n-nodes-base.formTrigger

Defining Inputs

To ensure FlowUI generates the correct fields, ensure your Webhook node is configured to expect Body Parameters or Query Parameters. FlowUI attempts to infer types (String, Number, Boolean) from sample data if available.

// Example: Webhook Body Expectation

{
  "customer_name": "string",
  "customer_email": "string",
  "quantity": 1,
  "is_urgent": false
}

Best Practices

Use Clear Parameter Names

Avoid cryptic keys like param1. Use descriptive keys like customer_email. FlowUI transforms snake_case to Title Case automatically for labels.

Return Structured Responses

Ensure the last node in your workflow returns a JSON object with a success boolean and a message string for the best user experience.

Secure Your Webhooks

While FlowUI handles the frontend, ensure your n8n instance uses Basic Auth or Header Auth for sensitive workflows to prevent unauthorized access.

Handle Errors Gracefully

Use the "Error Trigger" node in n8n or "Continue On Fail" settings to return friendly error messages if a step (like a database insert) fails.

Security & Privacy

FlowUI runs client-side for the generation phase. We do not store your workflow JSON on our servers unless you explicitly save a form (feature available for signed-in users).

When executing a workflow, requests are proxied securely to avoid CORS issues. Your n8n credentials are never stored in plaintext and are only used for the duration of the session if provided.