Arrow, Tokens, Lottie, SQLite & Social Cards in Browser
September 5, 2026 · DevTools
Columnar data, tokenizer output, animation JSON, relational queries, and link previews are all easier to trust when you can see inside them. These five tools open the box without leaving the tab: the Arrow IPC Stream Viewer, Token Boundary Colorizer, Lottie JSON Tweaker, SQLite WASM Studio, and Social Media Card Simulator.
Columnar data and relational queries without leaving the tab
Paste JSON records or drop a local IPC or Feather file and the viewer builds an Arrow table — via tableFromArrays for records or tableFromIPC for binary — reporting column names with display types, the row count, and a bounded row preview. Schema drift shows on sight: a retyped column, a vanished field, an empty batch behind the empty chart. Check the file before writing the loader.
SQLite WASM Studio loads the official SQLite WebAssembly build lazily so the initial page stays light, then opens an in-memory database. splitSqlStatements separates multi-statement scripts, executeSql runs them with SELECT results captured as columns and rows, readSchema inventories tables, indexes, views, and triggers from sqlite_master, and extractForeignKeyRelations derives the relationship graph purely from CREATE TABLE text:
CREATE TABLE orders (
id INTEGER PRIMARY KEY,
customer_id INTEGER REFERENCES customers(id)
);
-- studio reports: orders.customer_id -> customers.id
Prototype migrations and reporting queries against pasted fixtures here; promote the SQL once the snapshot shows the expected shapes.
Count what the model actually sees
Token counts decide cost, context-window fit, and chunking behavior, yet most developers estimate them by dividing character counts — wrong by wide margins on code and non-English text. colorizeTokens encodes the real text with the real tokenizer, supporting both o200k_base and cl100k_base, lazily loading the matching encoder and caching it for repeat runs. Each token decodes back to its surface text and receives a cycling color from the TOKEN_COLORS palette, so boundaries, splits inside words, and whitespace handling are all visible inline with per-run statistics.
Expect surprises: leading spaces fused onto words, indentation swallowed into single tokens, identifiers split where no human would cut. Paste the prompt, chunks, and a sample message, total the true counts, and size the context budget from evidence.
Recolor animations and preview the share card
parseLottieJson walks both assets and layers, collecting every embedded RGB color with its JSON path alongside a layer inventory of path, type, and name. replaceLottieColor writes a new color at a chosen path, channels validated as normalized numbers between 0 and 1, with hex helpers converting both directions and serializeLottie emitting clean two-space JSON. Rebranding an animation becomes a color swap per path — no After Effects, no rebuild — and canRenderLottie confirms preview support before you start.
extractSocialMeta parses raw HTML with regexes — no DOM — resolving the fallback chain from explicit tags to plain title and description elements. buildPlatformPreviews renders Twitter, Discord, and Slack cards so missing images and truncated descriptions are caught before publishing. Fix the tags, re-paste, and watch all three previews agree.
Try Them
- Arrow IPC Stream Viewer — schemas, row counts, and previews for IPC and Feather data.
- Token Boundary Colorizer — BPE boundaries for o200k and cl100k encodings.
- Lottie JSON Tweaker — preview animations and edit embedded colors by path.
- SQLite WASM Studio — full SQL with schema and foreign-key inspection.
- Social Media Card Simulator — Twitter, Discord, and Slack previews from meta tags.