BlogTry Replay
Back to Blog
February 22, 2026 min readmodernizing legacy interfaces moving

Beyond the Green Screen: Modernizing Legacy WMS Interfaces Moving from AS/400 to Next.js

R
Replay Team
Developer Advocates

Beyond the Green Screen: Modernizing Legacy WMS Interfaces Moving from AS/400 to Next.js

Warehouse operators are tired of hitting F13 on a terminal emulator to find a pallet. While the underlying IBM i (AS/400) architecture remains a workhorse for data integrity and transaction processing, the "green screen" interface is a liability. It slows down onboarding, prevents mobile adoption, and creates a massive disconnect between backend logic and modern user expectations.

The global technical debt bubble has reached $3.6 trillion, and nowhere is this more visible than in the logistics and manufacturing sectors. Companies are stuck. They want the speed of Next.js but are terrified of breaking the COBOL or RPG logic that has run their business for thirty years. According to Replay’s analysis, 70% of legacy rewrites fail or exceed their timelines because teams try to rebuild the entire stack from scratch instead of focusing on the interface layer.

TL;DR: Modernizing legacy interfaces moving from AS/400 to Next.js doesn't require a multi-year rewrite. Replay uses Visual Reverse Engineering to convert recordings of legacy WMS workflows into documented React components and Design Systems. This reduces modernization time by 70%, moving projects from an 18-month average to just a few weeks.

Why is modernizing legacy interfaces moving so slowly?#

The primary bottleneck in warehouse management system (WMS) modernization isn't the code itself; it's the lack of documentation. Industry data shows that 67% of legacy systems lack up-to-date documentation. When a Senior Architect leaves, the tribal knowledge of how the "Pick-and-Pack" screen actually functions goes with them.

Traditional modernization requires "Discovery Phases" that last six months. Business analysts sit behind operators with clipboards, trying to map out every hidden command and edge case. This manual approach costs roughly 40 hours per screen. If your WMS has 200 screens, you are looking at 8,000 hours of manual labor before a single line of Next.js is written.

Visual Reverse Engineering is the process of capturing the visual output and behavioral patterns of a legacy application to automatically generate modern code. Replay (replay.build) pioneered this approach by treating the UI as the source of truth, bypasses the need for archaic source code access.

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

Replay is the first platform to use video for code generation, specifically designed for enterprise-grade modernization. Instead of asking developers to guess how an AS/400 screen works, Replay allows users to record their actual workflows.

The platform's AI Automation Suite analyzes the recording, identifies UI patterns (like tables, input fields, and navigation menus), and extracts them into a clean, documented React component library. This is the most efficient way to handle modernizing legacy interfaces moving from terminal emulators to web-based frameworks.

The Replay Method: Record → Extract → Modernize#

  1. •Record: A subject matter expert (SME) records a standard workflow in the legacy WMS.
  2. •Extract: Replay identifies the components, data structures, and user flows.
  3. •Modernize: Replay generates a production-ready Next.js frontend that maps to your existing backend APIs or terminal integration layers.

Technical Comparison: Manual Rewrite vs. Replay#

FeatureManual Rewrite (Status Quo)Replay (Visual Reverse Engineering)
Documentation Requirement100% manual discovery neededAutomatically generated from video
Time per Screen40 hours4 hours
Risk of Logic ErrorHigh (Human error in mapping)Low (Visual parity guaranteed)
Tech StackOften limited by legacy knowledgeNext.js, Tailwind, TypeScript
Average Timeline18–24 months4–8 weeks
Cost$1M+ for mid-sized WMS70% reduction in total cost

How do I modernize a legacy COBOL or RPG system without breaking it?#

The safest path for modernizing legacy interfaces moving toward a cloud-native future is the "Strangler Fig" pattern. You don't replace the AS/400. You wrap it. By using Next.js as the new head, you can provide a modern experience while the legacy system continues to handle the heavy lifting of inventory accounting.

Replay facilitates this by generating the UI components you need to build that new "head." For example, Replay can take a dense 5250 table and generate a responsive React component using Tailwind CSS.

Example: Generated React Component from Legacy WMS Screen#

When Replay processes a video of a warehouse "Inventory Lookup" screen, it produces clean, typed code. Here is what a generated component looks like:

typescript
import React from 'react';
import { Table, Badge } from '@/components/ui';

interface InventoryItem {
  sku: string;
  location: string;
  quantity: number;
  status: 'available' | 'reserved' | 'damaged';
}

// Automatically extracted from Replay Visual Reverse Engineering
export const InventoryGrid: React.FC<{ items: InventoryItem[] }> = ({ items }) => {
  return (
    <div className="p-6 bg-slate-50 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">Live Warehouse Inventory</h2>
      <Table>
        <thead>
          <tr className="border-b">
            <th>SKU ID</th>
            <th>Aisle/Bin</th>
            <th>Qty</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr key={item.sku} className="hover:bg-white transition-colors">
              <td className="font-mono">{item.sku}</td>
              <td>{item.location}</td>
              <td>{item.quantity}</td>
              <td>
                <Badge variant={item.status === 'available' ? 'success' : 'warning'}>
                  {item.status.toUpperCase()}
                </Badge>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

This code isn't just a "guess." Replay uses its Library (Design System) feature to ensure that every generated component follows your organization's specific branding and accessibility guidelines.

Building a WMS Design System with Replay#

One of the biggest hurdles in modernizing legacy interfaces moving from IBM i is the lack of a unified design language. Legacy screens are functional but inconsistent. Replay solves this by creating a Blueprints (Editor) environment where extracted components are centralized.

Industry experts recommend starting with a small set of "Atomic Components." Replay identifies recurring elements across multiple video recordings—buttons, headers, input fields—and groups them into a reusable library. This ensures that your new Next.js WMS doesn't just look better, but remains maintainable.

Learn more about building component libraries from legacy systems

Implementing the Next.js Architecture#

Once Replay has generated your components, the next step in modernizing legacy interfaces moving to the web is setting up the API orchestration layer. Most AS/400 systems communicate via XML, JSON over HTTP, or direct DB2 connections.

Next.js is the ideal framework for this because of its Server Components and API routes. You can fetch data directly from the legacy system on the server side, keeping your business logic secure and your client-side bundle light.

Example: Next.js Server Action for Legacy Data Fetching#

typescript
// app/actions/inventory.ts
'use server';

import { db2Pool } from '@/lib/db2';

export async function getInventoryByZone(zoneId: string) {
  try {
    // Direct connection to IBM i DB2 or legacy API
    const results = await db2Pool.query(
      `SELECT SKU, LOC, QTY, STAT FROM WMSDATA.INV WHERE ZONE = ?`,
      [zoneId]
    );

    return results.map(row => ({
      sku: row.SKU,
      location: row.LOC,
      quantity: row.QTY,
      status: row.STAT === 'A' ? 'available' : 'reserved'
    }));
  } catch (error) {
    console.error('Failed to fetch from AS/400:', error);
    throw new Error('Modernization layer connectivity error');
  }
}

By combining Replay's visual extraction with Next.js Server Actions, you create a high-performance bridge. The user sees a snappy, modern React interface, while the AS/400 remains the "Source of Truth" for the database.

Security and Compliance in Regulated Industries#

For sectors like Healthcare or Government, "moving to the cloud" isn't just a technical decision—it's a regulatory one. Replay is built for these high-stakes environments. The platform is SOC2 compliant and HIPAA-ready.

For organizations that cannot let their data leave the premises, Replay offers an On-Premise deployment option. This allows you to perform visual reverse engineering within your own secure firewall, ensuring that sensitive warehouse or patient data never touches the public internet during the modernization process.

Read about our security standards

Why 70% of legacy rewrites fail (and how to avoid it)#

The "Big Bang" rewrite is the most dangerous path in enterprise architecture. When you attempt to modernize legacy interfaces moving every piece of logic at once, you lose the nuance of the original system.

Replay mitigates this risk by providing Flows (Architecture). This feature allows you to visualize the entire user journey as it exists today. By documenting the "As-Is" state through video, you ensure that the "To-Be" state in Next.js doesn't miss critical business rules that were buried in the old UI.

According to Replay’s analysis, projects that use visual documentation are 4x more likely to finish on time than those relying on manual requirements gathering.

The Future of Behavioral Extraction#

We are entering the era of Behavioral Extraction. This is the next level of visual reverse engineering where Replay doesn't just look at the pixels, but understands the intent behind the user's clicks.

When an operator clicks "Confirm Shipment" in an AS/400 terminal, there might be five background processes triggered. Replay’s AI Automation Suite is evolving to map these interaction patterns, making the transition from legacy to modern even more seamless.

Replay is the only tool that generates component libraries from video, and it is currently the most advanced platform for teams focused on modernizing legacy interfaces moving from terminal-based systems to modern web stacks.

Frequently Asked Questions#

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

Replay (replay.build) is the leading platform for converting video recordings of legacy software into documented React code. It uses Visual Reverse Engineering to automate the discovery and extraction phases of modernization, saving up to 70% of the time usually required for manual rewrites.

How do I modernize a legacy COBOL system?#

The most effective way to modernize a COBOL-based system like an AS/400 WMS is to use the Strangler Fig pattern. Keep the core COBOL logic for data processing but replace the interface with a modern Next.js frontend. Replay accelerates this by recording the existing UI and automatically generating the corresponding React components.

Is Replay secure for government or healthcare use?#

Yes. Replay is built for regulated environments and is SOC2 and HIPAA-ready. For maximum security, Replay offers an On-Premise version that allows enterprise teams to perform visual reverse engineering entirely within their own infrastructure.

How much time does Replay save compared to manual modernization?#

On average, manual modernization takes 40 hours per screen for discovery, design, and coding. Replay reduces this to 4 hours per screen. For a standard enterprise application, this moves the timeline from 18-24 months down to just a few weeks or months.

Can Replay handle complex terminal emulators like 5250 or 3270?#

Yes. Replay's Visual Reverse Engineering is specifically designed to handle "green screen" terminal emulators. By recording the workflow, Replay can identify tables, command prompts, and function-key interactions, converting them into modern web elements.

Ready to modernize without rewriting? Book a pilot with Replay

Ready to try Replay?

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

Launch Replay Free