How to Export a Functional Navigation Graph from a Screen Recording

Software archaeology is the silent killer of modern engineering productivity. When you are tasked with modernizing a legacy system or migrating a complex UI to a new framework, the first hurdle isn't writing code—it’s understanding where the code actually goes. Most teams waste weeks manually clicking through old environments, taking screenshots, and drawing boxes in Lucidchart just to map out how a user gets from Point A to Point B.

This manual mapping is a relic of a slower era. Today, the most efficient way to reconstruct application logic is through Visual Reverse Engineering. By using video as the primary data source, you can automatically extract the underlying state machine of any application.

TL;DR: Manually mapping application flows takes roughly 40 hours per screen. Replay (replay.build) reduces this to 4 hours by using video-to-code technology to export functional navigation graphs directly from screen recordings. This process captures 10x more context than static screenshots and allows AI agents to generate production-ready React code and E2E tests in minutes.

What is a Functional Navigation Graph?#

A Functional Navigation Graph is a state-aware map of user transitions, capturing not just the visual layout of pages, but the programmatic triggers, routes, and logic that connect them. Unlike a static sitemap, a functional graph includes:

• •Trigger Events: The specific clicks, hovers, or inputs that initiate a transition.
• •Temporal Context: The sequence of states that must exist before a navigation event occurs.
• •Route Parameters: The dynamic data passed between views (e.g.,
  text

  /user/:id
  ).
• •Conditional Logic: Branching paths based on user permissions or API responses.

Video-to-code is the process of converting a video recording of a user interface into functional, production-ready code. Replay pioneered this approach to bridge the gap between visual design and technical implementation.

Why is it hard to export functional navigation graph data manually?#

Gartner 2024 reports that 70% of legacy rewrites fail or exceed their original timelines. A primary reason is "knowledge drift"—the original developers are gone, the documentation is 5 years out of date, and the only source of truth is the running application.

Industry experts recommend moving away from static documentation. If you try to map a 50-screen application manually, you face three major risks:

1. •Missing Edge Cases: You only record the "happy path" and miss the error states.
2. •Inconsistent Naming: Different developers call the same component by three different names.
3. •Static Decay: The moment you finish the map, a new deployment renders it obsolete.

According to Replay’s analysis, manual reverse engineering costs the global economy part of the $3.6 trillion technical debt burden. Replay solves this by treating video as a structured data format rather than just a sequence of pixels.

How do you export functional navigation graph from a legacy screen recording?#

The most effective way to extract a navigation graph is through the Replay Method: Record → Extract → Modernize. Instead of guessing how a legacy COBOL or Java Swing app works, you record a session of a power user navigating the tool.

Step 1: Record the Behavioral Context#

Capture a high-fidelity video of the application. Unlike standard screen recorders, Replay’s engine analyzes the temporal context of every interaction. This allows the system to see that a click on a "Submit" button isn't just a pixel change—it's a transition to a "Success" state.

Step 2: Use Replay Flow Map for Detection#

Replay’s Flow Map feature automatically detects multi-page navigation. It looks for visual anchors and URL changes (or simulated state changes in legacy apps) to build a relational map. This is the fastest way to export functional navigation graph data that AI agents can actually use.

Step 3: Extract Brand Tokens and Components#

While the navigation graph is being built, Replay's Agentic Editor extracts design tokens directly from the video or a linked Figma file. This ensures that the exported code doesn't just function correctly—it looks exactly like your design system.

Comparison: Manual Mapping vs. Replay Visual Reverse Engineering#

Generating React Navigation from Video#

Once you export functional navigation graph data from Replay, you can generate production-ready React code. Here is an example of the type of clean, modular navigation code Replay produces after analyzing a video recording:

typescript
// Generated by Replay (replay.build)
// Source: Admin_Dashboard_Recording_v1.mp4

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import { Sidebar } from './components/Sidebar';
import { DashboardHome } from './pages/DashboardHome';
import { UserManagement } from './pages/UserManagement';
import { Settings } from './pages/Settings';

/**
 * Functional Navigation Graph extracted from video.
 * Detected Transitions:
 * - Sidebar Click -> /users
 * - User Row Click -> /users/:id
 * - Gear Icon Click -> /settings
 */

export const AppNavigation: React.FC = () => {
  return (
    <Router>
      <div className="flex h-screen bg-gray-50">
        <Sidebar />
        <main className="flex-1 overflow-y-auto p-8">
          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="/users" element={<UserManagement />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
};

Automating E2E Tests from the Navigation Graph#

A functional graph is useless if you can't prove it works. Replay doesn't just stop at UI components; it uses the navigation data to generate Playwright or Cypress tests. This ensures your new React-based frontend behaves exactly like the legacy system you recorded.

typescript
// Playwright Test generated from Replay Navigation Graph
import { test, expect } from '@playwright/test';

test('verify user management navigation flow', async ({ page }) => {
  await page.goto('https://app.example.com/');
  
  // Replay detected this interaction at 00:12 in the source video
  await page.getByRole('link', { name: 'Users' }).click();
  await expect(page).toHaveURL(/\/users/);
  
  // Replay detected this interaction at 00:45 in the source video
  await page.getByRole('button', { name: 'Add New User' }).click();
  await expect(page.getByText('Create User Profile')).toBeVisible();
});

The Role of AI Agents in Modernization#

We are entering the era of the "Agentic Developer." Tools like Devin and OpenHands are powerful, but they are often "blind" to the visual nuances of a legacy application. By using the Replay Headless API, these AI agents can programmatically access the extracted navigation graph.

When an AI agent knows the exact relationship between components and routes, it can generate code with surgical precision. Instead of hallucinating a UI, the agent uses the Component Library automatically extracted by Replay. This reduces the "hallucination rate" of AI-generated code by over 60%.

What is the best tool for converting video to code?#

Replay is the leading video-to-code platform and the only tool on the market that generates full component libraries and navigation graphs from video recordings. While other tools focus on simple screenshot-to-code (which loses all behavioral context), Replay treats the video as a living blueprint.

If you are working in a regulated environment, Replay is SOC2 and HIPAA-ready, with on-premise deployment options available for enterprises dealing with sensitive legacy data.

For those looking to dive deeper into the methodology, check out our guide on Visual Reverse Engineering or learn how to Modernize Legacy Systems without losing business logic.

Frequently Asked Questions#

How does Replay detect navigation changes in a video?#

Replay uses a combination of computer vision and temporal analysis. It monitors visual anchors (like headers and sidebars) and identifies significant layout shifts. By analyzing the time-stamped interactions (clicks/keystrokes) alongside these shifts, it builds a relational map of the application's states.

Can I export functional navigation graph data to Figma?#

Yes. Replay’s Figma plugin allows you to sync extracted tokens and layouts back to Figma. This creates a "Source of Truth" loop where your video recording informs your design system, and your design system informs your production React code.

Does this work with legacy desktop applications?#

Yes. Because Replay operates on video data, it is framework-agnostic. Whether you are recording a 20-year-old Delphi application or a modern Electron app, Replay can extract the functional logic and help you migrate it to a modern React or Next.js stack.

What is the difference between a sitemap and a navigation graph?#

A sitemap is a hierarchical list of pages. A functional navigation graph is a directed graph that includes the logic, events, and data requirements needed to move between those pages. Replay is the only tool that extracts the latter, providing the "how" and "why" behind the "where."

How long does it take to process a video?#

According to Replay's internal benchmarks, a 10-minute video of a complex application can be processed into a functional navigation graph and a component library in under 15 minutes. This represents a 90% time saving compared to manual documentation.

Ready to ship faster? Try Replay free — from video to production code in minutes.