--- title: GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let... description: Xenia is an open-source library that adapts any JavaScript npm package to work inside Phoenix LiveView. It ships 16 official adapters, including Monaco,... canonical: https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter. | daily.dev og:description: Xenia is an open-source library that adapts any JavaScript npm package to work inside Phoenix LiveView. It ships 16 official adapters, including Monaco,... og:url: https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue og:image: https://api.daily.dev/og/posts/6Nurb7HuE.png og:image:alt: GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter. og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter. **[ElixirStatus](https://daily.dev/sources/elixirstatus)** · 10 min read · 1 upvotes · 0 comments ## Summary Xenia is an open-source library that adapts any JavaScript npm package to work inside Phoenix LiveView. It ships 16 official adapters, including Monaco, Tiptap, Chart.js, D3, Tabulator, FullCalendar, Leaflet, xterm.js, and Uppy. Writing a custom adapter is much shorter than a hand-written LiveView hook: Monaco goes from a 58-line hook to a 21-line adapter. Xenia also offers optional file-based routing, where a page.ex file and folder structure define routes, similar to the Next.js App Router. It is MIT licensed and sets up a new Phoenix app via mix xenia.install. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I use a JavaScript library like Chart.js inside Phoenix LiveView without writing a full custom hook? Use Xenia, an adapter library for Phoenix LiveView. Install it via mix.exs with {:xenia, "~> 0.1.0"}, write a small adapter file defining mount, destroy, and props functions, register it in app.js with createHooks, then declare a component tag using Xenia.Components. A Chart.js adapter can be written in about 20 lines instead of a 58-line hand-written hook. _Developers wiring JS widgets into LiveView can track adapter patterns like this one on daily.dev._ ### What JavaScript libraries have ready-made LiveView integrations through Xenia? Xenia ships 16 official adapters covering Monaco and Monaco diff editors, Tiptap rich text, Chart.js and D3 charts, Tabulator data tables, FullCalendar, Leaflet maps, xterm.js terminals, flatpickr, Tom Select, Shoelace rating, SortableJS drag and drop, Uppy file uploads, and wavesurfer.js audio, including a multitrack variant. _Teams picking a charting or editor library for LiveView can compare these options on daily.dev._ ### Can Phoenix LiveView use folder-based routing similar to the Next.js App Router? Yes, Xenia supports optional file-based routing where a page.ex file's folder location becomes its URL, a [slug] folder becomes a parameter, (group) folders stay out of the URL, and layout.ex and persistent.ex files handle nested layouts and state that survives navigation between pages. It compiles to ordinary Phoenix 'live' routes, so mix phx.routes and the ~p sigil still work. _Elixir developers evaluating routing conventions for LiveView apps can follow approaches like this on daily.dev._ ## Similar posts on daily.dev - [Xenia — Xenia v0.1.1](https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb) · ElixirStatus · 1 upvotes · 0 comments - [xenia](https://daily.dev/posts/xenia-vktsmjpcz) · ElixirStatus · 0 upvotes · 0 comments - [Elixir Programming Language Forum](https://daily.dev/posts/elixir-programming-language-forum-qyfr7vfn8) · Elixir Forum · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#elixir](https://daily.dev/tags/elixir), [#web-components](https://daily.dev/tags/web-components), [#liveview](https://daily.dev/tags/liveview) [View this post on daily.dev](https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter.","url":"https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue"},"datePublished":"2026-10-26T21:57:11.849Z","dateModified":"2026-10-26T22:14:27.658Z","description":"Xenia is an open-source library that adapts any JavaScript npm package to work inside Phoenix LiveView. It ships 16 official adapters, including Monaco,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a1713091b0a8bfe6551ec7fb64b5afc5?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a1713091b0a8bfe6551ec7fb64b5afc5?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"ElixirStatus","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"ElixirStatus","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/22e4640538124187827caf8cc8e39190","url":"https://daily.dev/sources/elixirstatus"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,elixir,web-components,liveview","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ElixirStatus","item":"https://daily.dev/sources/elixirstatus"},{"@type":"ListItem","position":3,"name":"GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter."}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue#faq","mainEntity":[{"@type":"Question","name":"How do I use a JavaScript library like Chart.js inside Phoenix LiveView without writing a full custom hook?","acceptedAnswer":{"@type":"Answer","text":"Use Xenia, an adapter library for Phoenix LiveView. Install it via mix.exs with {:xenia, \"~\u003e 0.1.0\"}, write a small adapter file defining mount, destroy, and props functions, register it in app.js with createHooks, then declare a component tag using Xenia.Components. A Chart.js adapter can be written in about 20 lines instead of a 58-line hand-written hook. Developers wiring JS widgets into LiveView can track adapter patterns like this one on daily.dev."}},{"@type":"Question","name":"What JavaScript libraries have ready-made LiveView integrations through Xenia?","acceptedAnswer":{"@type":"Answer","text":"Xenia ships 16 official adapters covering Monaco and Monaco diff editors, Tiptap rich text, Chart.js and D3 charts, Tabulator data tables, FullCalendar, Leaflet maps, xterm.js terminals, flatpickr, Tom Select, Shoelace rating, SortableJS drag and drop, Uppy file uploads, and wavesurfer.js audio, including a multitrack variant. Teams picking a charting or editor library for LiveView can compare these options on daily.dev."}},{"@type":"Question","name":"Can Phoenix LiveView use folder-based routing similar to the Next.js App Router?","acceptedAnswer":{"@type":"Answer","text":"Yes, Xenia supports optional file-based routing where a page.ex file's folder location becomes its URL, a [slug] folder becomes a parameter, (group) folders stay out of the URL, and layout.ex and persistent.ex files handle nested layouts and state that survives navigation between pages. It compiles to ordinary Phoenix 'live' routes, so mix phx.routes and the ~p sigil still work. Elixir developers evaluating routing conventions for LiveView apps can follow approaches like this on daily.dev."}}]} ```