> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow UI

To let a user configure a Flow Instance, call the `openConfiguration` method:

```javascript theme={null}
await membrane.connection('hubspot').flow('{FLOW_KEY}').openConfiguration()
```

<br />

### Flow Instance editor

To edit a Flow Instance, call the `openEditor` method:

```javascript theme={null}
await membrane.flowInstance('{FLOW_INSTANCE_ID}').openEditor()
```

<br />

Alternatively, you can embed the Flow Instance editor directly into a specific element:

```javascript theme={null}
function FlowBuilderEmbedding() {
  const targetId = 'flow-builder-emdedding'
  const membrane = useIntegrationApp()
  const targetRef = useRef < HTMLDivElement > null

  useEffect(() => {
    void membrane
      .flowInstance({
        flowKey: parameters.FLOW_KEY,
        integrationKey: parameters.INTEGRATION_KEY,
        autoCreate: true,
      })
      .embedEditor({
        mountTargetSelector: `[data-container-id="${targetId}"]`,
      })
  }, [parameters.FLOW_KEY, parameters.INTEGRATION_KEY, membrane])

  return <div style={{ height: '490px' }} data-container-id={targetId} ref={targetRef}></div>
}
```

<br />

## See Also

<Columns cols={1}>
  <Card title="Custom Flows" href="/reference/workspace-elements/flows/flow-ui/custom-flow-ui" target="_blank">
    Managing tenant flows instances from inside your applications.
  </Card>
</Columns>