Cracking the Code: Building an Interactive Enigma Machine Simulator with React

Introduction

The Enigma machine, an electromechanical cipher device used by Germany during World War II, stands as one of the most iconic symbols of cryptography. Its complexity and constantly shifting substitution system made it a formidable challenge for Allied codebreakers, ultimately inspiring the groundbreaking work at Bletchley Park.

Recreating the Enigma in the browser is more than a technical exercise. It’s a dive into the world of historical encryption, a hands-on exploration of how analog systems laid the groundwork for modern cryptographic thinking. In this post, I’ll walk you through the development of a web-based Enigma machine simulator, built with React.

Project Goal

The goal was to create an interactive and faithful simulation of the original Enigma machine — a tool that could encrypt and decrypt text in real-time, mimicking how the original device worked. This involved replicating its core components, including the rotors, reflector, and plugboard, and building a user interface that offered an intuitive and engaging experience.

The simulator needed to allow users to type messages and see encrypted results instantly. It also had to reflect the internal changes within the machine — from rotor stepping to plugboard mapping — and provide ways to adjust settings like rotor types, ring positions, and plugboard connections. Beyond that, it was important to track encryption history, support decryption using stored configurations, and allow saving and loading of settings.

Technology Stack

The simulator was built using modern front-end tools. React (with Next.js) provided the architecture and routing. Tailwind CSS helped design a fast and clean UI. TypeScript ensured type safety across the app, and Lucide React was used for icons. At the heart of the system was a custom

EnigmaMachine

class that replicated the logic of the actual Enigma hardware — simulating rotor wiring, signal flow, stepping mechanisms, and plugboard mappings.

How the Enigma Machine Works (And How We Simulated It)

Unlike a simple substitution cipher, the Enigma changes its mapping with every key press. When a key is pressed, an electrical signal travels through the plugboard, into a series of rotors, hits a reflector, and returns through the same rotors in reverse before lighting up a corresponding lamp. Each rotor rotates after a key press, causing the substitution to change dynamically. The stepping logic is especially complex, with the middle rotor performing a so-called "double-step" under certain conditions.

The simulation mimics this process exactly. Each key press sends the signal through the simulated components, updates the rotor positions, and returns the encrypted character. The same settings will always produce the same encrypted output, which is crucial for the decryption process.

Implementation and Challenges

One of the main challenges was managing real-time encryption as users typed. This required careful state management in React. Each key press needed to trigger encryption, update the machine’s internal state, and reflect those changes in the UI. It was essential that the on-screen display of rotors and lights remained in sync with the logic in the

EnigmaMachine

class.

Handling physical keyboard input involved capturing key events, filtering them to match the Enigma’s letter set, and preventing the browser’s default behaviors. I also created a virtual keyboard on-screen that responded to both clicks and physical key presses, providing immediate feedback by highlighting the keys being pressed and the letters being output.

Simulating the rotor stepping correctly was critical. The Enigma’s security relied heavily on this mechanic, and getting the "double-stepping" behavior of the middle rotor right required close attention to the original machine’s engineering.

Storing encryption history presented another interesting problem. For accurate decryption, the simulator needed to log not just the encrypted text, but the machine's complete state at the moment each letter was processed — including rotor positions, ring settings, plugboard connections, and more. This data could then be downloaded as a JSON file for future use.

To support decryption, I built an upload feature that allows a user to provide a saved encryption history. The simulator then reconstructs the state step-by-step and decrypts the original message by reversing the process.

Here’s a simplified version of how each encrypted letter and its corresponding machine state is stored:

const encryptLetter = useCallback(
  (letter: string) => {
    const encryptedChar = enigmaMachine.encryptChar(letter);

    setEnigmaHistory(prevHistory => [
      ...prevHistory,
      {
        encrypted: encryptedChar,
        enigmaState: {
          rotorPositions: [...rotorPositions],
          reflectorName: reflectorName,
          selectedRotors: [...selectedRotors],
          ringSettings: [...ringSettings],
          plugboardConnections: plugboardConnections,
        },
      },
    ]);

    return encryptedChar;
  },
  [enigmaMachine, rotorPositions, reflectorName, selectedRotors, ringSettings, plugboardConnections]
);

What the Simulator Can Do

Once finished, the simulator provided a wide range of features. Users could interact using either a physical keyboard or an on-screen one, type messages and see their encrypted forms appear in real time, and configure all major aspects of the Enigma. Rotor types, starting positions, ring settings, and plugboard connections were all adjustable through the interface.

The simulator displayed the current rotor positions and allowed users to download a record of their encryption history or configuration. In decryption mode, they could upload this history file and watch the simulator step through each character with the exact settings used during encryption.

What I Learned

This project was an incredible learning experience. First and foremost, it gave me a deep appreciation for how the Enigma machine worked, and why it was both ingenious and ultimately breakable. On the development side, it pushed me to handle complex, interdependent state using React, and to build a UI that accurately reflected a rapidly changing internal model.

I also became much more comfortable with tools like useRef and useCallback, especially when managing instances of the machine itself outside of the React state lifecycle. Working with file uploads and downloads in the browser using the File API was another skill I picked up along the way.

Future Improvements

There’s still plenty of room to grow the project. I’d love to add a visual plugboard editor to make connection management easier, and eventually support other Enigma variants like the M4 model with four rotors. A step-by-step visualization mode could help users understand the internal wiring process for each letter, and improvements to mobile input handling would make the simulator more accessible on touch devices.

Conclusion

Building the Enigma simulator was a rewarding journey into both history and code. It was an opportunity to bring a legendary cipher machine to life on the web, and along the way, I learned more about both cryptography and front-end engineering. Whether you're a developer looking for a creative challenge or someone curious about historical encryption, this kind of project offers a uniquely rich experience.

Github : https://github.com/shobhitsrivastava2023/Enigma

Live Link: https://enigma-nine-ashy.vercel.app/