Magic Box

～ Quick In Quick Out ～

---

Usage 🏁

Magic Box parses user input into two parts: input and options.

For example, when Magic Box receives the following user input: The input will be https://youtu.be/dQw4w9WgXcQ and the option key is shorten with the value document.

https://youtu.be/dQw4w9WgXcQ
::shorten=document

Based on matching methods, we can roughly classify Boxes into two types:

1. match by the input string
2. match by options

Keyboard Shortcuts ⌨️

• Ctrl + n: move to the next Box
• Ctrl + Shift + n: move to the previous Box
• Ctrl + p: move to the previous Box
• Enter: copy the selected Box output to clipboard
• Cmd/Ctrl + Enter: copy the selected Box output and paste it into the input field (recalculates results)

Base64Box

match rule	description	output
valid string	base64 encode
can be decode to valid string	base64 decode

CronExpressionBox

match rule	description	output
valid cron expression	convert to human language

options	description	example
l, lang, locate	select while human language	::locale=tw
tz, timezone, tzOffset	(deprecated) shift to the base timezone	::tz=8

DataConverter

match rule	description	output
valid JSON/YAML/TOML/XML	formatted output for the detected format
option json or tojson	convert input to formatted JSON	formatted JSON
option yaml or toyaml	convert input to formatted YAML	formatted YAML
option toml or totoml	convert input to formatted TOML	formatted TOML
option xml or toxml	convert input to formatted XML	formatted XML

DateCalculateBox

match rule	description	example	output
date1 + numberd	add days to a date	now + 7d
date1 - numberd	subtract days from a date	2025-01-01 - 30d
date1 to date2	calculate the duration between two dates	today to 2025-12-31

GenerateQRCodeBox

match rule	description	output
contains option qr or qrcode	generate QR Code

options	description	example
qr, qrcode	--	::QRCode

JWTBox

match rule	description	output
valid JWT string	decode JWT header and body

K8sSecretBox

match rule	description	output
valid K8s Secret YAML/JSON	decode base64 values in a K8s Secret data

MathExpressionBox

Powered by the in-tree math-box WASM module — a clean-room expression evaluator written in Rust, replacing mathjs since v0.2 to keep the bundle small and the licence pure MIT/Apache-2.0.

match rule	description	output
valid math express	calculate the math result

Supported syntax (highlights):

• arithmetic + - * / % ^, factorial 5!, function calls sin(PI/2)
• variables and statement chaining: x = 5; y = 7; x*y + x^2
• user-defined functions: sq(x) = x^2; sq(11) + sq(13)
• BigInt literals via n suffix: 9007199254740993n + 1n
• fractions: frac(1, 3) + frac(1, 4) → 7/12
• complex numbers: (2 + 3*i) * (2 - 3*i) → 13
• units: 1 km + 500 m to m → 1500 m (length / mass / time SI)

See wasmModules/math-box/NOTES.md for the full design and roadmap, and BENCHMARK.md for performance vs mathjs.

MyIPBox

match rule	description	output
ip or myip	fetch and show your public IP and location

NowBox

match rule	description	output
input matches now	show current time in 3 difference formats: RFC 3339, RFC 3339 (UTC+8), and Timestamp (s)

ShortenURLBox

match rule	description	output
contains option surl or shorten	generate a shorten URL

options	description	example
surl, shorten	desired short URL result, if not set, a random string will be used	::surl=foo

TimeFormat

match rule	description	output
valid RFC 3339 time string	timestamp in second and millisecond

TimestampBox

match rule	description	output
valid timestamp. to avoid match all of number string, it only receive 1600 AD to 2500 AD	the time of timestamp in RFC 3339 format

URLDecode

match rule	description	output
URL-encoded string	decoded URL-encoded string

RandomIntegerBox

match rule	description	example	output
random	generate a random number between 0 and 100	random
random max	generate a random number between 0 and max	random 1000
random min-max	generate a random number between min and max	random 1-6

ReadableBytesBox

match rule	description	example	output
byte array	convert a byte array (comma or space separated) to a readable string	72, 101, 108, 108, 111

UuidBox

match rule	description	output
uuid	generate a new random UUID (v4)

options	description	example
upper, uppercase	return UUID in uppercase	::upper

WordCountBox

match rule	description	output
any string	count lines, words, and characters

Development ⛑️

It is recommended to use Node.js version 22.x

pnpm build:wasm
pnpm install
pnpm start

Development Commands

• pnpm build:wasm - Build WASM modules before development/deployment (required for base64-box dependency)
• pnpm start - Start development server on port 3000
• pnpm build - Build for production (runs TypeScript compiler + Vite build)
• pnpm test - Run unit tests with Vitest
• pnpm test:ui - Run tests with Vitest UI
• pnpm lint - Run Biome check
• pnpm lint:fix - Run Biome check with auto-fix
• pnpm test:e2e - Run Cypress E2E tests
• pnpm cypress - Open Cypress test runner

Testing

• Unit tests use Vitest with jsdom environment
• E2E tests use Cypress with custom commands in cypress/support/

Prepare Deploy

Initial Deployment Preparation

npm install -g firebase-tools

firebase login
firebase init

firebase deploy

License 📃

Magic Box is licensed under MIT and Apache 2.0 dual-licensed.

You may obtain a copy of the License at LICENSE-MIT and LICENSE-APACHE