How to Use the Refactoring Lab
A step-by-step guide to modernizing your legacy code with AI-powered transformers, side-by-side diffs, and logic integrity checks.
Quick Start (3 Steps)
Choose a Transformer
Select one of the four available transformers based on the type of code you want to modernize.
Paste Your Code
Paste your legacy code into the editor. Each transformer comes pre-loaded with an example you can try first.
Review the Diff
Click "Refactor Code" and review the side-by-side diff. The integrity check panel highlights any potential breaking changes.
Available Transformers
Converts class components using setState, lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), and class methods into modern functional components with useState, useEffect, useCallback, and useRef.
Tips for Best Results
- Include the full component — imports, class definition, and export
- The transformer preserves PropTypes and TypeScript types
- Context consumers are converted to useContext
- Bound methods become regular functions or useCallback
Adds explicit type annotations, creates interfaces for object shapes, replaces `any` with specific types, and converts module.exports to ES module syntax where appropriate.
Tips for Best Results
- Works best with well-structured functions that have clear inputs and outputs
- Handles both CommonJS and ES module patterns
- Creates interfaces for repeated object shapes
- Uses `unknown` instead of `any` when type is genuinely unknown
Converts CREATE TABLE statements into Prisma schema definitions and transforms SELECT/INSERT/UPDATE/DELETE queries into Drizzle ORM TypeScript code with proper type safety.
Tips for Best Results
- Include all CREATE TABLE statements so relationships can be mapped
- Foreign keys are converted to @relation directives in Prisma
- The output contains both Prisma schema and Drizzle query equivalents
- SQL constraints (UNIQUE, NOT NULL, DEFAULT) are preserved
Refactors nested callbacks (callback hell) and .then()/.catch() Promise chains into clean async/await patterns with proper error handling using try/catch.
Tips for Best Results
- Parallel callback operations are converted to Promise.all()
- Every callback error check gets an equivalent try/catch
- Node.js callback APIs are wrapped in Promises
- The function signature may change to return a Promise
Understanding the Logic Integrity Check
After every refactor, a static analysis runs automatically comparing the original and refactored code. It checks for structural changes that could indicate breaking differences — without executing any code.
- Exported symbols — are all exports preserved?
- Function signatures — did parameter counts change?
- Import changes — were new dependencies added?
- Module system — CommonJS vs ES Modules switch?
- Code size — significant increase or reduction?
- Type safety — any `any` types introduced?
- Debug artifacts — console statements added?
Informational — no action needed (e.g. new imports added, code size change)
Potential issue — review recommended (e.g. parameter count change, module system switch)
Likely breaking change — manual verification required (e.g. removed exports)
Confidence Score (0–100)
A score of 80+ means the refactor is likely safe. Below 50, manual review is strongly recommended.
Frequently Asked Questions
Do I need to be logged in?
Yes. The Refactoring Lab requires authentication to manage rate limits and ensure fair usage.
Is there a size limit for code?
Yes, the maximum input size is 10 KB. For larger files, refactor them in sections.
How many refactors can I run per hour?
You can run up to 5 refactoring requests per hour. The rate limit resets on a rolling window.
Is my code sent to external servers?
Your code is sent to an AI model via OpenRouter for processing. We do not store your code on our servers — it is only held in your browser's local storage.
Can I trust the refactored output?
The integrity check highlights potential issues, but always review the output before using it in production. AI-generated code should be treated as a strong starting point, not a final result.
Does the diff view work on mobile?
Yes. On smaller screens, the diff automatically switches from side-by-side to an inline (unified) view.
Is my previous work saved?
Yes. Your last input and output for each transformer is saved in your browser's local storage and restored when you return.