A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.
The following properties can be configured in the container:
When employed as the root component, the container offers the following settings:
Message: A valid JSON describing the data sent to the frontend when the process reaches a specific user task.
Expressions (Hide): JavaScript expressions utilized to dynamically hide components based on conditions.
Starting with platform version 3.4.7, the term “Message” has evolved into “Custom UI Payload.” In the context of a User Task containing UI Elements, a significant enhancement has been introduced: when the page is rendered, the Backend (BE) now automatically transmits to the Frontend (FE) all pertinent data as process variables, seamlessly matching keys. This eliminates the need for explicit mentions of data that require pushing, streamlining the configuration process and enhancing overall efficiency.
When the container is not used as the root, you can configure only the Hide Condition property.By leveraging containers, you gain the ability to structure your UI elements efficiently, enhancing the overall design and usability of your application.
Layout - this property is available for components that group children and includes the following options:
Direction - Horizontal / Vertical (for example, select Horizontal)
Justify (H) - (for example, select end)
Align (V) - this option allows you to align components vertically
Gap - you can set the gap between components
More layout demos available below:
Layout Demos
When you apply the above properties, you can generate the following output, with the button appearing on the right side of the container, underneath the form with three form elements:For more information about styling and layout configuration, check the following section:
UI Designer
Last modified on July 7, 2026
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"FlowX.AI","description":"Comprehensive documentation for FlowX.AI, the AI-driven process automation platform.","colors":{"primary":"#fcb813","light":"#fcb813","dark":"#fcb813"},"logo":{"light":"https://mintcdn.com/flowxai/38fXEM0a7v86Lg2m/logo/light.png?fit=max\u0026auto=format\u0026n=38fXEM0a7v86Lg2m\u0026q=85\u0026s=d767c06cef433b0a02f40a1f4f785eab","dark":"https://mintcdn.com/flowxai/38fXEM0a7v86Lg2m/logo/dark.png?fit=max\u0026auto=format\u0026n=38fXEM0a7v86Lg2m\u0026q=85\u0026s=6b8b8c3e7abd17acf6be8bffce4e599d"},"favicon":"https://mintcdn.com/flowxai/VVxnbzjz7JuL1Ngt/favicon2.svg?fit=max\u0026auto=format\u0026n=VVxnbzjz7JuL1Ngt\u0026q=85\u0026s=ef6a780a1ed3894c7b276bcc7b3c6c69","appearance":{"default":"dark","strict":false},"background":{"decoration":"grid","color":{"light":"#f4f4f5","dark":"#0a0b0d"}},"navbar":{"links":[],"primary":{"type":"button","label":"Academy","href":"https://academy.flowx.ai/"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/flowxai","x":"https://x.com/FlowX_ai","youtube":"https://www.youtube.com/@FlowX_AI"},"links":[{"header":"Documentation","items":[{"label":"Introduction","href":"https://docs.flowx.ai/5.9/docs/introduction"},{"label":"Platform overview","href":"https://docs.flowx.ai/5.9/docs/platform-overview/flowx-architecture"},{"label":"Designer","href":"https://docs.flowx.ai/5.9/docs/flowx-designer/overview"},{"label":"AI Platform","href":"https://docs.flowx.ai/5.9/ai-platform/ai-in-flowx"},{"label":"Use the docs with AI","href":"https://docs.flowx.ai/5.9/docs/getting-started/using-flowx-docs-with-ai"},{"label":"Release notes","href":"https://docs.flowx.ai/release-notes/overview"}]},{"header":"Resources","items":[{"label":"FlowX.AI Academy","href":"https://academy.flowx.ai"},{"label":"Support","href":"https://flowxai.zendesk.com/"}]},{"header":"Company","items":[{"label":"About FlowX.AI","href":"https://www.flowx.ai/about"},{"label":"Contact us","href":"mailto:hello@flowx.ai"},{"label":"Careers","href":"https://apply.workable.com/flowxai"}]},{"header":"Legal","items":[{"label":"Privacy Policy","href":"https://www.flowx.ai/privacy-policy"},{"label":"Cookie Policy","href":"https://www.flowx.ai/cookie-policy"},{"label":"Terms and Conditions","href":"https://www.flowx.ai/terms-and-conditions"}]}]},"search":{"prompt":"Search the docs"},"seo":{"metatags":{"zd-site-verification":"94tteg5ir5of8gkb4twzh"}},"fonts":{"heading":{"family":"Sora"},"body":{"family":"Geist"}},"styling":{"eyebrows":"breadcrumbs","codeblocks":"dark","latex":true},"integrations":{"ga4":{"measurementId":"G-CGW0FVK9YM"}},"banner":{"content":"🚀 [See the latest FlowX.AI releases →](/release-notes/overview)","dismissible":true},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"metadata":{"timestamp":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"flowxai","hasAudioNarration":false,"actualSubdomain":"flowxai","customDomains":["docs.flowx.ai"],"gitSource":{"type":"github","owner":"flowx-ai","repo":"flowx-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae84e26305194f113fff5fc","collectionId":"4fd4324d-77a6-460e-a0fe-92cb6d33af40","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae84e26305194f113fff5fc"},"feedback":{"thumbs":true,"contextualFeedback":{"allowEmail":true},"agentFeedback":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae84e26305194f113fff5fc","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Documentation","count":787},{"language":"default","tag":"Building blocks","count":329},{"language":"default","tag":"Platform deep dive","count":257},{"language":"default","tag":"Setup guides","count":191},{"language":"default","tag":"UI Designer","count":140},{"language":"default","tag":"Release notes","count":137},{"language":"default","tag":"Release Notes","count":137},{"language":"default","tag":"Microservices","count":112},{"language":"default","tag":"Core extensions","count":107},{"language":"default","tag":"Nodes","count":88}],"searchSettings":{"isFiltersEnabled":true}},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":true,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"type":"email","email":"learning.team@flowx.ai","showHelpButton":true}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"privacy":{"consentBanner":{"enabled":true}},"googleFontsInlined":true},"customCss":[{"filePath":"custom.css","content":"/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@keyframes fxh-tick-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes fxh-caret-blink{50%{opacity:0}}@keyframes fxh-ln-in{to{opacity:1;transform:none}}@keyframes fxh-rv-in{to{opacity:1;transform:none}}@keyframes fxl-stack-ride{0%{top:0;opacity:0}4%{opacity:1}52%{top:calc(100% - 7px);opacity:1}58%,to{top:calc(100% - 7px);opacity:0}}@keyframes fxl-stack-lit{0%,2%,30%,to{color:var(--fxl-faint)}18%,6%{color:var(--fxl-text)}}@keyframes fxl-stack-tick{0%,2%,30%,to{background:var(--fxl-line)}18%,6%{background:#fcb813}}code,kbd,pre,samp{font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace}#topbar-cta-button{color:#131007!important}.label-version{display:inline-block;font-weight:700;color:#fff;background-color:#007bff;padding:.5px 15px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);font-size:.9em;text-transform:uppercase;letter-spacing:.5px;margin-right:5px;transition:background-color .3s ease;text-decoration:none}.label-version:hover{background-color:#0056b3}#banner{background:linear-gradient(90deg,#0a0b0d 0,#0e1013 55%,#2a2310 100%)!important;border-bottom:1px solid rgba(252,184,19,.3);backdrop-filter:saturate(120%)}#banner a{color:#fcb813!important;text-decoration-color:rgba(252,184,19,.55)!important;transition:opacity .2s ease}#banner a:hover{opacity:.85}:root{--flowx-yellow-50:#fff8e7;--flowx-yellow-200:#ffdf92;--flowx-yellow-400:#ffc739;--flowx-yellow-500:#fcb813;--flowx-yellow-800:#8a5e00;--flowx-yellow-900:#6b4e08;--flowx-neutrals-50:#f7f8f9;--flowx-neutrals-100:#e3e8ed;--flowx-neutrals-200:#cbd1db;--flowx-neutrals-300:#a6b0be;--flowx-neutrals-400:#8390a2;--flowx-neutrals-500:#64748b;--flowx-neutrals-700:#475263;--flowx-neutrals-800:#2a313a;--flowx-neutrals-900:#1d232c;--flowx-blue-50:#e6f0fb;--flowx-blue-200:#8abbed;--flowx-blue-700:#004c99;--flowx-blue-900:#002d5b;--flowx-elevation-m:0 8px 16px #1634621a}.cb-wrap{margin-top:32px}.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.cb-filters input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cb-filters label{cursor:pointer;user-select:none;font-size:12px;line-height:16px;font-weight:600;padding:8px 16px;border-radius:120px;border:1px solid var(--flowx-neutrals-200);color:var(--flowx-neutrals-500);background:0 0;transition:border-color .15s ease,background .15s ease,color .15s ease}.cb-filters label span{margin-left:6px;opacity:.55;font-variant-numeric:tabular-nums}.cb-filters label:hover{border-color:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-filters input:checked+label,.dark .cb-filters input:checked+label{background:var(--flowx-yellow-500);border-color:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-filters input:focus-visible+label{outline:2px solid var(--flowx-yellow-500);outline-offset:2px}.dark .cb-filters label{border-color:var(--flowx-neutrals-700);color:var(--flowx-neutrals-400)}.dark .cb-filters label:hover{border-color:var(--flowx-yellow-400);color:var(--flowx-neutrals-50)}.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}@media (max-width:1024px){.cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.cb-grid{grid-template-columns:1fr}}.cb-wrap:has(#cb-conv:checked) .cb-card:not([data-f~=conversational]),.cb-wrap:has(#cb-cookbook:checked) .cb-card:not([data-f~=cookbook]),.cb-wrap:has(#cb-docs:checked) .cb-card:not([data-f~=docs]),.cb-wrap:has(#cb-guide:checked) .cb-card:not([data-f~=guide]),.cb-wrap:has(#cb-integr:checked) .cb-card:not([data-f~=integrations]),.cb-wrap:has(#cb-pattern:checked) .cb-card:not([data-f~=pattern]),.cb-wrap:has(#cb-tutorial:checked) .cb-card:not([data-f~=tutorial]),.cb-wrap:has(#cb-ui:checked) .cb-card:not([data-f~=ui]){display:none}.cb-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--flowx-neutrals-100);border-radius:16px;background:0 0;text-decoration:none!important;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.cb-card::after{content:\"\\2192\";position:absolute;top:20px;right:24px;font-size:14px;line-height:22px;color:var(--flowx-neutrals-300);transition:color .2s ease,transform .2s ease}.cb-card:hover{transform:translateY(-2px);border-color:var(--flowx-yellow-500);box-shadow:var(--flowx-elevation-m)}.cb-card:hover::after{color:var(--flowx-neutrals-900);transform:translateX(4px)}.dark .cb-card{border-color:var(--flowx-neutrals-800)}.dark .cb-card:hover{border-color:var(--flowx-yellow-400);box-shadow:0 8px 16px rgba(0,0,0,.4)}.dark .cb-card:hover::after,.dark .cb-foot a:hover{color:var(--flowx-yellow-400)}@media (prefers-reduced-motion:reduce){.cb-card,.cb-card::after{transition:none}.cb-card:hover,.cb-card:hover::after{transform:none}}.cb-tags{display:flex;flex-wrap:wrap;gap:6px;padding-right:24px}.cb-tag{font-size:10px;line-height:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:var(--flowx-neutrals-50);color:var(--flowx-neutrals-500)}.cb-tag-tut{background:var(--flowx-yellow-50);color:var(--flowx-yellow-800)}.cb-tag-pat{background:var(--flowx-neutrals-900);color:#fff}.cb-tag-cook{background:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-tag-gui{background:var(--flowx-blue-50);color:var(--flowx-blue-700)}.dark .cb-tag{background:var(--flowx-neutrals-800);color:var(--flowx-neutrals-400)}.dark .cb-tag-tut{background:var(--flowx-yellow-900);color:var(--flowx-yellow-200)}.dark .cb-tag-pat{background:var(--flowx-neutrals-50);color:var(--flowx-neutrals-900)}.dark .cb-tag-cook{background:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.dark .cb-tag-gui{background:var(--flowx-blue-900);color:var(--flowx-blue-200)}.cb-foot a,.cb-title{font-weight:600;color:var(--flowx-neutrals-900)}.cb-title{display:block;font-size:14px;line-height:22px;letter-spacing:-.01em}.dark .cb-foot a,.dark .cb-title{color:var(--flowx-neutrals-50)}.cb-desc{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--flowx-neutrals-500)}.cb-foot span,.dark .cb-desc{color:var(--flowx-neutrals-400)}.cb-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--flowx-neutrals-100);font-size:12px;line-height:16px}.dark .cb-foot{border-top-color:var(--flowx-neutrals-800)}.dark .cb-foot span{color:var(--flowx-neutrals-500)}.cb-foot a{text-decoration:none;border-bottom:1px solid var(--flowx-yellow-500);padding-bottom:1px}.cb-foot a:hover{color:var(--flowx-yellow-800)}#content-area:has(.fxh-hero) #header{display:none}main#content-container:has(.fxh-hero){max-width:none}#content-area:has(.fxh-hero){width:100%!important}#content-area:has(.fxh-hero) #content{max-width:none;margin-top:0}#content-area:has(.fxh-hero) #content div[class*=\"--page-padding\"]{--page-padding:0px}#content-area:has(.fxh-hero) #content>:not(.fxh-hero){max-width:1360px;margin-left:auto;margin-right:auto}.fxh-hero{position:relative;text-align:center}@media (min-width:1024px){.fxh-hero{margin-top:-2.5rem}}.fxh-hero__bg{position:sticky;top:0;z-index:0;height:100dvh;overflow:clip;border-radius:18px;background:#0a0b0d;border:1px solid rgba(255,255,255,.08)}.fxh-hero__bg::after,.fxh-hero__bg::before{content:\"\";position:absolute;pointer-events:none}.fxh-hero__bg::before{inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0,#000 25%,transparent 75%)}.fxh-hero__bg::after{top:-45%;left:25%;width:50%;height:90%;background:radial-gradient(closest-side,rgba(252,184,19,.1),transparent 70%)}.fxh-hero__steps{position:relative;z-index:1;margin-top:-100dvh}.fxh-hero__step{position:relative;min-height:calc(100dvh - 9.5rem);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding:48px clamp(24px,5vw,56px) 96px}.fxh-hero__step:not(:first-child){min-height:72dvh;padding-top:48px;padding-bottom:48px}.fxh-hero--single .fxh-hero__bg{position:absolute;inset:0;height:auto;z-index:0}.fxh-hero--single .fxh-hero__steps{margin-top:0}.fxh-hero--single .fxh-hero__step{min-height:calc(100dvh - 9.5rem)}.fxh-hero--slim .fxh-hero__step{min-height:min(46dvh,480px);padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(40px,6vh,64px)}.fxh-step-title{display:block;font-family:\"Sora\",sans-serif;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#f5f5f0;max-width:20ch;margin:0 auto clamp(18px,3vh,28px)}.fxh-vs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(9px,1.1vw,14px);max-width:min(780px,100%);margin:clamp(14px,3vh,30px) auto 0;padding:0;list-style:none}.fxh-vs li{display:flex;align-items:center;gap:12px;padding:11px clamp(18px,1.6vw,24px);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px}.fxh-vs__no{font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:rgba(255,255,255,.42)}.fxh-vs__name{font-family:\"Sora\",sans-serif;font-size:clamp(12.5px,1.1vw,15px);font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.9)}.fxh-scroll{position:absolute;bottom:clamp(20px,4vh,40px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.42)}.fxh-scroll-line{width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.45),transparent)}.fxh-eyebrow{font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#a3a39a;margin-bottom:28px}.fxh-tick{display:inline-block;width:8px;height:8px;flex-shrink:0;background:#fcb813;animation:fxh-tick-pulse 2.6s ease-in-out infinite}.fxh-title{display:block;font-family:\"Sora\",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:920px;margin:0 auto clamp(20px,3vh,28px);text-wrap:balance}.fxh-line{display:block;font-size:clamp(1.7rem,3.4vw,2.7rem);color:#f5f5f0}.fxh-line--dim{color:rgba(244,245,243,.58);margin-top:.06em}.fxh-amber{color:#fcb813}.fxh-sub{display:block;max-width:62ch;margin:0 auto clamp(20px,3vh,28px);font-size:15px;line-height:1.55;color:#b9b9b1}.fxh-cta,.fxh-ctas{justify-content:center}.fxh-ctas{display:flex;flex-wrap:wrap;gap:12px;position:relative}.fxh-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:12px 22px;border-radius:10px;font-size:15px;font-weight:550;text-decoration:none!important;transition:background .2s ease,border-color .2s ease,color .2s ease}.fxh-cta--primary{background:#fcb813;color:#131007!important;font-weight:640}.fxh-cta--primary:hover{background:#ffc739}.fxh-cta--ghost{border:1px solid rgba(255,255,255,.16);color:#f4f5f3!important}.fxh-cta--ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}.fxh-term,.fxh-term__dots i{border:1px solid rgba(255,255,255,.12)}.fxh-term{position:relative;width:min(680px,100%);margin:clamp(24px,4vh,36px) auto clamp(22px,3.5vh,32px);text-align:left;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.03) 20%,rgba(255,255,255,.01) 60%,rgba(255,255,255,.045) 100%),rgba(10,11,13,.91);box-shadow:0 24px 60px rgba(0,0,0,.5)}.fxh-term__bar{display:flex;align-items:center;gap:16px;padding:14px 22px;font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.12)}.fxh-term__dots{display:inline-flex;gap:7px}.fxh-term__dots i{width:11px;height:11px;border-radius:50%}.fxh-term__body{display:flex;flex-direction:column;gap:14px;padding:24px 26px 26px;font-family:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.fxh-term__body p{margin:0;color:rgba(255,255,255,.72)}.fxh-term__prompt{color:#fcb813;margin-right:8px}.fxh-caret{display:inline-block;width:9px;height:1.05em;margin-left:6px;vertical-align:text-bottom;background:rgba(252,184,19,.85);animation:fxh-caret-blink 1.1s steps(1) infinite}.fxh-term__log{display:grid;gap:5px;align-content:start}.fxh-term__log:empty{display:none}.fxh-term__log .ln{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:rgba(255,255,255,.58);opacity:0;transform:translateY(6px);animation:fxh-ln-in .45s cubic-bezier(.16,1,.3,1) forwards}.fxh-term__log .ok{color:#fcb813;margin-right:8px}.fxh-term__log .t,.fxh-term__ver{color:rgba(255,255,255,.34)}.fxh-term__ver{margin-left:auto}.fxh-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}#footer a[href*=\"utm_campaign=poweredBy\"],.fxh-hero--live .fxh-hero__bg::before{display:none}.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas,.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow,.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll,.fxh-hero--live .fxh-hero__step:first-child .fxh-sub,.fxh-hero--live .fxh-hero__step:first-child .fxh-title{opacity:0;transform:translateY(26px);animation:fxh-rv-in .9s cubic-bezier(.16,1,.3,1) forwards}.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow{animation-delay:.15s}.fxh-hero--live .fxh-hero__step:first-child .fxh-title{animation-delay:.26s}.fxh-hero--live .fxh-hero__step:first-child .fxh-sub{animation-delay:.48s}.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas{animation-delay:.59s}.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll{animation-delay:.92s}@media (max-width:640px){.fxh-hero__step{padding:72px 20px}}@media (prefers-reduced-motion:reduce){.fxh-caret,.fxh-tick{animation:none}.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas,.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow,.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll,.fxh-hero--live .fxh-hero__step:first-child .fxh-sub,.fxh-hero--live .fxh-hero__step:first-child .fxh-title{animation:none;opacity:1;transform:none}}.cb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:640px){.cb-grid--2{grid-template-columns:1fr}}:root{--fxl-mono:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;--fxl-display:\"Sora\", sans-serif;--fxl-ease:cubic-bezier(0.16, 1, 0.3, 1);--fxl-text:#17181b;--fxl-dim:rgba(23, 24, 27, 0.64);--fxl-faint:rgba(23, 24, 27, 0.44);--fxl-line:rgba(24, 24, 27, 0.12);--fxl-line-soft:rgba(24, 24, 27, 0.07);--fxl-amber-text:#8a5e00;--fxl-bg:#f4f4f5;--fxl-panel:#fcfcfd;--fxl-amber-soft:rgba(252, 184, 19, 0.12)}.dark{--fxl-text:#f4f5f3;--fxl-dim:rgba(244, 245, 243, 0.58);--fxl-faint:rgba(244, 245, 243, 0.34);--fxl-line:rgba(255, 255, 255, 0.08);--fxl-line-soft:rgba(255, 255, 255, 0.05);--fxl-amber-text:#fcb813;--fxl-bg:#0a0b0d;--fxl-panel:#0c0e11;--fxl-amber-soft:rgba(252, 184, 19, 0.08)}.fxl-no{display:flex;align-items:center;gap:12px;font-family:var(--fxl-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fxl-faint);margin-top:8px}.fxl-no::after{content:\"\";flex:1;height:1px;background:var(--fxl-line-soft)}.fxl-no+h2{margin-top:10px}.fxl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--fxl-line);border:1px solid var(--fxl-line);border-radius:16px;overflow:hidden}.fxl-cell{position:relative;display:block;background:var(--fxl-panel);padding:clamp(24px,2.6vw,34px);text-decoration:none!important;transition:background .2s ease}.fxl-cell:hover{background:var(--fxl-amber-soft)}.fxl-cell::after{content:\"\\2192\";position:absolute;top:24px;right:26px;font-family:var(--fxl-mono);font-size:14px;color:var(--fxl-faint);transition:color .2s ease,transform .2s ease}.fxl-cell:hover::after{color:var(--fxl-amber-text);transform:translateX(4px)}.fxl-cell__no{display:block;font-family:var(--fxl-mono);font-size:11px;letter-spacing:.2em;color:var(--fxl-amber-text);margin-bottom:14px}.fxl-cell__title{display:block;font-family:var(--fxl-display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fxl-text);margin-bottom:6px}.fxl-cell__desc{display:block;font-size:13.5px;line-height:1.5;color:var(--fxl-dim);max-width:46ch}.fxl-grid--1{grid-template-columns:1fr}.fxl-grid--3{grid-template-columns:repeat(3,1fr)}@media (max-width:1024px){.fxl-grid--3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.fxl-grid,.fxl-grid--3{grid-template-columns:1fr}}.fxl-cell--eval{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:center}.fxl-cell--eval::after{content:none}.fxl-cell--eval:hover{background:var(--fxl-panel)}.fxl-eval__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}.fxl-eval__links a,.fxl-stack{font-family:var(--fxl-mono);font-size:12px}.fxl-eval__links a{color:var(--fxl-amber-text);text-decoration:none!important;border-bottom:1px solid rgba(252,184,19,.45);padding-bottom:1px}.fxl-eval__links a:hover{border-bottom-color:var(--fxl-amber-text)}.fxl-stack{color:var(--fxl-faint)}.fxl-stack__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px 7px 30px;border-bottom:1px solid var(--fxl-line-soft)}.fxl-rails li:last-child,.fxl-stack__row:last-child{border-bottom:none}.fxl-stack__row span:last-child{font-size:10.5px;letter-spacing:.08em;opacity:.8}.fxl-stack__tick{position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:2px;background:var(--fxl-line)}.fxl-stack__client{border:1px solid var(--fxl-line);border-radius:10px;color:var(--fxl-dim)}.fxl-stack__client .fxl-stack__tick{background:#fcb813}.fxl-stack__gw{display:flex;align-items:center;gap:10px;padding:10px 0 10px 30px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}.fxl-stack__gw::after{content:\"\";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--fxl-line) 0 4px,transparent 4px 8px)}.fxl-stack__svc{position:relative;border:1px solid var(--fxl-line);border-radius:10px;overflow:hidden}.fxl-stack__spine{position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--fxl-line)}.fxl-stack__pulse{position:absolute;left:10px;top:0;width:7px;height:7px;border-radius:50%;background:#fcb813;box-shadow:0 0 0 4px rgba(252,184,19,.18);opacity:0;animation:fxl-stack-ride 6.6s linear infinite}.fxl-stack__svc .fxl-stack__row,.fxl-stack__svc .fxl-stack__tick{animation:6.6s linear infinite}.fxl-stack__svc .fxl-stack__row{animation-name:fxl-stack-lit}.fxl-stack__svc .fxl-stack__tick{animation-name:fxl-stack-tick}.fxl-stack__svc .fxl-stack__row:nth-child(4),.fxl-stack__svc .fxl-stack__row:nth-child(4) .fxl-stack__tick{animation-delay:.55s}.fxl-stack__svc .fxl-stack__row:nth-child(5),.fxl-stack__svc .fxl-stack__row:nth-child(5) .fxl-stack__tick{animation-delay:1.1s}.fxl-stack__svc .fxl-stack__row:nth-child(6),.fxl-stack__svc .fxl-stack__row:nth-child(6) .fxl-stack__tick{animation-delay:1.65s}.fxl-stack__svc .fxl-stack__row:nth-child(7),.fxl-stack__svc .fxl-stack__row:nth-child(7) .fxl-stack__tick{animation-delay:2.2s}.fxl-stack__svc .fxl-stack__row:nth-child(8),.fxl-stack__svc .fxl-stack__row:nth-child(8) .fxl-stack__tick{animation-delay:2.75s}.fxl-stack__foot{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}.fxl-rails a:hover,.fxl-stack__bus{color:var(--fxl-amber-text)}@media (prefers-reduced-motion:reduce){.fxl-stack__pulse,.fxl-stack__svc .fxl-stack__row,.fxl-stack__svc .fxl-stack__tick{animation:none}.fxl-stack__svc .fxl-stack__row{color:var(--fxl-dim)}}@media (max-width:768px){.fxl-cell--eval{grid-template-columns:1fr;gap:24px}}.fxl-flow{display:flex;align-items:stretch;gap:14px}.fxl-flow__stage{flex:1;border:1px solid var(--fxl-line);background:var(--fxl-panel);border-radius:14px;padding:20px 22px}.fxl-flow__no{display:block;font-family:var(--fxl-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fxl-amber-text);margin-bottom:10px}.fxl-flow__title{display:block;font-family:var(--fxl-display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fxl-text)}.fxl-flow__desc{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--fxl-dim)}.fxl-flow__arrow{align-self:center;flex-shrink:0;font-family:var(--fxl-mono);font-size:16px;color:var(--fxl-amber-text)}@media (max-width:768px){.fxl-flow{flex-direction:column}.fxl-flow__arrow{transform:rotate(90deg)}}.fxl-rails{list-style:none;padding:0;margin:0;font-family:var(--fxl-mono);font-size:13px;color:var(--fxl-dim)}.fxl-rails li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--fxl-line-soft)}.fxl-rails__state{align-self:center;flex-shrink:0;width:7px;height:7px;border-radius:2px;background:#fcb813}.fxl-rails a{color:var(--fxl-text);text-decoration:none;border-bottom:1px solid rgba(252,184,19,.45);padding-bottom:1px;transition:color .15s ease}.fxl-rails em{margin-left:auto;padding-left:16px;flex-shrink:0;font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--fxl-faint)}.fxl-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none;padding:0;margin:0;background:var(--fxl-line);border:1px solid var(--fxl-line);border-radius:16px;overflow:hidden}.fxl-proc li{background:var(--fxl-bg);padding:clamp(22px,2.4vw,32px);margin:0}.fxl-proc a,.fxl-proc__no{font-family:var(--fxl-mono);color:var(--fxl-amber-text)}.fxl-proc__no{display:block;font-size:11px;letter-spacing:.2em;margin-bottom:16px}.fxl-proc__title{display:block;font-family:var(--fxl-display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--fxl-text);margin-bottom:8px}.fxl-proc__desc{display:block;font-size:13.5px;line-height:1.55;color:var(--fxl-dim)}.fxl-proc a{display:inline-block;margin-top:12px;font-size:12px;text-decoration:none;border-bottom:1px solid rgba(252,184,19,.45);padding-bottom:1px}.fxl-proc a:hover{border-bottom-color:var(--fxl-amber-text)}@media (max-width:1024px){.fxl-proc{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.fxl-proc{grid-template-columns:1fr}}.fxl-reg{border:1px solid var(--fxl-line);background:var(--fxl-panel);border-radius:16px;padding:clamp(16px,2.5vw,28px)}.fxl-reg__hd,.fxl-reg__row{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr 150px 24px;gap:16px;align-items:baseline;font-family:var(--fxl-mono)}.fxl-reg__hd{font-size:11px;letter-spacing:.08em;color:var(--fxl-faint);padding-bottom:10px}.fxl-reg__hd,.fxl-reg__item{border-bottom:1px solid var(--fxl-line-soft)}.fxl-reg__item:last-child{border-bottom:none}.fxl-reg__toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fxl-reg__row{padding:14px 0;cursor:pointer;font-size:12.5px;user-select:none}.fxl-reg__toggle:focus-visible+.fxl-reg__row{outline:2px solid #fcb813;outline-offset:2px}.fxl-reg__type{font-size:10px;letter-spacing:.12em;color:var(--fxl-faint);margin-left:6px}.fxl-reg__type--lts,a.fxl-reg__row:hover .fxl-reg__name{color:var(--fxl-amber-text)}a.fxl-reg__row{text-decoration:none!important;transition:background .15s ease}a.fxl-reg__row:hover{background:var(--fxl-amber-soft)}.fxl-reg__name{color:var(--fxl-text);font-weight:500}.fxl-reg__caps{color:var(--fxl-dim)}.fxl-reg__status{color:var(--fxl-amber-text);white-space:nowrap}.fxl-reg__mark{color:var(--fxl-amber-text);font-size:14px;text-align:right;transition:transform .3s var(--fxl-ease)}.fxl-reg__item:has(.fxl-reg__toggle:checked) .fxl-reg__mark{transform:rotate(45deg)}.fxl-reg__body{display:none;padding:2px 0 18px;font-size:13.5px;line-height:1.6;color:var(--fxl-dim);max-width:72ch}.fxl-reg__item:has(.fxl-reg__toggle:checked) .fxl-reg__body{display:block}.fxl-reg__body p{margin:0 0 8px}.fxl-reg__body strong{color:var(--fxl-text);font-weight:600}@media (max-width:768px){.fxl-reg__hd,.fxl-reg__row{grid-template-columns:1fr 132px 20px;gap:10px}.fxl-reg__caps,.fxl-reg__hd span:nth-child(2){display:none}}.fxl-dgv{display:grid;gap:10px}.fxl-dgv__row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;border:1px solid var(--fxl-line);border-radius:12px;padding:14px 20px}.fxl-dgv__key{font-family:var(--fxl-mono);font-size:12.5px;color:var(--fxl-amber-text)}.fxl-dgv__val{font-size:13.5px;line-height:1.55;color:var(--fxl-dim)}@media (max-width:640px){.fxl-dgv__row{grid-template-columns:1fr;gap:6px}}.fxl-cta{position:relative;overflow:hidden;border-radius:18px;padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);background:#0a0b0d;border:1px solid rgba(255,255,255,.08);text-align:center}.fxl-cta::before{content:\"\";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 100%,#000 25%,transparent 75%);pointer-events:none}.fxl-cta>*{position:relative;z-index:1}.fxl-cta__title{display:block;font-family:var(--fxl-display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#f5f5f0;margin-bottom:12px}.fxl-cta__sub{display:block;font-size:14.5px;color:#b9b9b1;max-width:56ch;margin:0 auto 24px}html.fxl-js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--fxl-ease),transform .6s var(--fxl-ease);transition-delay:calc(var(--i, 0)*.06s)}html.fxl-js .rv.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){html.fxl-js .rv{opacity:1;transform:none;transition:none}.fxl-rails__state{animation:none}}"}],"page":{"pagePath":"3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","slug":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","pageMetadata":{"title":"Container","description":"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.","noindex":true,"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={em:`em`,img:`img`,li:`li`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Card,Heading,Warning}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/ui_designer_container.gif`,alt:``})}),`\n`,_jsx(_components.p,{children:`The following properties can be configured in the container:`}),`\n`,_jsx(Heading,{level:`2`,id:`properties-and-settings`,children:`Properties and settings`}),`\n`,_jsx(Heading,{level:`3`,id:`settings`,children:`Settings`}),`\n`,_jsx(Heading,{level:`4`,id:`when-used-as-root`,children:`When used as root`}),`\n`,_jsx(_components.p,{children:`When employed as the root component, the container offers the following settings:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Message`}),`: A valid JSON describing the data sent to the frontend when the process reaches a specific user task.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Expressions (Hide)`}),`: JavaScript expressions utilized to dynamically hide components based on conditions.`]}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/container_root.png`,alt:``})}),`\n`,_jsxs(Warning,{children:[_jsxs(_components.p,{children:[`Starting with platform version `,_jsx(_components.strong,{children:`3.4.7`}),`, the term “Message” has evolved into “Custom UI Payload.” In the context of a User Task containing UI Elements, a significant enhancement has been introduced: when the page is rendered, the Backend (BE) now automatically transmits to the Frontend (FE) all pertinent data as process variables, seamlessly matching keys. This eliminates the need for explicit mentions of data that require pushing, streamlining the configuration process and enhancing overall efficiency.`]}),_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/container_custom_ui.png`,alt:``})})]}),`\n`,_jsx(Heading,{level:`4`,id:`when-not-used-as-root`,children:`When not used as root`}),`\n`,_jsxs(_components.p,{children:[`When the container is not used as the root, you can configure only the `,_jsx(_components.strong,{children:`Hide Condition`}),` property.`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/ui_designer_container_settings.png`,alt:``})}),`\n`,_jsx(_components.p,{children:`By leveraging containers, you gain the ability to structure your UI elements efficiently, enhancing the overall design and usability of your application.`}),`\n`,_jsx(Heading,{level:`2`,id:`styling`,children:`Styling`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Layout`}),` - this property is available for components that group children and includes the following options:`]}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Direction - Horizontal / Vertical (for example, select `,_jsx(_components.em,{children:`Horizontal`}),`)`]}),`\n`,_jsxs(_components.li,{children:[`Justify (H) - (for example, select `,_jsx(_components.em,{children:`end`}),`)`]}),`\n`,_jsx(_components.li,{children:`Align (V) - this option allows you to align components vertically`}),`\n`,_jsx(_components.li,{children:`Gap - you can set the gap between components`}),`\n`]}),`\n`]}),`\n`]}),`\n`,_jsx(_components.p,{children:`More layout demos available below:`}),`\n`,_jsx(Card,{title:`Layout Demos`,href:`https://tburleson-layouts-demos.firebaseapp.com/#/docs`,icon:`link`}),`\n`,_jsx(_components.p,{children:`When you apply the above properties, you can generate the following output, with the button appearing on the right side of the container, underneath the form with three form elements:`}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/container_styling.png`,alt:``})}),`\n`,_jsx(_components.p,{children:`For more information about styling and layout configuration, check the following section:`}),`\n`,_jsx(Card,{title:`UI Designer`,href:`/3.x/docs/building-blocks/ui-designer/ui-designer#styling`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":"dark","config":{},"pageMetadata":{"title":"Container","description":"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.","noindex":true,"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Properties and settings","slug":"properties-and-settings","depth":2,"children":[{"title":"Settings","slug":"settings","depth":3,"children":[]},{"title":"When used as root","slug":"when-used-as-root","depth":4,"children":[]},{"title":"When not used as root","slug":"when-not-used-as-root","depth":4,"children":[]}]},{"title":"Styling","slug":"styling","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/flowxai/9795f3937492dd76/snippets/zendesk-verification.js","/_mintlify/custom/flowxai/93d12cb97573b7cd/snippets/intro-hero.js","/_mintlify/custom/flowxai/90103fefc8b4bea0/snippets/footer-horizon.js"],"subdomain":"flowxai","siteName":"FlowX.AI","title":"Container - FlowX.AI","relatedPagesConfig":{"enabled":true,"limit":5,"mode":"automatic"},"contextualStarterQuestions":[{"_id":"69ef763b8e68bb64e1857a57","deploymentId":"694954a421c35c020852b639","questionText":"How do I hide components conditionally?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","createdAt":"2026-04-27T14:44:11.710Z","updatedAt":"2026-04-27T14:44:11.710Z","__v":0},{"_id":"69ef763b8e68bb64e1857a56","deploymentId":"694954a421c35c020852b639","questionText":"What is a container component?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","createdAt":"2026-04-27T14:44:11.710Z","updatedAt":"2026-04-27T14:44:11.710Z","__v":0},{"_id":"69ef763b8e68bb64e1857a58","deploymentId":"694954a421c35c020852b639","questionText":"How do I configure container layout?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","createdAt":"2026-04-27T14:44:11.710Z","updatedAt":"2026-04-27T14:44:11.710Z","__v":0}],"navMaps":{"firstHrefInVersion":{"v6.x":{"href":"/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":1},"v5.9.x":{"href":"/5.9/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":1},"v5.1.x":{"href":"/5.1/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":1},"v4.7.x":{"href":"/4.7.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":1},"v4.1.x":{"href":"/4.1.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":1,"noindex":true},"v3.x":{"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container","matchLevel":0}},"firstHrefInLanguage":{}},"lastModified":"2026-01-26T18:10:26.775Z","gitLastModified":"2026-07-07T13:31:38.000Z","originalFileLocation":"3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.\">\u003cmeta data-mint-head name=\"application-name\" content=\"FlowX.AI\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003cmeta data-mint-head name=\"robots\" content=\"noindex\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Container - FlowX.AI\">\u003cmeta data-mint-head property=\"og:description\" content=\"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"FlowX.AI\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.flowx.ai/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://flowxai.mintlify.app/_mintlify/api/og/v2?division=Root+components\u0026amp;title=Container\u0026amp;description=A+container+in+Flowx+is+a+versatile+building+block+that+empowers+you+to+group+components+and+arrange+them+as+needed%2C+providing+flexibility+in+UI+design.+It+can+\u0026amp;theme=021ad2ee1834111be160e8a7\u0026amp;signature=865349bb5454b1fb438c4c78de8142ca880a5e6331183218f39a009a42179344\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Container - FlowX.AI\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"A container in Flowx is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://flowxai.mintlify.app/_mintlify/api/og/v2?division=Root+components\u0026amp;title=Container\u0026amp;description=A+container+in+Flowx+is+a+versatile+building+block+that+empowers+you+to+group+components+and+arrange+them+as+needed%2C+providing+flexibility+in+UI+design.+It+can+\u0026amp;theme=021ad2ee1834111be160e8a7\u0026amp;signature=865349bb5454b1fb438c4c78de8142ca880a5e6331183218f39a009a42179344\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"FlowX.AI\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#fcb813\">\u003cmeta data-mint-head name=\"zd-site-verification\" content=\"94tteg5ir5of8gkb4twzh\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.flowx.ai/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"FlowX.AI\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"FlowX.AI","nav":{"global":null,"versions":[{"version":"v6.x","tag":"Preview","pages":[{"title":"v6.x","href":"/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}]},{"version":"v5.9.x","default":true,"tag":"Latest LTS","pages":[{"title":"v5.9.x","href":"/5.9/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}]},{"version":"v5.1.x","tag":"LTS","pages":[{"title":"v5.1.x","href":"/5.1/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}]},{"version":"v4.7.x","tag":"Legacy","pages":[{"title":"v4.7.x","href":"/4.7.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}]},{"version":"v4.1.x","tag":"Legacy","pages":[{"title":"v4.1.x","href":"/4.1.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"}]},{"version":"v3.x","tag":"Legacy","tabs":[{"tab":"Documentation","groups":[{"group":"Getting Started","pages":[{"title":"Introduction","icon":"face-awesome","href":"/3.x/docs/introduction"},{"title":"Building with FlowX.AI","icon":"rocket","href":"/3.x/docs/getting-started/building-your-first-proc"},{"title":"Learn more","icon":"lightbulb","href":"/3.x/docs/getting-started/learn-more"}]},{"group":"Platform overview","pages":[{"group":"Frameworks and standards","icon":"gears","pages":[{"group":"Business process industry and standards","pages":[{"title":"Intro to BPMN","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-bpmn"},{"title":"Intro to DMN","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-dmn"},{"title":"Intro to MVEL","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-mvel"}]},{"group":"Event-driven architecture frameworks","pages":[{"title":"Intro to Kafka concepts","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-kafka-concepts"},{"title":"Intro to Elasticsearch","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-elasticsearch"},{"title":"Intro to Kubernetes","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-kubernetes"},{"title":"Intro to NGINX","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-nginx"},{"title":"Intro to Redis","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-redis"}]}]},{"title":"FlowX.AI architecture","icon":"diagram-project","href":"/3.x/docs/platform-overview/flowx-architecture"}]},{"group":"Building blocks","pages":[{"group":"Process","icon":"network-wired","pages":[{"title":"Process Designer","href":"/3.x/docs/building-blocks/process/process"},{"title":"Process definition","href":"/3.x/docs/building-blocks/process/process-definition"},{"title":"Process instance","href":"/3.x/docs/building-blocks/process/process-instance"},{"title":"Subprocess","href":"/3.x/docs/building-blocks/process/subprocess"},{"title":"Versioning","href":"/3.x/docs/building-blocks/process/versioning"}]},{"group":"Nodes","icon":"circle-nodes","pages":[{"title":"BPMN nodes","href":"/3.x/docs/building-blocks/node/node"},{"title":"Start/end nodes","href":"/3.x/docs/building-blocks/node/start-end-node"},{"title":"Send message/receive message tasks","href":"/3.x/docs/building-blocks/node/message-send-received-task-node"},{"title":"Task node","href":"/3.x/docs/building-blocks/node/task-node"},{"title":"User task node","href":"/3.x/docs/building-blocks/node/user-task-node"},{"title":"Exclusive gateway","href":"/3.x/docs/building-blocks/node/exclusive-gateway-node"},{"title":"Parallel gateway","href":"/3.x/docs/building-blocks/node/parallel-gateway"},{"title":"Milestone nodes","href":"/3.x/docs/building-blocks/node/milestone-node"},{"title":"Subprocess run node","href":"/3.x/docs/building-blocks/node/subprocess-run-node"},{"group":"Message events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/message-events/message-events"},{"title":"Message catch start event","href":"/3.x/docs/building-blocks/node/message-events/message-catch-start-event"},{"group":"Message intermediate events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-intermediate"},{"title":"Message throw intermediate event","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-throw-intermediate-event"},{"title":"Message catch intermediate event","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-catch-intermediate-event"},{"title":"Intermediate message events in business processes","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/example-intermediate-message-events"}]},{"title":"Message catch boundary events","href":"/3.x/docs/building-blocks/node/message-events/message-catch-boundary-event"}]},{"group":"Timer events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/timer-events/timer-events"},{"title":"Timer start event (interrupting)","href":"/3.x/docs/building-blocks/node/timer-events/timer-start-event"},{"title":"Timer intermediate event","href":"/3.x/docs/building-blocks/node/timer-events/timer-intermediate-event"},{"title":"Timer boundary event","href":"/3.x/docs/building-blocks/node/timer-events/timer-boundary-event"},{"title":"Timer expressions","href":"/3.x/docs/building-blocks/node/timer-events/timer-expressions"}]}]},{"group":"Actions","icon":"bolt","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/actions/actions"},{"group":"Business rule actions","pages":[{"title":"Business rules types","href":"/3.x/docs/building-blocks/actions/business-rule-action/business-rule-action"},{"title":"Configuring a DMN business rule action","href":"/3.x/docs/building-blocks/actions/business-rule-action/dmn-business-rule-action"}]},{"title":"Send data to user interface","href":"/3.x/docs/building-blocks/actions/send-data-to-user-interface"},{"title":"Upload file action","href":"/3.x/docs/building-blocks/actions/upload-file-action"},{"title":"Start subprocess action","href":"/3.x/docs/building-blocks/actions/start-subprocess-action"},{"title":"Append params to parent process","href":"/3.x/docs/building-blocks/actions/append-params-to-parent-process"},{"title":"Kafka send action","href":"/3.x/docs/building-blocks/actions/kafka-send-action"}]},{"group":"UI Designer","icon":"paintbrush","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/ui-designer/ui-designer"},{"group":"Root components","pages":[{"title":"What are root components?","description":"Root components, also known as layout elements, are used to group different types of components, each serving a specific purpose","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/root-components"},{"title":"Container","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"},{"title":"Card","description":"A card in Flowx is a graphical component designed for the purpose of grouping and aligning various elements. It offers added functionality by incorporating an accordion feature, allowing users to expand and collapse content as needed.","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card"},{"title":"Custom component","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/custom"}]},{"group":"Collections UI elements","pages":[{"title":"Collection","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection"},{"title":"Collection prototype","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection_prototype"}]},{"group":"Form elements","pages":[{"title":"Input","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field"},{"title":"Text area","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/text-area"},{"title":"Select","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field"},{"title":"Checkbox","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/checkbox-form-field"},{"title":"Radio","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/radio-form-field"},{"title":"Switch","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field"},{"title":"Datepicker","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/datepicker-form-field"},{"title":"Slider","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/slider"},{"title":"Segmented button","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/segmented-button"}]},{"title":"Buttons","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/buttons"},{"title":"File preview","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/file-preview"},{"title":"Image","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/image"},{"title":"Indicators","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/indicators"},{"title":"Typography","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography"},{"title":"UI actions","href":"/3.x/docs/building-blocks/ui-designer/ui-actions"},{"title":"Validators","href":"/3.x/docs/building-blocks/ui-designer/validators"},{"title":"Dynamic \u0026 computed values","href":"/3.x/docs/building-blocks/ui-designer/dynamic-and-computed-values"},{"title":"Layout configuration","href":"/3.x/docs/building-blocks/ui-designer/layout-configuration"}]},{"title":"Token","icon":"coins","href":"/3.x/docs/building-blocks/token"},{"title":"Supported scripts","icon":"file-code","href":"/3.x/docs/building-blocks/supported-scripts"}]},{"group":"FlowX.AI Designer","pages":[{"title":"FlowX.AI Designer","icon":"pen-ruler","href":"/3.x/docs/flowx-designer/overview"},{"group":"Managing a process flow","icon":"arrow-progress","pages":[{"title":"Creating a new process definition","href":"/3.x/docs/flowx-designer/managing-a-process-flow/creating-a-new-process-definition"},{"title":"Adding a new node","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-a-new-node"},{"title":"Adding an action to a node","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-an-action-to-a-node"},{"title":"Handling decisions in the flow","href":"/3.x/docs/flowx-designer/managing-a-process-flow/handling-decisions-in-the-flow"},{"title":"Adding more flow branches","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-more-flow-branches"},{"title":"Creating a user interface","href":"/3.x/docs/flowx-designer/managing-a-process-flow/creating-a-user-interface"},{"title":"Moving a token backwards in a process","href":"/3.x/docs/flowx-designer/managing-a-process-flow/moving-a-token-backwards-in-a-process"},{"title":"Exporting / importing a process definition","href":"/3.x/docs/flowx-designer/managing-a-process-flow/export-import-a-process-definition"},{"title":"Initiating processes","href":"/3.x/docs/flowx-designer/managing-a-process-flow/starting-a-process"}]}]},{"group":"Platform deep dive","pages":[{"group":"Core components","icon":"puzzle","pages":[{"title":"FlowX Engine","href":"/3.x/docs/platform-deep-dive/core-components/flowx-engine"},{"title":"Advancing controller","href":"/3.x/docs/platform-deep-dive/core-components/advancing-controller"},{"title":"Events gateway","href":"/3.x/docs/platform-deep-dive/core-components/events-gateway"}]},{"group":"Core extensions","icon":"puzzle-piece","pages":[{"group":"Content management","pages":[{"title":"FlowX CMS","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/content-management"},{"title":"Enumerations","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/enumerations"},{"title":"Substitution tags","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/substitution-tags"},{"title":"Content models","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/content-models"},{"title":"Languages","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/languages"},{"title":"Source systems","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/source-systems"},{"title":"Media library","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/media-library"},{"title":"Fonts management","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/font-files"}]},{"title":"Generic parameters","href":"/3.x/docs/platform-deep-dive/core-extensions/generic-parameters"},{"title":null,"href":"/3.x/docs/platform-deep-dive/core-extensions/license-engine"},{"title":"Audit","href":"/3.x/docs/platform-deep-dive/core-extensions/audit"},{"title":"Scheduler","href":"/3.x/docs/platform-deep-dive/core-extensions/scheduler"},{"title":"Search data","href":"/3.x/docs/platform-deep-dive/core-extensions/search-data-service"},{"group":"Integration management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/core-extensions/integration-management/integration-management-overview"},{"title":"Access rights for Integration management","href":"/3.x/docs/platform-deep-dive/core-extensions/integration-management/configuring-access-rights-for-intgr-mngmnt"}]}]},{"group":"Plugins","icon":"puzzle-piece-simple","pages":[{"title":"FlowX custom plugins","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins"},{"group":"Documents plugin","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/documents-plugin-overview"},{"title":"Generating documents","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/generating-from-html-templates"},{"title":"Managing templates","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/managing-html-templates"},{"title":"Uploading a new document","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/uploading-a-new-document"},{"title":"Converting files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/converting-documents-to-different-formats"},{"title":"Splitting documents","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/splitting-a-document"},{"title":"Deleting files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/deleting-a-file"},{"title":"Getting URLs","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/getting-urls-to-documents"},{"title":"Listing stored files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/listing-stored-files"}]},{"group":"Notifications plugin","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/notifications-plugin-overview"},{"title":"Managing notification templates","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/managing-notification-templates"},{"title":"Sending a notification","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/sending-a-notification"},{"title":"Sending an email","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/sending-an-email-with-attachments"},{"title":"Forwarding notifications","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/forwarding-notifications-to-an-external-system"},{"group":"OTP flow","pages":[{"title":"Handling OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/otp-flow"},{"title":"Generate OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/generate-otp"},{"title":"Validate OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/validate-otp"}]}]},{"group":"Task management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/task-management-overview"},{"title":"Using allocation rules","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-allocation-rules"},{"title":"Using hooks","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-hooks"},{"title":"Using out of office records","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-out-of-office-records"},{"title":"Using stages","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-stages"}]},{"title":"OCR plugin","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/ocr-plugin"},{"group":"Customer management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/customer-management/customer-management-overview"},{"title":"Business flow example","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/customer-management/crm-plugin-example"}]},{"group":"Reporting plugin","pages":[{"title":"Reporting overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/reporting/reporting-overview"},{"title":"Authorization \u0026 access roles","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/reporting/access-and-authorization"}]},{"title":"WYSIWYG editor","href":"/3.x/docs/platform-deep-dive/plugins/wysiwyg"}]},{"group":"Integrations","icon":"link","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/integrations/integrations-overview"},{"title":null,"href":"/3.x/docs/platform-deep-dive/integrations/building-a-connector"},{"title":"Creating a Kafka consumer","href":"/3.x/docs/platform-deep-dive/integrations/creating-a-kafka-consumer"},{"title":"Creating a Kafka producer","href":"/3.x/docs/platform-deep-dive/integrations/creating-a-kafka-producer"},{"title":"Mock integrations","href":"/3.x/docs/platform-deep-dive/integrations/mock-integrations"},{"title":"Jaeger setup for microservices","href":"/3.x/docs/platform-deep-dive/integrations/jaeger-setup-for-microservices"}]},{"title":"Third-party components","icon":"cube","href":"/3.x/docs/platform-deep-dive/third-party-components"},{"group":"User roles management","icon":"user","pages":[{"title":"Swimlanes","href":"/3.x/docs/platform-deep-dive/user-roles-management/swimlanes"},{"title":"Business filters","href":"/3.x/docs/platform-deep-dive/user-roles-management/business-filters"}]}]},{"group":"API reference","pages":[{"title":"Process status","api":"GET {ENGINE_URL}/api/process/{PROCESS_INSTANCE_ID}/status","href":"/3.x/docs/api/rest"},{"title":"Start process","api":"POST {ENGINE_URL}/api/process/{PROCESS_DEFINITION_NAME}/start","href":"/3.x/docs/api/rest2"},{"title":"Start process and inherit values","api":"POST {ENGINE_URL}/api/process/{PROCESS_DEFINITION_NAME}/start/inheritFrom/{RELATED_PROCESS_INSTANCE_UUID}","href":"/3.x/docs/api/rest3"},{"title":"Execute action","api":"POST {ENGINE_URL}/api/process/{PROCESS_INSTANCE_ID}/token/{TOKEN_INSTANCE_ID}/action/{ACTION_NAME}/execute","href":"/3.x/docs/api/rest4"},{"title":"List buckets","api":"GET documentURL/internal/storage/buckets","href":"/3.x/docs/api/list-buckets"},{"title":"List objects in a bucket","api":"GET documentURL/internal/storage/buckets/{BUCKET_NAME}","href":"/3.x/docs/api/list-objects-in-buckets"},{"title":"Download a file","api":"GET documentURL/internal/storage/download","href":"/3.x/docs/api/download-file"},{"title":"Add new Kafka exchange mock","api":"GET {MOCK_ADAPTER_UR}/api/kafka-exchanges/","href":"/3.x/docs/api/add-kafka-mock"},{"title":"View Kafka exchanges","api":"GET {MOCK_ADAPTER_UR}L/api/kafka-exchanges/","href":"/3.x/docs/api/view-kafka-exchanges"}]}]},{"tab":"Release notes","pages":[{"title":"Release notes","href":"/release-notes/overview"}]},{"tab":"SDKs","pages":[{"title":"SDKs","href":"/3.x/sdks/sdks-overview"}]},{"tab":"Setup guides","pages":[{"title":"Setup guides","href":"/3.x/setup-guides/setup-guides-overview"}]}]}]},"basePath":"","title":"Container - FlowX.AI","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["10e4515597","a74be98ba7"],"chunks":["BannerMarkdown-CX_qQQOL.js","dist-BTZUMDnx.js","lib-DuNMoZ05.js","lib-B8HbPgcC.js","clsx-xpJZXxdP.js","html-void-elements-mCSPHezU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}