[wkrp]

LiveView is so nice for full stack development, it's a wonderful palette cleanser after a day of enterprise programming.

I can attest to its JS interoperability. I have a project that streams data realtime into a liveview page that uses a combination of ag-grid, maplibre-gl, vega+lite, and Google's model-viewer all at once. All it takes is a little bit of JS plumbing to handle create and updates.

[Onewildgamer]

If it is possible can you share an example/samples integrating the mentioned libraries. I’m starting to learn LiveView again, mostly want to use aggrid and other custom libraries. An article highlighting the possibility and pointers to samples would greatly help everyone in this space.

[wkrp]

I don't have any examples from my code, so the best I can do is the relevant documentation.

Its all done using phx-hook https://hexdocs.pm/phoenix_live_view/js-interop.html#client-... . While the documentation makes it look a bit more fancy, it is just a JS object with mounted() function. I set up my columnDefs and gridOptions in that function, and add the handleEvent() callbacks that are where I get data from the elixir side using send_update/3. Ag-grids vanilla JS documentation has been very helpful for how to use it without the benefit of react/vue,