Raxol LiveView
Phoenix LiveView integration for Raxol terminal applications.
Render any TEA app in a browser via Phoenix LiveView, with real-time updates over WebSocket. Same init/1, update/2, view/1 callbacks -- no code changes needed.
Install
# mix.exs
def deps do
[{:raxol_liveview, path: "packages/raxol_liveview"}]
endModules
| Module | Purpose |
|---|---|
Raxol.LiveView.TerminalBridge | Buffer-to-HTML conversion with run-length encoded spans, style-to-CSS, diff highlighting |
Raxol.LiveView.InputAdapter | Translates browser keydown events to Raxol Event structs |
Raxol.LiveView.TEALive | Phoenix.LiveView that mounts and runs a TEA app via PubSub |
Raxol.LiveView.TerminalComponent | Phoenix.LiveComponent wrapper for embedding terminals in existing LiveViews |
Raxol.LiveView.Themes | 5 built-in themes (default, light, nord, dracula, synthwave84) with CSS custom properties |
Usage
Mount a TEA app in a LiveView:
defmodule MyAppWeb.TerminalLive do
use Phoenix.LiveView
alias Raxol.LiveView.TEALive
def mount(_params, _session, socket) do
TEALive.mount(socket, MyApp.Counter)
end
def handle_info(msg, socket), do: TEALive.handle_info(msg, socket)
def handle_event(event, params, socket), do: TEALive.handle_event(event, params, socket)
def render(assigns), do: TEALive.render(assigns)
endOr embed as a component:
<.live_component module={Raxol.LiveView.TerminalComponent}
id="my-terminal"
app_module={MyApp.Counter}
theme={:synthwave84} />
CSS asset at priv/static/raxol_terminal.css -- include in your layout.
Tests
cd packages/raxol_liveview && MIX_ENV=test mix test # 37 tests, 0 failuresSee LiveView cookbook for more patterns.