phoenix-ash-svelte-flowbite

• Purpose: Demonstrates a web browser application integrating multiple modern web technologies for building reactive, collaborative, and styled applications.

• Key Features:

  • Phoenix 1.7 with LiveView 0.18 for real-time updates.
  • Svelte 4 support via LiveSvelte 0.11, enabling client-side UX enhancements like animations and CRDT counters with Yjs.
  • TailwindCSS 3.3 for styling, combined with Flowbite 1.8 for pre-built components (e.g., date picker, tooltips).
  • Ash Framework 2.9 for backend logic, including Ash Authentication.
  • Pyro for theme management (dark/light toggling) and component styling.
  • Svelte Skeleton 2 for additional UI components (tabs, accordions, toasts) and theme consistency.
  • Rich text editing with TipTap 2.1 and Milkdown 7.2 (Markdown, Mermaid diagrams, collaborative editing via Yjs).
  • Mermaid diagram rendering in Svelte.
  • Replaces Cowboy with Bandit 1.0 for the web server.

• Target Audience: Developers building full-stack, real-time web applications with Elixir/Phoenix and modern frontend tooling (Svelte, Tailwind). Ideal for those seeking collaborative editing (Yjs), rich text (TipTap/Milkdown), and UI consistency (Skeleton/Flowbite).

• Svelte Support: Prominent, with dedicated Svelte components (e.g., counters, Mermaid editor, Kanban board) and integration via LiveSvelte. Supports SCSS/PostCSS and disables SSR for stability.

• Collaboration: Includes Yjs for CRDT counters and Milkdown collaborative editing (requires a WebRTC server for cross-browser sync).

• References:

  • LiveSvelte video demo
  • Skeleton + Flowbite blog <i class="fa-solid