feat: Flow Builder iframe embed (POC) by patcapulong · Pull Request #217 · lightsparkdev/grid-api

patcapulong · 2026-02-20T23:02:21Z

Summary

Adds "Build your flow" tab with an embedded iframe pointing to the Grid flow visualizer
Updates homepage banner CTA from sandbox access to flow builder ("Ready to build? Get the API calls for your exact use case")
Adds OG image and metadata for link previews
Adds CSS for full-viewport iframe embed with hidden page chrome

Files changed

mintlify/flow-builder.mdx — New page with iframe embed + theme sync
mintlify/docs.json — "Build your flow" tab + page-hiding CSS
mintlify/index.mdx — Homepage banner copy + link update
mintlify/style.css — Iframe and flow builder layout styles
mintlify/images/og/og-flow-builder.png — OG image

Test plan

Verify "Build your flow" tab loads the iframe correctly
Verify homepage banner links to /flow-builder
Verify theme sync (light/dark) between docs and iframe
Check link preview metadata (title, description, OG image)
Test mobile responsiveness

🤖 Generated with Claude Code

- New flow-builder.mdx with iframe embedding the visualizer - Bidirectional theme sync via postMessage with theme-request handshake - Full-bleed fixed container (desktop 112px, mobile 120px offset) - Hide Mintlify chrome: header, page title, pagination, breadcrumb text - Replace breadcrumb with hamburger + (0, 0, 0) label - Prevent outer page scroll when flow-builder is active - Kill Mintlify's aspect-ratio wrapper on iframe - Flash prevention via document.write in head.raw Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace sandbox access CTA with flow builder entry point: "Ready to build? Get the API calls for your exact use case" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Title: "Build your flow" → "Build your flow - Grid API Documentation" Description: removed "payment" to reflect broader use cases Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

greptile-apps · 2026-02-20T23:06:17Z

Greptile Summary

Added Flow Builder iframe embed page with theme synchronization between docs and embedded visualizer, updated homepage CTA to promote the new flow builder tool, and added OG metadata for link previews.

Key changes:

New /flow-builder page embeds Grid visualizer with bidirectional theme sync
Homepage banner now promotes "Build your flow" instead of sandbox access
Page-hiding CSS ensures full-viewport iframe experience without docs chrome
Mobile-responsive layout with adjusted navbar heights

Issues found:

React.useEffect usage violates style guide and will break Mintlify's acorn parser
postMessage security: missing origin validation allows any site to send/receive theme messages

Confidence Score: 2/5

This PR has critical syntax issues that will break Mintlify rendering and security vulnerabilities in postMessage handling
The use of React.useEffect violates documented style guide rules and will cause Mintlify's acorn parser to fail, preventing the page from rendering. Additionally, the postMessage implementation lacks origin validation, creating security vulnerabilities. These are blocking issues that must be resolved before merge.
mintlify/flow-builder.mdx requires immediate attention for React.useEffect removal and postMessage security fixes

Important Files Changed

Filename	Overview
mintlify/flow-builder.mdx	New Flow Builder page with iframe embed and theme sync - violates style guide by using React.useEffect, has postMessage security issues
mintlify/docs.json	Added "Build your flow" tab navigation and page-hiding CSS for flow-builder page
mintlify/index.mdx	Updated homepage banner CTA from sandbox access to flow builder with new copy and link
mintlify/style.css	Added full-viewport iframe styles with responsive layout and mobile breadcrumb customization
mintlify/images/og/og-flow-builder.png	Added OG image for flow builder page (243KB PNG)

Sequence Diagram

sequenceDiagram
    participant Docs as Mintlify Docs
    participant Iframe as Flow Builder Iframe
    
    Note over Docs,Iframe: Initial Theme Setup
    Docs->>Docs: Detect theme (dark/light)
    Docs->>Iframe: Set src with theme param
    Iframe->>Docs: postMessage: theme-request
    Docs->>Iframe: postMessage: theme-sync
    
    Note over Docs,Iframe: User Changes Theme in Docs
    Docs->>Docs: MutationObserver detects class change
    Docs->>Iframe: postMessage: theme-sync
    Iframe->>Iframe: Update iframe theme
    
    Note over Docs,Iframe: User Changes Theme in Iframe
    Iframe->>Docs: postMessage: theme-sync
    Docs->>Docs: Toggle dark class
    Docs->>Docs: Ignore next mutation (flag set)
    Docs->>Iframe: postMessage: theme-sync (from observer)

_{Last reviewed commit: 177c63e}

greptile-apps

_{5 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-02-20T23:06:21Z

mintlify/flow-builder.mdx

+  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();
+    };
+  }, []);


Using React.useEffect breaks Mintlify's acorn parser per CLAUDE.md style guide. Replace with initialization code that doesn't use useEffect.

Context Used: Context from dashboard - CLAUDE.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: mintlify/flow-builder.mdx Line: 11-51 Comment: Using `React.useEffect` breaks Mintlify's acorn parser per CLAUDE.md style guide. Replace with initialization code that doesn't use `useEffect`. **Context Used:** Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=21abe025-35ab-4ae8-a4a1-0071c2ac3b98)) How can I resolve this? If you propose a fix, please make it concise.

this is wrong BTW, mintlify's own examples use useEffect https://www.mintlify.com/docs/customize/react-components#example-2

this was an old rule i added out of caution from a debugging session. i'll remove it

greptile-apps · 2026-02-20T23:06:22Z

mintlify/flow-builder.mdx

+      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 }, '*');


Using '*' as targetOrigin in postMessage allows any window to receive the message. Should validate and use specific origin like 'https://grid-visualizer-opal.vercel.app'.

Prompt To Fix With AI

This is a comment left during a code review. Path: mintlify/flow-builder.mdx Line: 21 Comment: Using `'*'` as targetOrigin in `postMessage` allows any window to receive the message. Should validate and use specific origin like `'https://grid-visualizer-opal.vercel.app'`. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-02-20T23:06:23Z

mintlify/flow-builder.mdx

+    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');
+        }
+      }
+    };


Message handler doesn't validate e.origin before processing messages, allowing any site to send theme-sync commands. Add origin check like if (e.origin !== 'https://grid-visualizer-opal.vercel.app') return;.

Prompt To Fix With AI

This is a comment left during a code review. Path: mintlify/flow-builder.mdx Line: 25-38 Comment: Message handler doesn't validate `e.origin` before processing messages, allowing any site to send theme-sync commands. Add origin check like `if (e.origin !== 'https://grid-visualizer-opal.vercel.app') return;`. How can I resolve this? If you propose a fix, please make it concise.

patcapulong and others added 6 commits February 20, 2026 14:36

chore: point iframe src to production Vercel URL

72a0cae

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: update homepage banner to promote flow builder

07305c5

Replace sandbox access CTA with flow builder entry point: "Ready to build? Get the API calls for your exact use case" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: add OG image for flow builder page

92b4cb4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: update flow builder title and description for link previews

eb271e9

Title: "Build your flow" → "Build your flow - Grid API Documentation" Description: removed "payment" to reflect broader use cases Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge branch 'main' into feat/iframe-embed-poc

177c63e

mintlify bot deployed to staging - mintlify February 20, 2026 23:03 View deployment

mintlify bot deployed to staging - mintlify February 20, 2026 23:04 View deployment

greptile-apps bot reviewed Feb 20, 2026

View reviewed changes

pengying approved these changes Feb 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: Flow Builder iframe embed (POC)#217

feat: Flow Builder iframe embed (POC)#217
patcapulong wants to merge 6 commits intomainfrom
feat/iframe-embed-poc

patcapulong commented Feb 20, 2026

Uh oh!

greptile-apps bot commented Feb 20, 2026

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Feb 20, 2026

Uh oh!

patcapulong Feb 21, 2026

Uh oh!

greptile-apps bot Feb 20, 2026

Uh oh!

greptile-apps bot Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

patcapulong commented Feb 20, 2026

Summary

Files changed

Test plan

Uh oh!

greptile-apps bot commented Feb 20, 2026

Greptile Summary

Confidence Score: 2/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

patcapulong Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants