Configuration

Customize the embedded FlowStack experience with configuration options.

Props / Options

Property	Type	Default	Description
token	string	Required	JWT authentication token
view	string	'builder'	Which view to render (see Views below)
theme	string	'light'	Color theme: 'light' or 'dark'
locale	string	'en'	Language code (e.g., 'en', 'es', 'fr')
flowId	string	undefined	Open a specific flow for editing
hideNavigation	boolean	false	Hide the FlowStack top navigation bar
hideSidebar	boolean	false	Hide the left sidebar
allowedPieces	string[]	undefined	Restrict available integrations to this list
disabledPieces	string[]	undefined	Hide specific integrations
style	CSSProperties	{}	Inline styles for the container
className	string	''	CSS class for the container

Views

View	Description
'builder'	Flow Builder — visual automation editor
'workflow-builder'	Workflow Builder — n8n-based advanced editor
'flows'	Flows list — all automations with run/edit/delete actions
'connections'	Connections manager — connect and manage app integrations
'runs'	Run history — execution logs and monitoring
'templates'	Templates gallery — browse and install templates

Example: Full Configuration

<FlowStackEmbed
  token={token}
  view="builder"
  theme="dark"
  locale="en"
  hideNavigation={true}
  hideSidebar={false}
  allowedPieces={['gmail', 'slack', 'google-sheets', 'http']}
  style={{ width: '100%', height: '100vh', border: 'none' }}
  onFlowCreated={(flow) => handleFlowCreated(flow)}
  onFlowUpdated={(flow) => handleFlowUpdated(flow)}
  onError={(error) => handleError(error)}
/>

Restricting Integrations

Control which integrations your users can access:

Allow List

Only show specific integrations:

<FlowStackEmbed
  token={token}
  view="builder"
  allowedPieces={['gmail', 'slack', 'google-sheets', 'stripe', 'http']}
/>

Block List

Hide specific integrations (show everything else):

<FlowStackEmbed
  token={token}
  view="builder"
  disabledPieces={['ftp', 'ssh', 'custom-code']}
/>

Responsive Design

The embed SDK is fully responsive. Set the container width and height to control the layout:

// Full viewport
<FlowStackEmbed style={{ width: '100vw', height: '100vh' }} />

// Sidebar panel
<FlowStackEmbed style={{ width: '400px', height: '100%' }} />

// Percentage-based
<FlowStackEmbed style={{ width: '100%', height: '600px' }} />

The builder interface automatically adapts to the available space, collapsing panels and adjusting layouts for smaller viewports.