Elixir Data Viewer - A web viewer for Elixir data structures

Your Libraries & OS Mentoring Libraries
, ,
1

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

    • :right_arrow_curving_left: 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.

12 Likes
2

Sounds nice – could you add some screenshots to the README, please?

3 Likes
3

Thank you. I suggest you visit the website directly and try out the online demo.

4

@feng19 - this looks really nice, and perhaps is something that could be used inside LiveView - have you thought about releasing a kino package to use this as a plugin?

5

Yes, that’s a great idea. I’ll try to implement it later.

6

done

2 Likes
7

Nice!

Side note: On your webpage you have a typo when linking to x_trace (you geta 404 from github)

You link to:

https://github.com/feng19/xtrace

instead of

8

Fixed, Thanks.