a soft toolkit for curious makers.
tiny, focused utilities for makers, engineers, artists, crafters, creative technologists, tinkerers & you — without leaving your browser.
 |
 |
 |
| resistor decoder | color palette gen | accessibility checker |
 |
 |
 |
| markov generator | json formatter | glitch text |
| tool | description |
|---|---|
| resistor decoder | color band → resistance value + tolerance |
| ohm's law calc | solve for V, I, R, or P — includes LED resistor calc |
| wire gauge reference | AWG ↔ mm², ampacity, resistance per km |
| capacitor decoder | 2-digit, 3-digit, EIA-198 codes → value |
| 555 timer calculator | astable & monostable frequency + timing |
| voltage divider | solve for Vout, R1, R2, or Vin |
| tool | description |
|---|---|
| code identifier | pattern matching for 41 programming languages |
| binary / hex converter | text & numbers → binary, hex, octal, decimal |
| regex tester | live highlighting, named groups, replace mode |
| json formatter | format, validate and minify json |
| timestamp converter | unix timestamps ↔ human readable dates |
| tool | description |
|---|---|
| markov generator | train on any corpus, generate new text |
| cut-up machine | burroughs-style text reassembly |
| glitch text | zalgo, wide, mirror, morse, binary & more |
| zine filler | placeholder text in 5 flavors |
| ascii generator | big text, image → ascii, pattern generator |
| tool | description |
|---|---|
| color palette gen | 6 harmony modes, click to copy |
| color converter | hex ↔ rgb ↔ hsl ↔ hsv ↔ oklch ↔ cmyk |
| hex color namer | poetic name + nearest css color name |
| color cheatsheet | css, tailwind, material, pastel, neon, earth |
| accessibility checker | contrast ratio, color blindness simulator, readable text |
| tool | description |
|---|---|
| zine imposer | 8-page mini-zine fold layout + folding guide |
| tool | description |
|---|---|
| unit converter | length, weight, temp, fabric, data, wire, pressure, speed |
- next.js 14 — app router
- tailwind css — utility classes
- ibm plex mono — the only font you need
- 100% client-side — no backend, no database, no api keys. nothing leaves your browser.
git clone https://github.com/yafira/tinytinker-tools
cd tinytinker-tools
npm install
npm run devopen http://localhost:3000 ✦
each tool is a single self-contained file. to add one:
- create a folder
app/tools/your-tool-name/ - add
page.tsxinside it — usecomponents/ToolPage.tsxas the wrapper - add it to the nav in
app/layout.tsx - add it to the grid in
components/ToolGrid.tsxwith a tag - add it to
components/FeaturedTools.tsx - open a pull request
see CONTRIBUTING.md for the full guide.
| tag | means |
|---|---|
calc |
computes a value from inputs |
gen |
generates content |
ref |
lookup / reference table |
decode |
decodes a code or format |
convert |
converts between formats |
test |
lets you test something live |
plan |
helps you plan or design |
guide |
educational reference |
the design lives in css variables in app/globals.css. key tokens:
--bg: #fdf8ff; /* main background */
--bg-sidebar: #e8e0f5; /* sidebar */
--accent: #6030a8; /* purple accent */
--border: #c8b8e8; /* borders */
--ink: #0f0820; /* primary text */
--font-mono: "IBM Plex Mono", monospace;dark mode is handled via [data-theme="dark"] on the html element.
please keep the aesthetic: monospace, lavender, warm, soft, handmade. ✦
tinytinker/
├── app/
│ ├── layout.tsx ← sidebar, nav, dark mode, mobile menu
│ ├── page.tsx ← homepage
│ ├── globals.css ← design tokens + global styles
│ └── tools/
│ ├── resistor/page.tsx ← each tool is one file
│ ├── ohms-law/page.tsx
│ └── ...
├── components/
│ ├── ToolPage.tsx ← shared wrapper (breadcrumb + header)
│ ├── FeaturedTools.tsx ← random featured section
│ ├── ToolGrid.tsx ← filterable tool grid
│ └── GitHubStars.tsx ← live star count
└── public/
├── flower.png ← our mascot ✦
└── screenshots/ ← readme screenshots
contributions are welcome! if you want to add a tool, fix a bug, or improve the docs, please read CONTRIBUTING.md first.
if you have an idea but do not want to build it yourself, use the tool request form or open an issue using the tool request template.
MIT — free to use, modify, and distribute with attribution.
copyright (c) 2026 Yafira Martinez (electrocute)
yafira · electrocute.io · @electrocutelab
nyu itp · design engineer & creative technologist · may 2026
made with curiosity. no logins. no ads. handmade web tools.