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.jsand 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 viajs_sources/0, which core's:phoenix_kit_js_sourcescompiler 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
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.