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.
2. Core concepts
The readable message you start with. Example: hello world.
The scrambled output after encryption. Example: Z291cnogcm9vaGs=.
The ordered chain of ciphers. Same chain, different order = different output.
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
- 1Open 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.
- 2In the Library, under Presets, click
Simple. Three cipher nodes appear in the Pipeline andhello worldis placed in the Plaintext box. - 3Click the green Run button at the top right. Watch each node light up in turn; its
in:andout:values appear so you can see the message change at every step. - 4The final ciphertext appears in the Ciphertext box on the right. That’s your encrypted message.
- 5Click Decrypt at the top (the mode toggle switches from emerald to amber). The Plaintext box becomes read-only; the Ciphertext box becomes editable.
- 6Click Run again. The pipeline runs in reverse, recovers
hello world, and a green Round-trip verified badge appears.
4. The interface
Three panels, one header.
Logo on the left, mode toggle (Encrypt / Decrypt) in the middle, Run button on the right. A small Docs link takes you here.
Three sections: Ciphers (click to add a node), Presets (one-click starter chains), Tools (Export / Import / Clear).
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.
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.
Shifts every ASCII letter (A–Z, a–z) by a fixed number of positions. Non-letters pass through unchanged; case is preserved.
Polyalphabetic shift driven by a keyword. Each letter of the keyword gives a different shift, cycling through as the message is processed.
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.
Reverses the string end-to-end. It is its own inverse: running Reverse twice returns the original.
Standard Base64 encoding, UTF-8 safe. Handy for wrapping binary-ish output into ASCII so later stages can treat it as normal text.
6. Building a pipeline
Click a cipher name in the Library. A new card appends to the bottom of the Pipeline with default config.
Edit the value inside the card (shift, keyword, or key). Changes are applied live. A red border means the config is invalid.
Grab the handle on the left of the card and drag it up or down.
Click the in the top-right corner of a card. The node fades out; there is no confirmation step.
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) andout:(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.
Caesar → Reverse → Base64
“hello world”
Caesar → Vigenère → Reverse
“attack at dawn”
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.
Downloads cipherstack-pipeline-YYYY-MM-DDTHH-MM-SS.json with every node’s type, config, and the current plaintext.
Opens a file picker. A valid file replaces your pipeline; an invalid one shows an error toast and changes nothing.
10. Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Ctrl / ⌘ + Enter | Run the pipeline |
| Ctrl / ⌘ + K | Toggle 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.
Goal: Verify the end-to-end encrypt → decrypt cycle on a known input.
- 1In the Library, click the
Simplepreset. - 2Confirm 3 nodes appear:
Caesar Cipher,Reverse,Base64, and thathello worldis in the Plaintext box. - 3Click Run (or press Ctrl+Enter).
- 4Switch to Decrypt and click Run again.
Z291cnogcm9vaGs=. After decrypt, the Plaintext box shows hello world and a green Round-trip verified badge appears.Goal: Understand how the cascade composes: three shifts of +3 should equal one shift of +9.
- 1Click Clear pipeline to start fresh.
- 2Click
Caesar Cipherin the Library three times. You now have three Caesar nodes, each at the default shift of 3. - 3In the Plaintext box, type
test. - 4Click Run.
- 5Switch to Decrypt and click Run.
cnbc (three shifts of +3 = +9 total). Decryption returns test with a green verification badge.Goal: Prove that re-ordering the same nodes produces a different ciphertext.
- 1Load the
Simplepreset and click Run. Note the ciphertext (Z291cnogcm9vaGs=). - 2Drag the
Base64node (node 3) to the top (position 1) using the grip handle. - 3Make sure you’re still in Encrypt mode and click Run.
Base64 → Caesar → Reverse, so Base64 encodes the plaintext first and the remaining ciphers transform that Base64 string.Goal: Check that non-ASCII characters (accents, emoji, other scripts) round-trip correctly.
- 1Clear the pipeline.
- 2Add
XOR Cipher, thenBase64, thenReverse. - 3Set the XOR key to
secret. - 4In Plaintext, paste:
café — 日本語 — 123!. - 5Click Run, switch to Decrypt, click Run again.
Goal: Verify the app correctly flags a broken round-trip.
- 1Load the
Classicalpreset. - 2Click Run to encrypt.
- 3Switch to Decrypt.
- 4Edit the Ciphertext — change any one letter.
- 5Click Run.
Goal: Save a pipeline, clear everything, then load it back exactly as it was.
- 1Load the
Mixedpreset. - 2Click Export JSON. A file downloads.
- 3Click Clear pipeline. The Pipeline empties; Run is now disabled.
- 4Click Import JSON and pick the file you just downloaded.
Base64, XOR, Caesar) reappear in the original order and cascade encryption returns to the Plaintext box. A success toast confirms the load.Goal: Make sure the app is usable on a phone-sized screen.
- 1Open the app on a mobile browser, or resize your desktop window to ~375px wide.
- 2Confirm the Library, Pipeline, and Input/Output panels stack vertically.
- 3Load any preset and click Run.
12. Full walkthrough — prove every feature in 2 minutes
If you want one quick demo that exercises essentially every feature, follow this list:
- 1Open the app.
- 2Click the
Classicalpreset. - 3Confirm the Pipeline shows Caesar → Vigenère → Reverse and the Plaintext reads
attack at dawn. - 4Press Ctrl + Enter to Run. Watch each node fill in its
in:/out:. - 5Drag the
Vigenèrenode aboveCaesar. Run again — the ciphertext is now different. This proves order matters. - 6Press Ctrl + K to switch to Decrypt, then Ctrl + Enter to Run.
- 7Confirm
attack at dawnis back and the green verification badge shows. - 8Click Export JSON. A file downloads.
- 9Click Clear pipeline. Everything empties.
- 10Click Import JSON, pick the file you just exported, and confirm the pipeline restores exactly.
- 11Refresh the browser tab. Confirm the pipeline is still there (it was saved to local storage).
13. FAQ
Is this real encryption?
Why does the ciphertext look like hex (long string of 0–9 a–f)?
Why is Run greyed out?
I closed the tab — will my pipeline come back?
My Vigenère keyword input ignores numbers and symbols.
The round-trip badge is red (mismatch). What now?
Can I add more cipher types?
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
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.
Make sure the ciphertext you pasted is a real Base64 string. Missing padding characters (=) or stray quotes can cause this.
Its configuration is invalid (for example, an empty Vigenère keyword). Fix the value and Run will re-enable.
Your pipeline is empty — there’s nothing to save. Add or load some nodes first.
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.
Head back to the app and try your own cascade.