Elixir Data Viewer

A read-only web viewer for Elixir data structures with syntax highlighting, code folding, line numbers, and a Tokyo Night theme.

Built with vanilla TypeScript + DOM — no CodeMirror, no React — powered by lezer-elixir for accurate parsing.

Features

• Syntax Highlighting — Accurate Elixir syntax coloring via lezer-elixir parser, matching Tokyo Night theme

• Code Folding — Collapse/expand maps, lists, tuples, keyword lists, bitstrings, and multi-line strings

• Line Numbers — Gutter with line numbers and fold indicators

• Floating Toolbar — Per-viewer toolbar (appears on hover) with:

  • ⊟ Fold All

  • ⊞ Unfold All

  • Word Wrap toggle

  • ⎘ Copy to clipboard

  • ⧩ Filter by key

• Key Filtering — Hide specific key-value pairs by key name (e.g. filter out socket, secret_key_base)

• Multiple Viewers — Support multiple independent viewer instances on the same page

• Configurable Toolbar — Show/hide individual toolbar buttons via options or HTML data-* attributes

• Word Wrap — Toggle word wrap for long lines

• Zero Dependencies — Only peer dependencies on lezer-elixir and @lezer/common/@lezer/highlight

Visit the website directly and try out the online demo.

https://github.com/feng19/elixir-data-viewer