Beyond Find and Replace: How altr-web Solves the Casing Nightmare

A Rust-powered WebAssembly playground that refactors code with linguistic intelligence.

A visual metaphor of a single word scattering into multiple different casing styles like a prism, with a developer attempting to catch them all. — The Casing Explosion: A single rename operation often breaks across multiple naming conventions.

Key Takeaways

The altr engine identifies the root concept of a word to update it across multiple naming conventions in a single pass.
Compiling the core Rust logic into WebAssembly ensures the web playground maintains identical behavior to the CLI tool.
The React frontend uses positional data from the Rust engine to generate precise visual diffs without relying on fragile client-side regex.
The zero-server architecture ensures that sensitive source code is processed entirely within the local browser environment.

The “Find and Replace” tool is the oldest, crudest hammer in a developer’s toolbox. We’ve all felt the pain: you rename user to admin, but then you have to manually hunt down User, USER, and user_id. It is a fragile process that relies on either multiple manual passes or complex, brittle regular expressions.

altr-web is the “smart hammer.” By compiling a specialized Rust engine into WebAssembly, it brings IDE-grade, casing-aware refactoring to a zero-install web playground. The story isn’t just that it replaces text—it’s about the portability of logic.

The Geometry of a Rename

Simple regex fails at refactoring because it lacks context. It’s not just about matching characters; it’s about understanding the intent behind camelCase, snake_case, and PascalCase. When a developer changes a domain concept, that concept exists across the codebase in multiple forms. A database column might be user_account_id, while the TypeScript interface is UserAccountId.

Traditional tools force the developer to translate the new concept into every possible format and run the replacement multiple times. altr abstracts this away. It understands the “DNA” of the word, extracting the root concept and applying the new concept while strictly adhering to the original casing rules.

A microscopic view of a code string passing through a series of geometric gates that reshape the words while maintaining their core structure. — The Alchemist’s Filter: altr processes text by preserving the structural intent of the original casing.

Rust in the Browser’s Clothing

The architectural highlight of altr-web is its hybrid approach. The core refactoring intelligence is not written in TypeScript. Instead, the project relies on the altr Rust crate, which is compiled to WebAssembly via wasm-bindgen. This creates a bridge between a high-performance, strictly typed engine and a fluid React frontend.

This “write once, run anywhere” philosophy means the web tool shares the exact same logic as the CLI utility. The altr-wasm directory acts as the translation layer, exposing functions like execute and validate that the React app can call asynchronously.

The Wasm Bridge: How React communicates with the Rust core to perform casing-aware transformations.

import init, { execute, validate } from 'altr-wasm';

// Initialize the Wasm module before use
await init();

// The Rust engine processes the text and returns replacement records
const records = execute(text, candidate, rename);

The Feedback Loop

Refactoring is inherently dangerous. Developers need to see exactly what will change before they commit. altr-web addresses this through its Highlighter.tsx component. Instead of relying on complex JavaScript regex to highlight changes, the UI leverages the positional data returned directly by the Rust engine.

By iterating through the BasicRecord objects, the React app slices the original string into an array of React nodes, alternating between plain text and highlighted <span> tags. This guarantees that the visual representation perfectly matches the underlying transformation logic.

Privacy by Architecture

Because the entire altr engine runs within the WebAssembly VM in the browser tab, altr-web is a “Zero-Server” application. When a developer pastes proprietary source code into the playground, that code never leaves their machine. There are no API calls to a backend server to perform the refactoring.

Traditional Find/Replace	altr-web
Case-blind execution	Case-aware transformations
Requires multiple manual passes	Single pass for all conventions
High risk of partial word replacement	Understands word boundaries
Manual verification needed	Instant visual diff via Highlighter

This architecture represents the future of lightweight developer tools. By combining the speed and safety of Rust with the accessibility of the web, altr-web proves that complex, language-aware operations no longer require a heavy IDE or a round-trip to a cloud server.