CipherStack
App
Documentation

How to use CipherStack

CipherStack lets you chain multiple ciphers into a single encryption pipeline and see the data transform at every step. This guide walks you through the whole app — start to finish — with copy-paste-ready test cases at the end.

1. What is CipherStack?

CipherStack is a visual builder for cascade encryption — the practice of running your message through more than one cipher in a row. The output of the first cipher becomes the input of the next, and so on.

Think of it like an assembly line at a factory:

  • A raw product (your message) enters at one end.
  • Each station (a cipher) transforms it in some way.
  • A finished product (the ciphertext) comes out the other end.
  • Running the line backwards, with each station doing the reverse of its job, gives you the original message back.
CipherStack is a learning and demo tool. The ciphers here are classic algorithms, not real-world encryption. Please don’t use it to protect anything important.

2. Core concepts

Plaintext

The readable message you start with. Example: hello world.

Ciphertext

The scrambled output after encryption. Example: Z291cnogcm9vaGs=.

Pipeline

The ordered chain of ciphers. Same chain, different order = different output.

Round-trip

Encrypt then decrypt. If you get the exact original back, the round-trip worked.

The app has two modes:

  • Encrypt — reads your plaintext, runs every cipher in order, fills in the ciphertext.
  • Decrypt — reads the ciphertext, runs every cipher in reverse with inverse operations, fills in the plaintext. A Round-trip verified badge confirms your recovered text matches.

3. Quick start — your first pipeline in 60 seconds

  1. 1
    Open the app (the home page). You’ll see three panels: Library on the left, Pipeline in the middle, Plaintext / Ciphertext on the right. On phones, the panels stack vertically.
  2. 2
    In the Library, under Presets, click Simple. Three cipher nodes appear in the Pipeline and hello world is placed in the Plaintext box.
  3. 3
    Click the green Run button at the top right. Watch each node light up in turn; its in: and out: values appear so you can see the message change at every step.
  4. 4
    The final ciphertext appears in the Ciphertext box on the right. That’s your encrypted message.
  5. 5
    Click Decrypt at the top (the mode toggle switches from emerald to amber). The Plaintext box becomes read-only; the Ciphertext box becomes editable.
  6. 6
    Click Run again. The pipeline runs in reverse, recovers hello world, and a green Round-trip verified badge appears.
That’s the full loop: encrypt → decrypt → verify. Everything else is a variation of it.

4. The interface

Three panels, one header.

Header (top)

Logo on the left, mode toggle (Encrypt / Decrypt) in the middle, Run button on the right. A small Docs link takes you here.

Library (left)

Three sections: Ciphers (click to add a node), Presets (one-click starter chains), Tools (Export / Import / Clear).

Pipeline (middle)

Your chain of cipher nodes, top to bottom. Arrows between nodes show the direction of data flow. Drag the handle () to reorder, click the to remove.

Input / Output (right)

Plaintext on top, Ciphertext below. Which one is editable depends on the mode. A round-trip verification badge appears after a successful decrypt.

5. The cipher library (5 algorithms)

Each cipher has its own configuration. All ciphers work on strings and always produce strings, so chains never break.

C
Caesar Cipher

Shifts every ASCII letter (A–Z, a–z) by a fixed number of positions. Non-letters pass through unchanged; case is preserved.

ConfigShift: integer from -25 to 25 (default 3)InverseShift by the negative amountExamplein: helloshift 3 → khoor
V
Vigenère Cipher

Polyalphabetic shift driven by a keyword. Each letter of the keyword gives a different shift, cycling through as the message is processed.

ConfigKeyword: letters only (default “key”)InverseSubtract the keyword shiftsExamplein: hellokey “key” → rijvs
X
XOR Cipher

Combines the message bytes with a repeating key byte-by-byte using XOR. Because the raw bytes may not be printable, the output is serialized as lowercase hex.

ConfigKey: any non-empty string (default “key”)InverseApply the same XOR to the hex (self-inverse)Examplein: hellokey “k3y” → 0356140714
R
Reverse

Reverses the string end-to-end. It is its own inverse: running Reverse twice returns the original.

ConfigNoneInverseSelf-inverseExamplein: helloout: olleh
B
Base64

Standard Base64 encoding, UTF-8 safe. Handy for wrapping binary-ish output into ASCII so later stages can treat it as normal text.

ConfigNoneInverseStandard Base64 decodeExamplein: helloout: aGVsbG8=
Pieces that don’t operate on letters (digits, spaces, punctuation) simply pass through the Caesar and Vigenère ciphers unchanged. Base64 and XOR handle every character, including emoji and non-English text.

6. Building a pipeline

Add a node

Click a cipher name in the Library. A new card appends to the bottom of the Pipeline with default config.

Configure

Edit the value inside the card (shift, keyword, or key). Changes are applied live. A red border means the config is invalid.

Reorder

Grab the handle on the left of the card and drag it up or down.

Remove

Click the in the top-right corner of a card. The node fades out; there is no confirmation step.

You need at least 3 nodes before Run becomes active. Fewer nodes = not really a cascade.

7. Running the pipeline

Click Run (or press Ctrl / ⌘ + ).

  • In Encrypt mode, nodes run top-to-bottom.
  • In Decrypt mode, nodes run bottom-to-top and each uses its inverse operation.
  • After a run, each node card displays in: (the value it received) and out: (the value it produced). Long values are truncated with ellipsis — hover for the full text.
Encrypt example (Simple preset):
"hello world"
  → Caesar(3)  →  "khoor zruog"
  → Reverse    →  "gourz roohk"
  → Base64     →  "Z291cnogcm9vaGs="

The reverse journey brings it all the way back:

Decrypt example:
"Z291cnogcm9vaGs="
  → Base64 decode  →  "gourz roohk"
  → Reverse        →  "khoor zruog"
  → Caesar(-3)     →  "hello world"
  ✓ Round-trip verified

8. Presets

Three ready-made chains in the Library. One click replaces your current pipeline with the preset and fills in a sample plaintext.

Simple

Caesar → Reverse → Base64

“hello world”

Classical

Caesar → Vigenère → Reverse

“attack at dawn”

Mixed

Base64 → XOR → Caesar

“cascade encryption”

9. Export & import

Save your pipeline configuration as a JSON file, share it with a friend, or load a previously saved chain.

Export JSON

Downloads cipherstack-pipeline-YYYY-MM-DDTHH-MM-SS.json with every node’s type, config, and the current plaintext.

Import JSON

Opens a file picker. A valid file replaces your pipeline; an invalid one shows an error toast and changes nothing.

Your pipeline also survives a page refresh — the app stores the nodes, current mode, and plaintext in your browser’s local storage. Clearing site data resets everything.

10. Keyboard shortcuts

ShortcutAction
Ctrl / ⌘ + EnterRun the pipeline
Ctrl / ⌘ + KToggle between Encrypt and Decrypt

11. Test cases

Follow each one step by step and compare against the expected result. If something doesn’t match, that’s a bug — please report it.

Test 1Simple preset round-trip

Goal: Verify the end-to-end encrypt → decrypt cycle on a known input.

  1. 1
    In the Library, click the Simple preset.
  2. 2
    Confirm 3 nodes appear: Caesar Cipher, Reverse, Base64, and that hello world is in the Plaintext box.
  3. 3
    Click Run (or press Ctrl+Enter).
  4. 4
    Switch to Decrypt and click Run again.
Expected: After encrypt, the Ciphertext box shows Z291cnogcm9vaGs=. After decrypt, the Plaintext box shows hello world and a green Round-trip verified badge appears.
Test 2Three Caesars = one bigger Caesar

Goal: Understand how the cascade composes: three shifts of +3 should equal one shift of +9.

  1. 1
    Click Clear pipeline to start fresh.
  2. 2
    Click Caesar Cipher in the Library three times. You now have three Caesar nodes, each at the default shift of 3.
  3. 3
    In the Plaintext box, type test.
  4. 4
    Click Run.
  5. 5
    Switch to Decrypt and click Run.
Expected: Encrypted ciphertext is cnbc (three shifts of +3 = +9 total). Decryption returns test with a green verification badge.
Test 3Order matters

Goal: Prove that re-ordering the same nodes produces a different ciphertext.

  1. 1
    Load the Simple preset and click Run. Note the ciphertext (Z291cnogcm9vaGs=).
  2. 2
    Drag the Base64 node (node 3) to the top (position 1) using the grip handle.
  3. 3
    Make sure you’re still in Encrypt mode and click Run.
Expected: The ciphertext changes completely — the new order is Base64 → Caesar → Reverse, so Base64 encodes the plaintext first and the remaining ciphers transform that Base64 string.
Test 4UTF-8 survives the XOR → Base64 chain

Goal: Check that non-ASCII characters (accents, emoji, other scripts) round-trip correctly.

  1. 1
    Clear the pipeline.
  2. 2
    Add XOR Cipher, then Base64, then Reverse.
  3. 3
    Set the XOR key to secret.
  4. 4
    In Plaintext, paste: café — 日本語 — 123!.
  5. 5
    Click Run, switch to Decrypt, click Run again.
Expected: The exact original text returns, including accents and non-ASCII characters. Badge turns green.
Test 5Mismatch detection

Goal: Verify the app correctly flags a broken round-trip.

  1. 1
    Load the Classical preset.
  2. 2
    Click Run to encrypt.
  3. 3
    Switch to Decrypt.
  4. 4
    Edit the Ciphertext — change any one letter.
  5. 5
    Click Run.
Expected: The Plaintext that comes out does not match the original. The badge shows a red Mismatch.
Test 6Export / import round-trip

Goal: Save a pipeline, clear everything, then load it back exactly as it was.

  1. 1
    Load the Mixed preset.
  2. 2
    Click Export JSON. A file downloads.
  3. 3
    Click Clear pipeline. The Pipeline empties; Run is now disabled.
  4. 4
    Click Import JSON and pick the file you just downloaded.
Expected: All three original nodes (Base64, XOR, Caesar) reappear in the original order and cascade encryption returns to the Plaintext box. A success toast confirms the load.
Test 7Mobile layout check

Goal: Make sure the app is usable on a phone-sized screen.

  1. 1
    Open the app on a mobile browser, or resize your desktop window to ~375px wide.
  2. 2
    Confirm the Library, Pipeline, and Input/Output panels stack vertically.
  3. 3
    Load any preset and click Run.
Expected: Every control is reachable without horizontal scrolling. Encrypt/Decrypt are icon-only at narrow widths; cipher and preset buttons wrap into rows; the Ciphertext box scrolls internally if the output is long.

12. Full walkthrough — prove every feature in 2 minutes

If you want one quick demo that exercises essentially every feature, follow this list:

  1. 1
    Open the app.
  2. 2
    Click the Classical preset.
  3. 3
    Confirm the Pipeline shows Caesar → Vigenère → Reverse and the Plaintext reads attack at dawn.
  4. 4
    Press Ctrl + Enter to Run. Watch each node fill in its in: / out:.
  5. 5
    Drag the Vigenère node above Caesar. Run again — the ciphertext is now different. This proves order matters.
  6. 6
    Press Ctrl + K to switch to Decrypt, then Ctrl + Enter to Run.
  7. 7
    Confirm attack at dawn is back and the green verification badge shows.
  8. 8
    Click Export JSON. A file downloads.
  9. 9
    Click Clear pipeline. Everything empties.
  10. 10
    Click Import JSON, pick the file you just exported, and confirm the pipeline restores exactly.
  11. 11
    Refresh the browser tab. Confirm the pipeline is still there (it was saved to local storage).
If all 11 steps pass, every feature works.

13. FAQ

Is this real encryption?

No. These are classic ciphers useful for learning, puzzles, and visualization. They are not secure against modern cryptanalysis — do not use them for real secrets.

Why does the ciphertext look like hex (long string of 0–9 a–f)?

That’s XOR output. XOR works on raw bytes which may not be printable, so we serialize the result to lowercase hex. Everything downstream in the chain just treats it as a string.

Why is Run greyed out?

Run requires three things: at least 3 nodes, every config valid, and non-empty input in the active box (Plaintext in Encrypt mode, Ciphertext in Decrypt mode).

I closed the tab — will my pipeline come back?

Yes, if you reopen the same browser. The pipeline, mode, and plaintext are saved to your browser’s local storage. They will not appear in a different browser or in private / incognito mode.

My Vigenère keyword input ignores numbers and symbols.

That’s intentional. Vigenère only uses letters; non-letter characters in the keyword are filtered out as you type.

The round-trip badge is red (mismatch). What now?

Something changed between encrypt and decrypt — usually the ciphertext was edited, a node was removed, the order changed, or a config value was altered. Rebuild the exact same pipeline and try again.

Can I add more cipher types?

Yes — the cipher engine is a registry. Drop a new file in lib/ciphers/ that exports a CipherDef and add it to the registry in lib/ciphers/index.ts. No other file needs to change.

14. Troubleshooting

Red banner: “XOR decrypt produced invalid UTF-8”

Either the key is wrong or the input isn’t an XOR ciphertext produced by this app. Double-check the key and make sure you’re decrypting the output of a matching encrypt.

Red banner: “Input is not valid Base64”

Make sure the ciphertext you pasted is a real Base64 string. Missing padding characters (=) or stray quotes can cause this.

A node card has a red border

Its configuration is invalid (for example, an empty Vigenère keyword). Fix the value and Run will re-enable.

Nothing happens when I click Export

Your pipeline is empty — there’s nothing to save. Add or load some nodes first.

I’m on mobile and can’t drag nodes

Touch-drag works best on tablet or larger. On very small screens, remove and re-add nodes in the order you want, or use a larger display.

Ready to build?

Head back to the app and try your own cascade.

Back to the app