QIP TUI components

QIP TUIs are WebAssembly components that download from the web yet keep your data safe in a sandbox. The same component works in a terminal via qiptui and in the browser via <qip-tui>.

Try the examples #

Focus an example below to try it here, or run the command beneath it in your terminal.

Emoji finder

Type a name such as woman technologist, an emoji such as 👩, or a code point such as 1F469 in the input above the results. Use Up and Down to inspect another result. Its details appear below the list. Editing the query returns to the first result. The input limit is 1,024 UTF-8 bytes.

Emoji 18.0 entries appear after older entries. Each result shows its emoji and Unicode name. Code points appear in the active result’s details below.

npx qiptui qip.dev tui/emoji-finder.wasm

The finder contains 3,972 fully qualified emoji and emoji components from Unicode Emoji 18.0. The glyph you see depends on your system's emoji font. Newer sequences can appear as separate symbols or missing characters on current systems. The source data is distributed under the Unicode License v3.

The original finder is available as emoji-finder-old.wasm. Run npx qiptui qip.dev tui/emoji-finder-old.wasm for its Tab combination mode and Enter/Escape details view. Its combinations come from the Unicode list; it does not join arbitrary emoji.

Browser compatibility

Type part of a feature path, such as backdrop-filter or Navigator.gpu. Use Up and Down to select a feature. Chrome, Firefox, Safari, and Edge summaries appear below the list. Use Page Up and Page Down to read the longer support statements, including notes, flags, prefixes, and removed forms.

npx qiptui qip.dev tui/browser-compat-finder.wasm

This finder contains 13,603 Web API and CSS-property feature entries from MDN browser-compat-data 8.1.2, built 17 September 2026. It is a fixed snapshot, so check current data before making a release decision. Browser support can depend on an operating system, device, flag, or prefix; inspect the selected browser's statements before treating a version number as unconditional support.

Can I Use finder

Search Can I Use feature titles, slugs, or keywords, such as WebP, css-grid, or masonry. Use Up and Down to select a feature. Chrome, Firefox, Safari, and Edge summaries appear below the list. Use Page Up and Page Down to read the version histories and support notes.

npx qiptui qip.dev tui/caniuse-finder.wasm

This finder contains 554 features from a Can I Use data snapshot updated 24 September 2026. Data from caniuse.com is used under CC BY 4.0. It shows four desktop browsers; the source also covers mobile browsers. Support status can depend on flags, prefixes, and the conditions in each feature's notes. The snapshot does not update when browser releases change.

Media types

Type application/json, +xml, or an RFC number such as RFC 8259. Use Up and Down to select a media type. Its IANA label, references, and record date appear below the list. The list keeps IANA's obsolete and deprecated labels.

npx qiptui qip.dev tui/iana-media-type-finder.wasm

This finder contains 2,361 records from the IANA media-type registry, updated 22 September 2026. The registry list names types and references; it does not map file extensions or prove that a file has the stated format.

Service ports

Type a service such as https, a port such as 443, or both a port and protocol such as 53 udp. A number matches that exact port or a registered range containing it. Use Up and Down to select a registration. Its description, reference, assignee, dates, and assignment notes appear below. Use Page Up and Page Down to scroll long notes.

npx qiptui qip.dev tui/iana-service-port-finder.wasm

This finder contains 11,723 named rows with a port and transport protocol from the IANA service-name and port registry, updated 11 September 2026. It omits unassigned and reserved rows without a service name. A registration does not identify the traffic on a live port.

Top-level domains

Type a domain such as .dev, a type such as country-code, or a manager such as Charleston Road. Search also accepts Unicode labels such as 中国, while the list shows their ASCII (IDNA) form. Use Up and Down to select a row and read its details below. Edit the text to change the filter.

npx qiptui qip.dev tui/tld-finder.wasm

The finder contains 1,438 delegated domains from IANA's root-zone list, with types and managers from the root-zone database. Both were captured on 24 September 2026 (list version 2026092400). A delegated domain is not necessarily open for public registration.

Country finder

Type in the input to filter the list. For example, try aud, +61, or australia. Use Up and Down to select a row and read its details below. Edit the text to change the filter.

npx qiptui qip.dev tui/country-finder.wasm

The list contains 249 ISO alpha-2 entries from a pinned country-code data snapshot. Some calling prefixes include an area prefix, and some places list more than one currency.

The six finders above use host-managed text input and navigation. Their original eventful versions remain available with -old before .wasm, for example country-finder-old.wasm.

Time-zone converter

Focus the grid and type a city or IANA zone name, such as melbourne or london. Left and Right change the UTC hour; Up and Down change the UTC day. Press Tab to enter a UTC date and time as YYYY-MM-DD HH:MM. Page Up and Page Down browse the zone list.

npx qiptui qip.dev tui/time-zone-converter.wasm

The converter uses a fixed IANA tzdb 2026d snapshot for UTC dates from 2020 through 2037. It starts at a sample time, not the current time. Entering UTC avoids an ambiguous local input during a daylight saving change.

Calendar

Focus the calendar and press Up or Down to move between months.

npx qiptui qip.dev tui/calendar-gregorian.wasm

Debugger

This demo loads text/wc.wasm with sample text. Focus the debugger and press Space to run it, or ? to see the keys. Use the component debugger to inspect a component of your choice. Run the terminal command from the repository root so it can read text/wc.wasm.

Loading debugger sample…

npx qiptui qip.dev -F 'input=Hello' -F component=@text/wc.wasm tui/qipdb.wasm

EPUB reader

Pipe an EPUB into the text reader. It opens the chapters in the book's reading order, leaves space between paragraphs, and wraps their text to the current terminal width. It centers lines marked with text-align: center in inline styles or element, class, and ID stylesheet rules, or with align="center". Headings, strong/b text, and CSS bold text are bold. The reader also uses bold for large CSS text that a terminal cannot show at a larger font size. Block quotes are indented. Resize the terminal to reflow the page. Use Up and Down to scroll, Page Up and Page Down to move a screen at a time, Left and Right to change chapters, and Home and End to jump to the start or end.

cat book.epub | npx qiptui qip.dev -i - tui/epub-reader.wasm

The reader shows reflowable XHTML text and uses CSS for basic alignment, font weight, and large text. It skips images, other CSS layout, audio, and fixed-layout pages. The input EPUB can be at most 24 MiB; each extracted package or chapter can be at most 2 MiB. For illustrated books or precise page layout, use a full EPUB reading app.

How they work #

Each component renders a complete UTF-8 text frame. The emoji finder is a Content component: its host owns the query and active index, supplies both on each render, and provides a text field. The other examples keep interaction state inside the component and receive key events through Time and Events. Both hosts supply the screen size and redraw after changes. The terminal host also handles terminal mode and key decoding. See the TUI contract for input, navigation, timing, and ANSI rules.

Why qiptui keeps input local #

You can give a TUI a local file with -i or named fields with -F. This suits logs, tokens, customer exports, and other data you do not want to upload to a web tool. qiptui reads the files you name and passes their bytes to the Wasm component in memory. It does not upload those input bytes to the component's website.

Simon Willison's lethal trifecta describes the risk when a system combines private data, untrusted content, and a way to send data out. His article concerns AI agents, but these three capabilities are also a useful check for remotely downloaded software. qiptui gives the Wasm component no way to make a network request.

Command arguments select the module URLs and paths, including Wasm paths in -F fields. qiptui finishes those downloads before it starts reading keyboard events. The payload bytes read from -i or -F, and later key events, cannot change the download targets or trigger another download. This avoids the kind of state-dependent network request that a CSS background-image URL can make in a web page. Before copying input into the running Wasm instance's memory, qiptui checks that it fits the declared input capacity and memory. It rejects modules with imports, so the running component has no file system, process, environment, or network API. It cannot open other files, list processes, or send the input to a server. The host checks each rendered frame before writing it to the terminal. A component cannot issue arbitrary terminal commands.

The boundary applies to the Wasm component, not to the qiptui Node.js host. The host reads the paths you supply and downloads hosted Wasm over HTTPS on each run. The website can see that download request, and a publisher can change the Wasm it serves. Use a local Wasm file when you need to inspect a fixed version or run without contacting the component's website.

In the browser, <qip-tui> makes displayed HTTP and HTTPS URLs clickable. It does not fetch those URLs on its own. Opening a link is an explicit browser navigation to that address, so check the destination before you follow it.

What the sandbox rules out #

A TUI cannot work like ps or top: it cannot inspect live processes. It also cannot scan a directory, read an environment variable, or query an API on its own. Give it a file or form field containing the data to inspect. For a live system monitor or a tool that must discover files itself, use a host program with those permissions. For browser-hosted graphical applications, browse the GUI components.