Hey everyone!

I’ve released Xenia (0.1, MIT). I got tired of writing the same JavaScript hook every time I wanted an editor, chart or map in LiveView, so I turned the reusable part into a library.

The idea: Phoenix stays in charge of your data and pages, the JavaScript library keeps doing what it’s good at (cursors, undo, zoom), and Xenia is the contract between them.

• JS islands. You write a small adapter saying how your library is created, updated and destroyed. Xenia does the wiring: props from your assigns (only changed ones reach the library), events back to handle_event, commands to one component, form fields, loading and error states, and cleanup on navigation. Any npm library works, and 16 come ready-made (Monaco, Chart.js, Leaflet, Tiptap, …):

  <.chartjs id="sales" type="bar" data={@sales} on_point_click="bar_clicked" />

• Pages from folders page.ex files become your live routes, a layout.ex frames the pages below it, and a persistent.ex stays alive while you move between them, so a sidebar or an open editor keeps its state. Underneath, it’s plain Phoenix routes and sticky LiveViews.

• Getting started: run mix xenia.install in a fresh mix phx.new app.

I’d love feedback, especially from anyone who has fought hooks for editors or maps.

GitHub: https://github.com/uzaydurdu/xenia

Hex: https://hex.pm/packages/xenia

Docs: https://xenia.hexdocs.pm