diff --git a/mintlify/docs.json b/mintlify/docs.json
index b5ef95f7..790fa695 100644
--- a/mintlify/docs.json
+++ b/mintlify/docs.json
@@ -61,6 +61,17 @@
}
]
},
+ {
+ "tab": "Build your flow",
+ "groups": [
+ {
+ "group": "Build your flow",
+ "pages": [
+ "flow-builder"
+ ]
+ }
+ ]
+ },
{
"tab": "Payouts & B2B",
"groups": [
@@ -298,7 +309,7 @@
},
"footer": {},
"head": {
- "raw": "",
+ "raw": "",
"links": [
{
"rel": "preload",
diff --git a/mintlify/flow-builder.mdx b/mintlify/flow-builder.mdx
new file mode 100644
index 00000000..e9fb36a1
--- /dev/null
+++ b/mintlify/flow-builder.mdx
@@ -0,0 +1,67 @@
+---
+title: "Build your flow"
+description: "Design your flow and get the API calls for your exact use case"
+mode: "custom"
+"og:image": "/images/og/og-flow-builder.png"
+---
+
+export const FlowBuilderEmbed = () => {
+ const [src, setSrc] = React.useState(null);
+
+ React.useEffect(() => {
+ const isDark = document.documentElement.classList.contains('dark');
+ setSrc('https://grid-visualizer-opal.vercel.app/?embed=true&theme=' + (isDark ? 'dark' : 'light'));
+
+ let ignoreNextMutation = false;
+
+ const sendTheme = () => {
+ const t = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+ const iframe = document.getElementById('flow-builder-iframe');
+ if (iframe && iframe.contentWindow) {
+ iframe.contentWindow.postMessage({ type: 'theme-sync', theme: t }, '*');
+ }
+ };
+
+ const handleMessage = (e) => {
+ if (e.data && e.data.type === 'theme-request') {
+ sendTheme();
+ return;
+ }
+ if (e.data && e.data.type === 'theme-sync') {
+ const isDark = document.documentElement.classList.contains('dark');
+ const wantsDark = e.data.theme === 'dark';
+ if (isDark !== wantsDark) {
+ ignoreNextMutation = true;
+ document.documentElement.classList.toggle('dark');
+ }
+ }
+ };
+ window.addEventListener('message', handleMessage);
+
+ const obs = new MutationObserver(() => {
+ if (ignoreNextMutation) { ignoreNextMutation = false; return; }
+ sendTheme();
+ });
+ obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+ return () => {
+ window.removeEventListener('message', handleMessage);
+ obs.disconnect();
+ };
+ }, []);
+
+ if (!src) return null;
+
+ return (
+
+ );
+};
+
+
+
+
diff --git a/mintlify/images/og/og-flow-builder.png b/mintlify/images/og/og-flow-builder.png
new file mode 100644
index 00000000..c9c39ae1
Binary files /dev/null and b/mintlify/images/og/og-flow-builder.png differ
diff --git a/mintlify/index.mdx b/mintlify/index.mdx
index 705f87e7..4220aa81 100644
--- a/mintlify/index.mdx
+++ b/mintlify/index.mdx
@@ -132,11 +132,11 @@ export const gridCategories = [
{/* Hero Banner with Sand Dunes Image */}
-
+
- Ready to test? Explore the Grid Sandbox
- Request sandbox access
+ Ready to build? Get the API calls for your exact use case
+ Build your flow
diff --git a/mintlify/style.css b/mintlify/style.css
index 3ebe1fed..1e50c0dc 100644
--- a/mintlify/style.css
+++ b/mintlify/style.css
@@ -3895,3 +3895,85 @@ html.dark .trusted-by-logo {
html.dark .homepage-divider {
border-color: var(--ls-white-06);
}
+
+/* Flow Builder iframe — full bleed */
+#flow-builder-container {
+ position: fixed !important;
+ top: 112px !important;
+ left: 0 !important;
+ width: 100vw !important;
+ height: calc(100dvh - 112px) !important;
+ z-index: 1;
+ aspect-ratio: unset !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ background: var(--ls-gray-100) !important;
+}
+
+html.dark #flow-builder-container {
+ background: var(--ls-gray-975) !important;
+}
+
+#flow-builder-iframe {
+ width: 100% !important;
+ height: 100% !important;
+ border: none !important;
+ aspect-ratio: unset !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+}
+
+/* Kill Mintlify's iframe aspect-ratio wrapper */
+#flow-builder-container > div,
+#flow-builder-container > [style*="aspect-ratio"] {
+ aspect-ratio: unset !important;
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute !important;
+ inset: 0 !important;
+ padding: 0 !important;
+}
+
+#content-area:has(#flow-builder-container) {
+ padding: 0 !important;
+ max-width: 100% !important;
+}
+
+#content-container:has(#flow-builder-container) {
+ max-width: 100% !important;
+ padding: 0 !important;
+}
+
+/* Mobile: logo bar (64px) + breadcrumb bar (56px) = 120px total navbar */
+@media (max-width: 1023px) {
+ #flow-builder-container {
+ top: 120px !important;
+ height: calc(100dvh - 120px) !important;
+ }
+}
+
+/* Prevent outer page scroll when flow-builder is present */
+html:has(#flow-builder-container),
+html:has(#flow-builder-container) body {
+ overflow: hidden !important;
+}
+
+/* Flow Builder mobile breadcrumb — hide text + chevron, keep hamburger, show (0, 0, 0) */
+html:has(#flow-builder-container) #navbar button[class*="h-14"][class*="text-left"] > *:not(:first-child) {
+ display: none !important;
+}
+
+html:has(#flow-builder-container) #navbar button[class*="h-14"][class*="text-left"]::after {
+ content: "(0, 0, 0)";
+ margin-left: auto;
+ font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 10px !important;
+ font-weight: 400;
+ color: var(--ls-gray-400);
+}
+
+html.dark:has(#flow-builder-container) #navbar button[class*="h-14"][class*="text-left"]::after {
+ color: var(--ls-gray-700);
+}
+