Whenever I see examples of LiveView being used it all works seamlessly but the UI always looks very simple, like basic forms, links and buttons. How does one build more custom/complex UI controls with it?
You can add "hooks" that attach to any normal element. Those hooks have access to push/pull data/events down the socket, so you can basically set up listeners on any element to trigger what would be your normal REST calls. In that respect you can hook your <canvas> into integrating with a liveview process, but obviously it wont receive any DOM difffing etc. If your entire UI is in a canvas, you're probably better off using another UI framework - but perhaps you would still benefit from having a "live process" on the server with a socket, especially if you have any kind of chrome around it. It can simplify lots of stuff in general such as long running tasks, not having to think about a REST API, etc.
People also integrate directly with React/Svelt/Vue/etc though I dont have personal experience with doing that.
I have a reasonably complex LiveView app that has a complex UI, but they're still forms in the end, if only dressed up. Mostly its composed of "function components" (static-y bits of mark up) or "live components" (things that have some internal state, that I want to separate [sic] from the main process).
you write components for it
LiveView is a channel to pass data back and forth between backend and frontend in a very performant and size-effective way, that hides all the complexity involved, making it astonishingly simple to get started.
The presentation layer it's up to the developers.
Wanna react to a change?
setup a `phx-*` event
Wanna handle some custom event?
Setup a hook [1] [2]
[1] https://hexdocs.pm/phoenix_live_view/js-interop.html
[2] example of reacting to Monaco editor events: https://github.com/BeaconCMS/live_monaco_editor#fetching-the...