Flow Map
Visual representation of your app's page structure and navigation paths.
Overview
The Flow Map provides a bird's-eye view of your generated application. It shows all pages detected from your video, their relationships, and navigation paths. Think of it as a sitemap that updates in real-time as you add or modify pages.
Node Types
Observed
Pages that were actually shown in your video recording. These have full content generated.
Generated
Pages created via Edit with AI using @PageName syntax. Added after initial generation.
Possible
Navigation items detected but not visited in the video. Click to generate these pages.
Features
View Code
Click on any observed or generated node to view its HTML code in the Code View panel.
Reconstruct Pages
Click on any detected path to reconstruct pages not shown in the original video. The AI generates a new subpage matching your existing design system and connects it to the navigation flow automatically.
Generate New Pages
Click "+ Generate" on possible nodes to create new pages. The AI will match your existing design system.
Navigation Paths
Lines between nodes show how pages are connected via navigation links.
Smart Detection
Flow Map detects pages from multiple patterns: Alpine.js multi-page structures, anchor-based navigation, section IDs, tab/panel patterns, and navigation menu items. Detection covers variables like activeTab, currentPage, selected, view, and section.
How to Access
Click the "Flow" tab in the top toolbar after generating your UI. The Flow Map appears in the left sidebar.
Tips
- Hover over nodes to see page details
- Click a node to navigate to that page in preview
- Use Flow Map to identify missing pages in your app