PhoenixKitBoards (PhoenixKitBoards v0.2.0)

Copy Markdown View Source

Collaborative infinite-canvas boards for PhoenixKit.

Admins open Boards in the sidebar, create a board, and open it — an infinite Fresco canvas with the Etcher drawing layer (shapes, text, images). Multiple people on the same board see each other's edits, cursors, and presence in real time. Each board is one row in phoenix_kit_boards (its Fresco.Canvas document lives in the data jsonb column).

How it works

  • Zero JS setup. PhoenixKit core already loads fresco.js + etcher.js and their hooks (the media annotation feature), so <Fresco.canvas> + <Etcher.layer> work in this module's pages out of the box. This module's own collaboration hook ships via js_sources/0, which core's :phoenix_kit_js_sources compiler folds into the host LiveSocket.
  • Collaboration rides the etcher document: each edit re-emits the full annotation list (etcher:annotations-changed); the LiveView persists it, broadcasts over PubSub, and peers apply the delta — no canvas remount.
  • Presence + cursors ride plain PubSub on the board's topic.

Installation

# host mix.exs
{:phoenix_kit_boards, "~> 0.1"}

Then mix deps.get and mix phoenix_kit.update (creates the phoenix_kit_boards table). Enable it on the admin Modules page.

Summary

Functions

Tailwind scans this app's templates for classes used by the board UI.

The collaboration + cursors hook bundle. Core's :phoenix_kit_js_sources compiler concatenates this into the host's phoenix_kit_modules.js (loaded before app.js) and folds window.PhoenixKitBoardsHooks into window.PhoenixKitHooks.

The phoenix_kit_boards table coordinator (run by mix phoenix_kit.update).

Multi-page routing (list + individual board) — see PhoenixKitBoards.Routes.

Functions

css_sources()

Tailwind scans this app's templates for classes used by the board UI.

js_sources()

The collaboration + cursors hook bundle. Core's :phoenix_kit_js_sources compiler concatenates this into the host's phoenix_kit_modules.js (loaded before app.js) and folds window.PhoenixKitBoardsHooks into window.PhoenixKitHooks.

migration_module()

The phoenix_kit_boards table coordinator (run by mix phoenix_kit.update).

route_module()

Multi-page routing (list + individual board) — see PhoenixKitBoards.Routes.