Floatype.js
https://github.com/knadh/floatype.js- Category
- Developer Tools
- Rank
- No. 1678Tools index
Previous survey · No. 1684 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- knadh
- GitHub
- 155 stars
- Latest release
- v1.2.2
- Date
About
Tiny zero-dependency floating autocomplete and autosuggestion widget for textareas — drop in for inline AI completions or address pickers.
What it does
Floatype watches the word before a textarea caret, sends it to an asynchronous suggestion provider, positions matching choices beside the caret, and replaces that word when the user selects one.
Why it's ranked here
This is a strong fit for one narrow interaction. It combines a very small stated footprint, no dependencies, keyboard selection, custom rendering, and explicit teardown. Its appeal drops quickly when an application needs input fields, richer parsing, request coordination, or built-in styling.
What's good
The integration contract stays compact: supply suggestions, optionally customize their display or selected value, and retain control of data fetching. Arrow keys cycle through choices, several common keys accept one, Escape dismisses the list, and unbinding removes listeners and the hidden measurement element.
Tradeoffs
The consumer must provide both suggestion data and CSS. Matching only considers the final non-whitespace run, so phrases and richer token rules need outside logic. Concurrent asynchronous responses are neither cancelled nor ordered, allowing an older response to replace newer results. Query failures also lack internal handling.
How to use it well
Use it for lightweight, word-oriented suggestions inside ordinary textareas, especially when an application already owns lookup logic and visual styling. Keep result requests fast and guard against stale responses externally. Choose another component for single-line inputs, full editor behavior, phrase-aware completion, or managed backend inference.
Technical notes+
floatype.js exports named and default floatype bindings, attaches input, keydown, and blur listeners, and returns an object with unbind. It mirrors computed textarea styles into a hidden shadow element to calculate caret coordinates, then inserts a fixed-position results box beside the textarea. query awaits opt.onQuery without cancellation, sequencing, or error handling. onRender may return a DOM node, while onSelect may transform the inserted value. The default onNavigate option is declared but never used. package.json exposes only floatype.js, declares no dependencies, and has a test script that exits with “no test specified.” docs/floatype.min.js is the minified browser module, and docs/index.html supplies example styling and usage.
Observed
- License
- MIT License
- Primary language
- JavaScript
- Packaging
- Published as the public npm package @knadh/floatype, with floatype.js as the sole packaged file
- Interface
- Browser ES module library with named and default exports
- Platform support
- Designed for browser textarea elements and relies on DOM and window APIs
- Dependencies
- No runtime dependencies declared
- Testing
- The package test script reports that no test is specified and exits with failure
Read from README.md, package.json, floatype.js, docs/floatype.min.js, LICENSE, docs/index.html.
What it can do
Display floating autocomplete suggestions
Text typed in textarea → Dropdown list of suggested completions
Provide AI-powered text completions
Partial text in textarea → Contextual text suggestions
Show address suggestions during typing
Partial address text → List of matching addresses
Auto-suggest text as user types
Characters being typed in textarea → Real-time suggestion overlay
Insert selected suggestion into textarea
User selection from suggestion list → Completed text in textarea
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.