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"}]
end

Modules

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)
end

Or 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 failures

See LiveView cookbook for more patterns.