--- title: Xenia — Xenia v0.1.1 | daily.dev description: Xenia is a library that connects JavaScript packages to Phoenix LiveView without hand-writing hooks for each one. It ships 16 official adapters, including... canonical: https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Xenia — Xenia v0.1.1 | daily.dev og:description: Xenia is a library that connects JavaScript packages to Phoenix LiveView without hand-writing hooks for each one. It ships 16 official adapters, including... og:url: https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb og:image: https://api.daily.dev/og/posts/EeYieIeWB.png og:image:alt: Xenia — Xenia v0.1.1 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. # Xenia — Xenia v0.1.1 **[ElixirStatus](https://daily.dev/sources/elixirstatus)** · 9 min read · 1 upvotes · 0 comments ## Summary Xenia is a library that connects JavaScript packages to Phoenix LiveView without hand-writing hooks for each one. It ships 16 official adapters, including Monaco, Chart.js, D3, Tabulator, FullCalendar, Leaflet, xterm.js, and Uppy. Monaco needed a 58-line hook by hand but only 21 lines as a Xenia adapter. The library also offers optional file-based routing, where page.ex defines a route and [id] marks a parameter, plus generators and a mix xenia.install setup command. ## 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 a Phoenix LiveView app? Install Xenia (version ~> 0.1.0) via mix.exs, run mix deps.get and npm install chart.js, then write a small adapter with mount, destroy, and props functions. Register the adapter in app.js with createHooks, declare a component tag using Xenia.Components, and use it directly in a LiveView template with props bound to assigns. _Developers wiring third-party JS into LiveView track adapter patterns like this on daily.dev._ ### How much code does it take to wrap Monaco editor for Phoenix LiveView without a library like Xenia? A hand-written LiveView hook for Monaco takes about 58 lines of JavaScript. Using Xenia's adapter pattern, the same integration shrinks to 21 lines, since Xenia handles prop diffing, event routing, cleanup on navigation, and commands sent from the server to a specific component instance. _Comparing integration effort across tools like this is easier to track on daily.dev._ ### How does file-based routing work in Phoenix with Xenia? Folders define routes similar to the Next.js App Router: a page.ex file makes a route, [slug] denotes a dynamic parameter, [...path] captures the rest of the URL, (group) folders stay out of the URL, and layout.ex files wrap nested pages with shared layout or on_mount hooks. It compiles to ordinary Phoenix live routes usable with mix phx.routes. _Elixir developers evaluating routing approaches can follow library updates like this on daily.dev._ ## Similar posts on daily.dev - [GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter.](https://daily.dev/posts/github---uzaydurdu-xenia-keep-phoenix-in-charge-let-javascript-do-what-it-does-best-any-js-librar-6nurb7hue) · 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/xenia-xenia-v0-1-1-eeyieiewb) ```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":"Xenia — Xenia v0.1.1","url":"https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb"},"datePublished":"2026-10-26T21:57:11.893Z","dateModified":"2026-10-26T22:23:23.395Z","description":"Xenia is a library that connects JavaScript packages to Phoenix LiveView without hand-writing hooks for each one. It ships 16 official adapters, including...","image":"https://media.daily.dev/image/upload/s--58gMhC4P--/f_auto/v1722860399/public/Placeholder%2012","thumbnailUrl":"https://media.daily.dev/image/upload/s--58gMhC4P--/f_auto/v1722860399/public/Placeholder%2012","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/xenia-xenia-v0-1-1-eeyieiewb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,elixir,web-components,liveview","timeRequired":"PT9M"} {"@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":"Xenia — Xenia v0.1.1"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/xenia-xenia-v0-1-1-eeyieiewb#faq","mainEntity":[{"@type":"Question","name":"How do I use a JavaScript library like Chart.js inside a Phoenix LiveView app?","acceptedAnswer":{"@type":"Answer","text":"Install Xenia (version ~\u003e 0.1.0) via mix.exs, run mix deps.get and npm install chart.js, then write a small adapter with mount, destroy, and props functions. Register the adapter in app.js with createHooks, declare a component tag using Xenia.Components, and use it directly in a LiveView template with props bound to assigns. Developers wiring third-party JS into LiveView track adapter patterns like this on daily.dev."}},{"@type":"Question","name":"How much code does it take to wrap Monaco editor for Phoenix LiveView without a library like Xenia?","acceptedAnswer":{"@type":"Answer","text":"A hand-written LiveView hook for Monaco takes about 58 lines of JavaScript. Using Xenia's adapter pattern, the same integration shrinks to 21 lines, since Xenia handles prop diffing, event routing, cleanup on navigation, and commands sent from the server to a specific component instance. Comparing integration effort across tools like this is easier to track on daily.dev."}},{"@type":"Question","name":"How does file-based routing work in Phoenix with Xenia?","acceptedAnswer":{"@type":"Answer","text":"Folders define routes similar to the Next.js App Router: a page.ex file makes a route, [slug] denotes a dynamic parameter, [...path] captures the rest of the URL, (group) folders stay out of the URL, and layout.ex files wrap nested pages with shared layout or on_mount hooks. It compiles to ordinary Phoenix live routes usable with mix phx.routes. Elixir developers evaluating routing approaches can follow library updates like this on daily.dev."}}]} ```