Alphabet Soup

Served

A chef who climbs onto whichever text box you click, sets a soup pot on its edge, and steals the first of every letter and number you type. Once all 36 are in the pot, he packs up and leaves for good.

Try it

Click a box and start typing.

Name of the dish Ingredients Your email The chef won't touch this one. Secret family recipe Marked off-limits. Allergies He's off duty here.

Want your letters back? Click the pot.

What's really going on

Nobody needs this. It's built properly anyway.

What it looks like	What it actually proves
Your page's styles never bend him out of shape	Sealed off: he's drawn inside his own shadow DOM, so the page's styles can't reach him and his can't leak onto the page.
Spilled letters slot back in without breaking your page	Framework-safe edits: every theft changes the box the way the browser does and fires a normal input event, so React, Vue and friends stay in sync.
He walks to the exact letter you just typed	Pixel-accurate measuring: an invisible copy of the box finds where each character sits, padding, scrolling and wrapping included.
Type, paste or delete mid-reach and he still grabs the right one	Change tracking: each edit is compared with the last, so the theft follows your text, not an old copy of it.
He arrives, steals, snacks and leaves in order, however fast you type	A small queue: one thing at a time, in order, speeding up when there's a backlog.
Screen readers hear every theft	Accessibility: thefts are announced, "reduce motion" is respected, and nothing animates while he's idle.

Same skills, less theft: autocomplete, booking widgets, embeddable tools.

Add it to your site

One line. No dependencies, no build step.

<script src="https://cdn.jsdelivr.net/gh/buttersideupdev/alphabet-soup@2/alphabet-soup.js"></script>

Works on

Text areas, and text, search, URL and phone boxes.

Never touches

Password, email and number boxes, read-only or disabled boxes, and anything marked data-alphabet-soup="off" or "decline", or inside something that is.

Option	What it does
`data-size="0.7"` on the script tag	Chef size for the whole page. The default, `auto`, sizes him to the box's text.
`data-alphabet-soup-size="1.4"` on a box	Chef size on that one box.
`data-alphabet-soup="off"` on a box or a whole form	Keeps the chef away from it.
`data-alphabet-soup="decline"` on a box or a whole form	The chef pops up once, says he's off duty, and leaves it alone. Good for forms that matter.
`AlphabetSoup.setSize(0.7)`	Changes the size while the page is open.
`AlphabetSoup.reset()`	Hires a new chef with an empty pot, even after the last one left.

Code and docs on GitHub ↗ Free to use under the MIT license.