feng19
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-elixirparser, 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-elixirand@lezer/common/@lezer/highlight
Visit the website directly and try out the online demo.
Where Next?
Trending in Announcing
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #ai
- #phoenix_html
- #iex
- #elixirconf-us
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 7- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
dimitarvp
Sounds nice – could you add some screenshots to the README, please?
feng19
Thank you. I suggest you visit the website directly and try out the online demo.
c4lliope
@feng19 - this looks really nice, and perhaps is something that could be used inside LiveView - have you thought about releasing a
kinopackage to use this as a plugin?feng19
Yes, that’s a great idea. I’ll try to implement it later.
feng19
done
a-maze-d
Nice!
Side note: On your webpage you have a typo when linking to x_trace (you geta
404from github)You link to:
https://github.com/feng19/xtrace
instead of
https://github.com/feng19/x_trace
feng19
Fixed, Thanks.