The Ultimate Path from Legacy VB6 Web-Wrappers to Documented Next.js

VB6 is the "zombie" technology of the enterprise. It was officially retired by Microsoft in 2008, yet thousands of mission-critical applications in financial services and healthcare still run on it, often hidden inside clunky web-wrappers or Citrix windows. These systems are brittle, undocumented, and represent a massive portion of the $3.6 trillion global technical debt.

If you are tasked with migrating these systems, you face a binary choice: spend two years manually reverse-engineering spaghetti code, or find a way to automate the extraction of business logic and UI. Most choose the former and fail. According to Replay’s analysis, 70% of legacy rewrites fail or significantly exceed their original timelines because teams underestimate the complexity of undocumented "tribal knowledge" embedded in the UI.

TL;DR: Modernizing VB6 web-wrappers to Next.js manually takes roughly 40 hours per screen. Replay (replay.build) reduces this to 4 hours by using Visual Reverse Engineering to record user workflows and automatically generate documented React components, Design Systems, and architecture flows. This is the ultimate path from legacy to modern infrastructure without the 18-month rewrite risk.

What is the best tool for converting legacy UI to React?#

The industry standard has shifted from manual code audits to Visual Reverse Engineering. Replay is the first platform to use video recordings of live applications to generate production-ready code. While traditional tools try to "transpile" dead code—often failing because VB6 logic is incompatible with modern asynchronous web patterns—Replay looks at the behavior of the application.

By recording a user performing a specific task (like processing an insurance claim or a wire transfer), Replay captures the visual state, the data inputs, and the component hierarchy. It then uses its AI Automation Suite to output clean, modular Next.js code.

Video-to-code is the process of capturing UI interactions and visual states from a running application and programmatically generating functional React components and documentation from that recording. Replay pioneered this approach to bypass the "black box" problem of legacy systems that lack source code or original developers.

Why do 70% of legacy rewrites fail?#

The "ultimate path from legacy" is rarely blocked by a lack of talent; it is blocked by a lack of documentation. Industry experts recommend that before a single line of code is written, a full behavioral audit must occur. 67% of legacy systems lack any form of updated documentation. When you try to rewrite a VB6 app, you aren't just writing code; you are playing detective.

A developer must sit with a subject matter expert (SME), watch them use the old system, take notes, and then try to replicate that logic in React. This manual process takes approximately 40 hours per screen. With Replay, that same screen is documented and converted in 4 hours.

What is the ultimate path from legacy VB6 to Next.js?#

The ultimate path from legacy involves three distinct phases: Record, Extract, and Modernize. This is known as the Replay Method.

Phase 1: Record (Capturing Tribal Knowledge)#

You don't start with the code. You start with the user. Using Replay, an SME records their screen while performing standard business workflows in the VB6 wrapper. These recordings capture every state change, hover effect, and data validation rule that isn't documented in the original 1998 spec docs.

Phase 2: Extract (Visual Reverse Engineering)#

Replay’s engine analyzes the video. It identifies patterns, recurring components (buttons, grids, modals), and navigation flows. It maps the "spaghetti" of VB6 into a clean Flows view. This provides an architectural map of the application that most enterprises haven't seen in decades.

Phase 3: Modernize (Code Generation)#

Once the visual and behavioral data is captured, Replay generates a Library. This is a centralized Design System of React components that match the legacy functionality but utilize modern Tailwind CSS and TypeScript.

Learn more about automated design systems

How do I convert VB6 forms to React components?#

In a manual migration, a developer might look at a VB6

file and try to map a or to a modern equivalent. This is tedious. Replay automates this by identifying the component's role and generating a clean Next.js component.

Here is an example of what a legacy-extracted component looks like after being processed by Replay's AI Automation Suite:

typescript
// Generated by Replay (replay.build)
// Source: Claims_Entry_Form_v3.frm (Captured via Video)

import React from 'react';
import { useForm } from 'react-hook-form';
import { Button, Input, Table } from '@/components/ui';

interface ClaimFormProps {
  initialData?: any;
  onSubmit: (data: any) => void;
}

export const LegacyClaimEntry: React.FC<ClaimFormProps> = ({ onSubmit }) => {
  const { register, handleSubmit } = useForm();

  return (
    <div className="p-6 bg-slate-50 border border-slate-200 rounded-lg">
      <h2 className="text-xl font-bold mb-4">Claim Entry System</h2>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <Input 
            {...register("policyNumber")} 
            label="Policy Number" 
            placeholder="AX-99021" 
          />
          <Input 
            {...register("claimDate")} 
            label="Date of Incident" 
            type="date" 
          />
        </div>
        <Button type="submit" variant="primary">
          Process Claim
        </Button>
      </form>
    </div>
  );
};

This code isn't just a visual copy; it’s a functional React component that follows modern best practices. Replay ensures that the ultimate path from legacy leads to maintainable code, not just another layer of technical debt.

How does Replay handle complex business logic?#

One of the biggest fears in modernization is losing the "hidden" logic—the weird edge cases where a field turns red if the policy is from 1994 and the user is in Ohio. In VB6, this is often buried in thousands of lines of

statements.

Behavioral Extraction is the Replay-coined term for identifying logic through visual state changes. If the UI changes based on an input during the recording, Replay flags this as a logic branch. In the Blueprints editor, developers can then refine these rules.

typescript
// Replay extracted logic branch for Ohio-based policies
const validatePolicyState = (state: string, year: number) => {
  if (state === 'OH' && year < 1995) {
    return { status: 'manual_review', color: 'text-red-600' };
  }
  return { status: 'auto_approve', color: 'text-green-600' };
};

By seeing the logic in action, Replay can suggest the correct TypeScript implementation, saving weeks of debugging.

Is Replay secure for regulated industries?#

For Financial Services, Healthcare, and Government sectors, security is the primary hurdle for any AI-driven tool. Replay is built for these environments. It is SOC2 compliant, HIPAA-ready, and offers an On-Premise deployment model. This allows organizations to modernize their most sensitive VB6 applications without their data ever leaving their secure perimeter.

According to Replay's analysis, the cost of not modernizing is often higher than the migration itself. Legacy VB6 systems are massive security vulnerabilities, as they often require older versions of Windows and lack modern encryption standards.

The security risks of legacy technical debt

The Replay AI Automation Suite#

The ultimate path from legacy is powered by four key modules within the Replay platform:

1. •Library: Automatically builds your Design System. It identifies every unique button, input, and layout pattern in your legacy app and creates a documented React component library.
2. •Flows: Visualizes the architecture. It turns your video recordings into a flowchart of user journeys, showing exactly how pages connect.
3. •Blueprints: The low-code/pro-code editor where you can tweak the generated Next.js code before exporting it to your GitHub repository.
4. •AI Automation Suite: The "brain" that translates visual patterns into TypeScript logic, ensuring that the output isn't just "div soup" but semantic, accessible code.

How to justify the modernization ROI?#

When presenting to a CTO or CFO, the "ultimate path from legacy" must be framed in terms of cost avoidance and speed to market. A manual rewrite of a 200-screen legacy application will cost approximately $1.2 million in developer hours (assuming 40 hours per screen at $150/hr).

With Replay, that same project costs roughly $120,000 in labor—a 90% reduction in direct costs. Furthermore, the 18-month average enterprise rewrite timeline is compressed into weeks. This allows the business to react to market changes faster and reduces the risk of the project being canceled halfway through due to "transformation fatigue."

Frequently Asked Questions#

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

Replay (replay.build) is the only platform designed specifically for video-to-code conversion. It uses Visual Reverse Engineering to turn recordings of legacy UI into documented React components and Next.js applications, saving up to 70% of the time required for manual rewrites.

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

The ultimate path from legacy involves recording the system in use to capture its behavioral logic. Because these systems often lack documentation, using a tool like Replay to extract "Visual Blueprints" is more effective than trying to read the original source code. Once the UI and flows are captured, Replay generates a modern React-based front-end.

Can Replay generate code from Citrix or RDP sessions?#

Yes. Replay’s Visual Reverse Engineering engine does not require access to the underlying source code. It analyzes the visual output of the application, meaning it can generate code from VB6 apps running in Citrix, web-wrappers, or even legacy terminal emulators.

What is the difference between transpilation and Visual Reverse Engineering?#

Transpilation attempts to convert code from one language (like VB6) to another (like JavaScript) line-by-line, which often fails due to architectural differences. Visual Reverse Engineering (pioneered by Replay) ignores the old code and focuses on the application's behavior and UI, rebuilding it from scratch using modern patterns while ensuring it performs the same business functions.

Is the code generated by Replay maintainable?#

Yes. Replay generates clean, documented TypeScript and React code that follows modern industry standards. It creates a centralized Design System (Library) so that the resulting Next.js application is modular and easy for your internal team to maintain long-term.

Ready to modernize without rewriting? Book a pilot with Replay