Autosize

Autosize is a small, standalone JavaScript library that automatically adjusts the height of HTML textarea elements to match their content, removing the need for a fixed rows attribute, a scrollbar, or hand-rolled resize handlers. It has zero runtime dependencies, accepts a single textarea, a NodeList, a plain array, or a jQuery collection through the same call, and ships as prebuilt UMD, ESM, and minified bundles alongside its ES module source.

Since v6 it recalculates height by reading live computed styles on every input event instead of caching stale values, which fixed a class of bugs around box-sizing, border widths, and max-height changes producing incorrect measurements. It exposes three methods — autosize(), autosize.update(), and autosize.destroy() — and dispatches a bubbling autosize:resized custom event so calling code can react to height changes, such as repositioning nearby elements.

What You Get

• A single autosize(elements) call that accepts a Node, NodeList, plain array, or jQuery collection
• autosize.update(elements) to force a height recalculation after programmatic value changes
• autosize.destroy(elements) to remove listeners and restore the textarea’s original inline styles
• Prebuilt UMD and minified bundles plus an ESM build in dist/, alongside the ES module source in src/

Common Use Cases

• Comment and message boxes that should grow as the user types instead of showing a scrollbar
• Chat composers that expand up to a max-height before switching to internal scrolling
• Admin/CMS description or bio fields where a fixed-row textarea always looks either too short or too tall
• Forms that load existing long-form text (e.g. editing a saved note) and need the height to match on load

Under The Hood

Architecture The entire library is a single ~200-line module (src/autosize.js) built around a module-level Map (assignedElements) that tracks which textareas have already been wired up, keyed by the element itself. assign() sets up input, window resize, and custom autosize:update/autosize:destroy listeners inside closures that capture per-textarea state (previousHeight, previousValue, the original inline styles to restore); destroy() and update() simply look up the tracked entry in the map and invoke its bound destroy/update function. There’s no class hierarchy or dependency injection — just closures plus a shared registry — but that registry is the one abstraction every public method (autosize, autosize.update, autosize.destroy) depends on, so changing its shape would break all three at once. Data flow is entirely DOM-event-driven: an input event triggers setHeight(), which reads getComputedStyle, writes ta.style.height, and dispatches autosize:resized for external listeners.

Tech Stack Plain ES2015+ JavaScript (Map, arrow functions, default parameters) with zero runtime dependencies. The only devDependency is microbundle, which compiles src/autosize.js into the three targets declared in package.json: dist/autosize.js (UMD, via main), dist/autosize.esm.js (via module), and dist/autosize.min.js (via unpkg). There’s no framework binding — it operates on raw DOM textarea elements and works with jQuery collections or NodeLists through duck-typing (checking for a .length property) rather than an adapter layer. No CI configuration was found in the cloned repository.

Code Quality No test files or test framework exist anywhere in the repository. Error handling is defensive rather than reported: guards check nodeName, whether an element is already tracked in assignedElements, and whether scrollHeight is 0 (indicating a detached or hidden element), but unexpected inputs are simply ignored rather than logged or surfaced. Naming is clear and consistent (assign, destroy, update, setHeight, cacheScrollTops), all camelCase, with a handful of inline comments explaining non-obvious browser workarounds. There is no TypeScript, no linter or formatter configuration, and no CI pipeline in the repository.

What Makes It Unique The core resizing technique isn’t novel — plenty of libraries, and now the CSS field-sizing property, solve the same problem — but this implementation handles several real-world edge cases that naive versions miss: it caches and restores parent elements’ scrollTop before shrinking a textarea so the page doesn’t visibly jump, respects max-height in any unit by toggling overflow once content exceeds it, and forces a WebKit text reflow (by briefly flipping text-align) after overflow changes because some browsers fail to recompute layout on their own. Its main value is being extremely small and dependency-free while still handling those edge cases carefully.