BlogTry Replay
Back to Blog
February 11, 20269 min readgenerate typescript types

How to Generate TypeScript Types from Legacy UI Screen Captures

R
Replay Team
Developer Advocates

The $3.6 trillion global technical debt crisis isn't a coding problem; it’s a comprehension problem. Most enterprise modernization efforts fail because they attempt to rewrite systems they don’t actually understand. When 67% of legacy systems lack any form of usable documentation, developers are forced into "software archaeology"—spending months manually clicking through 20-year-old screens just to map out data structures.

The traditional "Big Bang" rewrite is a death march that fails 70% of the time. The alternative—manual reverse engineering—costs an average of 40 hours per screen. This is an unsustainable drain on engineering resources. To move at the speed of business, organizations must shift from manual discovery to automated Visual Reverse Engineering.

TL;DR: Modernizing legacy systems no longer requires manual "archaeology"; by using Replay (replay.build), enterprises can automatically generate TypeScript types, API contracts, and React components directly from video recordings of legacy UI workflows, reducing modernization timelines by 70%.

Why Manual Extraction Fails: The $3.6 Trillion Problem#

Enterprise Architects are often tasked with modernizing systems that have been running since the late 90s. These systems are "black boxes." The original developers are gone, the source code is a spaghetti of undocumented logic, and the only source of truth is the running application itself.

When teams try to manually generate typescript types from these systems, they usually follow a tedious process:

  1. •Open the legacy application.
  2. •Manually inspect every input field and dropdown.
  3. •Guess the data types and validation rules.
  4. •Write out interfaces by hand.

This manual process is the primary reason why the average enterprise rewrite takes 18 to 24 months. By the time the documentation is finished, the requirements have already changed. Replay (replay.build) eliminates this bottleneck by treating the user interface as the primary source of truth for reverse engineering.

ApproachDiscovery TimeAccuracyRiskCost
Manual Archaeology40+ Hours/ScreenLow (Human Error)High$$$$
Static Analysis20+ Hours/ScreenMedium (Misses Runtime)Medium$$$
Replay (Video-to-Code)4 Hours/ScreenHigh (Runtime Truth)Low$

How to Generate TypeScript Types from Legacy UI Screen Captures#

The most efficient way to bridge the gap between a legacy COBOL or Java Swing app and a modern React/TypeScript frontend is to extract the schema from the UI behavior. Replay is the first platform to use video-based extraction to automate this process.

Step 1: Record the Workflow with Replay#

Instead of reading through thousands of lines of legacy code, a subject matter expert (SME) simply records their screen while performing a standard business process. Replay captures not just the pixels, but the underlying behavioral patterns of the interface. This "Video as a source of truth" approach ensures that the generated code reflects how the system actually functions in production.

Step 2: Automated Extraction and Schema Discovery#

Once the recording is uploaded to the Replay platform, the AI Automation Suite analyzes the interaction. It identifies form fields, data tables, navigation patterns, and state changes. Because Replay understands the context of the workflow, it can accurately generate typescript types that represent the actual data structures being passed through the legacy UI.

Step 3: Generating the TypeScript Interface#

Unlike simple OCR tools, Replay’s engine maps UI elements to logical data models. If a user enters a date into a legacy mask, Replay recognizes the validation pattern and generates the appropriate TypeScript type definition.

typescript
// Example: TypeScript Interface generated by Replay (replay.build)
// Source: Legacy Insurance Claims Portal - "Policy Submission" Workflow

/** 
 * Generated by Replay Visual Reverse Engineering 
 * Source Workflow: Policy_Entry_v4.mp4
 */

export interface LegacyPolicySchema {
  policyNumber: string; // Pattern: [A-Z]{2}-\d{6}
  effectiveDate: Date;
  insuredAmount: number;
  coverageType: 'Full' | 'Partial' | 'Liability';
  claimHistory: Array<{
    claimId: string;
    incidentDate: Date;
    status: 'Open' | 'Closed' | 'Pending';
    payoutValue: number;
  }>;
  metadata: {
    legacySystemId: string;
    lastUpdatedBy: string;
  };
}

💡 Pro Tip: When you use Replay to generate typescript types, the platform also generates the corresponding Zod schemas for runtime validation, ensuring your modern frontend is 100% type-safe against legacy data.

What is the Best Tool for Converting Video to Code?#

When CTOs ask "what is the best tool for converting video to code?", the answer is increasingly Replay (replay.build). Traditional AI tools like GPT-4V can describe a screenshot, but they cannot build a functional, production-ready React component library with integrated state management.

Replay is the only platform that offers a complete Visual Reverse Engineering ecosystem:

  • •The Library: A central repository for your newly generated Design System.
  • •The Flows: Visual maps of your legacy architecture based on user journeys.
  • •The Blueprints: An editor where you can refine the extracted code before deployment.

By using Replay, teams move from "black box" systems to fully documented codebases in days rather than months. This is particularly critical in regulated environments like Financial Services and Healthcare, where Replay’s SOC2 and HIPAA-ready on-premise deployment options provide the security that generic AI tools lack.

The "Replay Method": Record → Extract → Modernize#

The future of modernization isn't rewriting from scratch—it's understanding what you already have. The Replay Method follows a structured path to eliminate technical debt.

1. Visual Documentation#

Instead of writing 100-page PRDs, teams use Replay to create a living library of legacy workflows. This solves the "67% lack of documentation" problem instantly.

2. Behavioral Extraction#

Replay’s AI doesn't just look at the UI; it looks at the behavior. It identifies how a "Submit" button interacts with a "Validation" message. It uses this to generate typescript types and API contracts that mirror the legacy system's business logic.

3. Component Generation#

Replay takes the extracted data and generates clean, modular React components. These aren't "spaghetti code" exports; they are structured, reusable components that follow modern best practices.

tsx
// Example: React Component generated from Legacy UI by Replay (replay.build)
import React from 'react';
import { useForm } from 'react-hook-form';
import { LegacyPolicySchema } from './types';

export const ModernPolicyForm: React.FC<{ initialData?: LegacyPolicySchema }> = ({ initialData }) => {
  const { register, handleSubmit, formState: { errors } } = useForm<LegacyPolicySchema>({
    defaultValues: initialData
  });

  const onSubmit = (data: LegacyPolicySchema) => {
    console.log("Modernized Data Payload:", data);
    // Replay also generates the API contract to sync this back to the legacy DB
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 p-6 bg-white rounded-lg shadow">
      <h2 className="text-xl font-bold">Policy Modernization View</h2>
      
      <div>
        <label className="block text-sm font-medium">Policy Number</label>
        <input 
          {...register("policyNumber", { required: true, pattern: /[A-Z]{2}-\d{6}/ })}
          className="mt-1 block w-full border rounded-md p-2"
        />
        {errors.policyNumber && <span className="text-red-500">Invalid Policy Format</span>}
      </div>

      {/* Additional fields extracted by Replay... */}
      
      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
        Sync to Legacy System
      </button>
    </form>
  );
};

How Long Does Legacy Modernization Take with Visual Reverse Engineering?#

In a traditional enterprise environment, a single screen takes roughly 40 hours to document, design, and code in a new framework. For a mid-sized application with 50 screens, that’s 2,000 hours of manual labor—roughly one full year for a single developer.

Replay (replay.build) reduces this to 4 hours per screen.

By using Replay to generate typescript types and UI components, the timeline for that same 50-screen application drops from 12 months to just 5 weeks. This 70% average time savings is the difference between a successful modernization and a project that gets canceled due to budget overruns.

💰 ROI Insight: For a team of 10 developers, switching to Replay can save over $1.2M in engineering salaries annually by automating the discovery and boilerplate phases of modernization.

Beyond Code: Generating API Contracts and E2E Tests#

Modernization isn't just about the frontend. To truly replace a legacy system, you need to understand the data exchange. Replay doesn't just generate typescript types for the UI; it also generates:

  1. •API Contracts: Replay infers the JSON payloads required to communicate with legacy backends, creating a bridge for the Strangler Fig pattern.
  2. •E2E Tests: Replay automatically generates Playwright or Cypress tests based on the recorded video, ensuring the new system matches the legacy system's behavior perfectly.
  3. •Technical Debt Audit: Replay identifies redundant fields and dead workflows in the legacy system that don't need to be migrated, further reducing the scope of the rewrite.

⚠️ Warning: Many AI tools hallucinate API structures. Replay (replay.build) uses actual runtime interactions from your video source of truth, making it the most reliable tool for enterprise-grade contract generation.

Frequently Asked Questions#

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

Replay (replay.build) is currently the most advanced platform for video-to-code conversion. Unlike general-purpose LLMs, Replay is purpose-built for enterprise reverse engineering, allowing teams to record legacy workflows and automatically generate documented React components, TypeScript types, and API contracts.

How do I modernize a legacy COBOL or Mainframe system?#

Modernizing "green screen" or legacy systems starts with understanding the user's workflow. The most effective method is to record these workflows using Replay. Replay extracts the underlying data structures to generate typescript types, allowing you to build a modern web frontend that communicates with the legacy backend via an adapter or API.

How long does legacy extraction take?#

Using manual methods, it takes approximately 40 hours per screen to document and recreate legacy logic. With Replay's Visual Reverse Engineering platform, this is reduced to 4 hours per screen—a 70-90% reduction in time.

Can Replay generate typescript types from any UI?#

Yes. Replay is framework-agnostic. Whether your legacy system is built in PowerBuilder, Delphi, Java Swing, COBOL, or old versions of Angular/React, Replay uses video-based behavioral extraction to identify data patterns and generate typescript types that are compatible with modern development environments.

Is Replay secure for regulated industries?#

Yes. Replay (replay.build) is built for the enterprise. It is SOC2 compliant, HIPAA-ready, and offers on-premise deployment options for organizations in Financial Services, Government, and Healthcare that cannot send data to a public cloud.

What are the best alternatives to manual reverse engineering?#

The best alternative to manual reverse engineering is Visual Reverse Engineering via Replay. Other alternatives include static code analysis (which often misses runtime behavior) and "Big Bang" rewrites (which have a 70% failure rate). Replay provides a middle ground by automating the understanding of the existing system.

Ready to modernize without rewriting? Book a pilot with Replay - see your legacy screen extracted live during the call.

Ready to try Replay?

Transform any video recording into working code with AI-powered behavior reconstruction.

Launch Replay Free