woutdp/live_svelte

LiveSvelte is an Elixir library that integrates Svelte components into Phoenix LiveView applications, enabling developers to build rich, interactive frontends within the Phoenix ecosystem. It provides a bridge for client-server communication, server-side rendering, and hot module reloading, while offering a comprehensive set of examples and test utilities to demonstrate various integration patterns.

Introduces two new example applications: a 'Breaking News' component that displays a scrolling marquee of news items with add/remove functionality, and an 'Animated Number' component that increments/decrements a number with animation. Both examples demonstrate the new pattern of passing the LiveView socket as a \live\ prop to Svelte components, allowing the frontend to trigger backend events via \live.pushEvent\.

_examples/breaking\news · medium confidence

Users can now use Vite.js for server-side rendering by setting \ssr\_module: LiveSvelte.SSR.ViteJS\ in their configuration, which makes a POST request to the Vite dev server's \/ssr\_render\ endpoint. The existing Node.js-based SSR implementation has been moved into a new \LiveSvelte.SSR.NodeJS\ module, which is now the default for backwards compatibility. This change also fixes a memory leak in the Node.js SSR path by using dynamic \import\ of the ESM bundle instead of CommonJS \require\.

lib/ssr · high confidence

A new advanced chat example is introduced, featuring a Svelte component that manages message state and user input. The Svelte component utilizes Svelte 5 runes ($state, $effect) for state management and passes a \live\ prop to interact with the Phoenix LiveView backend. The corresponding LiveView module handles name assignment, message broadcasting, and state updates, demonstrating a full-stack chat interaction pattern.

_examples/advanced\chat · high confidence

The example project now includes standard Phoenix configuration files (config.exs, dev.exs, prod.exs, runtime.exs, test.exs) that set up the application for development, production, and testing environments. These files configure the database, endpoint settings, logging, and LiveSvelte SSR behavior, providing a complete baseline for the example project.

_example\project/config · high confidence

The example project now includes dedicated HTML templates for Svelte components, including a main landing page that organizes examples into categories like Basics, Interactive, Data, Slots, and Advanced. Specific component pages (Hello World, Lodash, Plus/Minus) are added to demonstrate rendering Svelte components within Phoenix templates.

_example\_project/lib/example\_web/controllers/page\html · high confidence

Added the \example\_project/lib\ directory containing the core Elixir modules for the example Phoenix application. This includes the main \Example\ context module and the \ExampleWeb\ module, which sets up the web layer by importing standard Phoenix controllers, live views, and HTML helpers. Notably, the \ExampleWeb\ module now imports \LiveSvelte\, enabling the use of Svelte components within Phoenix LiveViews.

_example\project/lib · high confidence

The example\_project directory now includes a Dockerfile for containerized builds, .formatter.exs and .gitignore configuration files, and database migration and seed scripts for the Notes entity, alongside updated README and gettext templates.

_example\project · high confidence

The example project now includes a complete Elixir/Phoenix application structure, featuring an Ecto repository configured for SQLite3, a Note schema with UUID primary keys, and a context module for managing notes. The application startup process has been updated to configure the LiveSvelte SSR environment, specifically setting up a Node.js supervisor for server-side rendering. Additionally, a release task is provided to handle database migrations in production environments.

_example\project/lib/example · high confidence

Added a new simple chat example that demonstrates using Svelte runes ($state, $props) and passing a live hook via the live prop, replacing the previous pattern of using pushEvent/pushEventTo for event handling.

_examples/simple\chat · high confidence

A new example demonstrating a simple dead view has been added to the examples/simple\_dead\_view directory. This includes a basic Svelte component (Simple.svelte) and a corresponding HTML template (simple.html.heex) that renders it.

_examples/simple\_dead\view · high confidence

Added new examples demonstrating Svelte store usage, including a shared store implementation and two Svelte components that bind to it, along with corresponding LiveView templates to render them.

examples/store · medium confidence

Added the \ExampleWeb.CoreComponents\ module, which provides a reusable modal component and a \demo\_page\ wrapper for consistent page layouts. Additionally, introduced \ExampleWeb.Layouts\ to define the main navigation structure, including sidebar and desktop dropdown menus that link to various example demos.

_example\_project/lib/example\web/components · high confidence

The example project now includes a new CSS file (app.css) that configures Tailwind CSS with custom theme colors, typography, and component styles for the UI. It also introduces a Tailwind plugin (hero-icons-plugin.js) that dynamically generates CSS classes for hero icons, enabling the use of SVG icons as background images or masks within the example project's styling.

_example\project/assets/css · high confidence

The example project now includes dedicated JavaScript entry points: a client-side bundle (app.js) that initializes Phoenix LiveView, integrates LiveSvelte hooks, and implements UI enhancements like active link highlighting and a navigation filter. A new server-side entry point (server.mjs) is also added to support server-side rendering for LiveSvelte components.

_example\project/assets/js · high confidence

LiveSvelte now provides a set of Svelte composables to interact with Phoenix LiveView without prop drilling. useLiveSvelte() exposes the raw hook context (pushEvent, pushEventTo). useLiveEvent() subscribes to server-sent events with automatic cleanup. useLiveConnection() provides a reactive boolean for WebSocket status. useLiveNavigation() enables client-side patch and navigate calls. A new Link.svelte component integrates with LiveView's data-phx-link attributes for seamless navigation. Additionally, useEventReply() offers a promise-based API for request-response events with loading states and cancellation. All new JS files include corresponding unit tests.

_assets/js/live\svelte · high confidence

The example project now includes the core Phoenix web layer files, providing a functional starting point for building web applications. This includes controllers for error handling (HTML and JSON), a page controller with routes for various examples (including Svelte, LiveView, and Ecto forms), a router defining browser and API pipelines, and a Telemetry module for monitoring application metrics. The endpoint is configured with session management, static file serving, and LiveView socket support.

_example\_project/lib/example\web · high confidence

The example project now includes a wider variety of Svelte components to demonstrate different capabilities. New examples cover live navigation, component composition, event replies, form handling, and state management via stores. The suite also adds demos for drag-and-drop, rich text editing, and debounced search, alongside updated counter and chat components.

_example\project/assets/svelte · high confidence

The example project now includes a comprehensive set of LiveView modules demonstrating various Svelte integration patterns. These include a breaking news ticker, a real-time chat interface, client-side loading states, component composition, drag-and-drop reordering, a rich text editor, event reply patterns, form handling with Ecto changesets, ID-based list diffing, a light bulb controller, a log list, client-side navigation, OTP JSON encoding for Ecto structs, plus-minus counters, props diffing, runed utilities, inline \~V sigil templates, simple counters, dynamic slots, SSR rendering, static color components, Svelte stores, and struct passing. Each module serves as a concrete demo for a specific capability, such as using the \\~V\ sigil for inline Svelte templates, leveraging \useLiveSvelte()\ for event pushing, or handling server-side validation with Ecto.

_example\_project/lib/example\web/live · high confidence

Added new layout templates for the example project, including a responsive header with mobile drawer navigation, a sidebar with search filtering, and a root template integrating Phoenix Vite assets and Google Fonts.

_example\_project/lib/example\web/components/layouts · high confidence

The project introduces several new configuration and tooling files to standardize code quality and development workflows. A Credo configuration (.credo.exs) is added to enforce code style and complexity limits, while a Dialyzer ignore file (.dialyzer\_ignore.exs) is created to suppress known false positives. Development environment setup is improved with a new Nix flake (flake.nix/flake.lock) and a .envrc file for direnv integration. Code formatting is standardized with a .prettierrc.json and .prettierignore, and the .gitignore is expanded to exclude build artifacts, Nix state, and macOS files. Additionally, the .formatter.exs is updated to include the Phoenix LiveView HTML formatter, and the repository root gains a comprehensive CHANGELOG.md and updated README.md.

(repo-wide) · high confidence

A new configuration file (config/config.exs) introduces default settings for the LiveSvelte library, including enabling Server-Side Rendering (SSR) via the ssr: true option, specifying the SSR module (LiveSvelte.SSR.NodeJS), and defining the server file path. Additionally, a test configuration file (config/test.exs) is added to set a minimum code coverage threshold of 87% for Excoveralls.

config · high confidence

The examples/simple area now includes new demo components: LogList, which displays a list of items with transitions and form handling, and Numbers, a simple counter. The existing Simple component has been moved to this location and updated to use Svelte 5 runes ($state, $props) instead of the previous export syntax. Additionally, the component now receives a live hook via the live prop and uses live.pushEvent for communication, replacing the previous pushEvent/props pattern.

examples/simple · high confidence

The example project now includes configuration files to support Svelte and TypeScript. A new svelte.config.js file configures the Svelte preprocessor, while tsconfig.json sets up TypeScript with ES2022 target and path aliases for $lib. Additionally, a vite.config.mjs file is added to configure the Vite build process, including SSR build settings, plugin integration for Svelte and Tailwind CSS, and output directory mapping to Phoenix's static assets folder.

_example\project/assets · medium confidence

The project's asset build process has been modernized by replacing the previous esbuild-based build script with a TypeScript configuration (tsconfig.json) and a Vitest testing setup (vitest.config.js). This change introduces strict TypeScript compilation for the frontend code and enables running unit tests using Vitest with jsdom and V8 coverage. The legacy build.js script and the Tailwind configuration file have been removed, indicating a shift away from the older build pipeline and Tailwind CSS configuration in this directory.

assets · high confidence

LiveSvelte now uses Erlang/OTP 27's native :json module by default for serializing data to JSON, with support for custom JSON libraries via configuration. A new LiveSvelte.Encoder protocol and LiveSvelte.JSON module handle the conversion of Elixir terms to JSON-compatible structures, including special handling for Ecto changesets, forms, and date/time types. Additionally, LiveSvelte.Test provides helpers for inspecting rendered Svelte components in tests, requiring the lazy\_html dependency.

_lib/live\svelte · medium confidence

The library has been refactored to use Phoenix LiveView components instead of LiveComponents, which removes the overhead of the component lifecycle and allows for more flexible slot handling. A new \LiveSvelte.Components\ module provides macros to automatically generate component functions for each \.svelte\ file found in \assets/svelte/\. Additionally, a \LiveSvelte.Reload\ module has been added to support Hot Module Replacement (HMR) via Vite in development environments, falling back to static assets in production. The old \LiveSvelte.LiveComponent\ and \LiveSvelte\ render functions have been removed or deprecated in favor of the new \svelte/1\ component.

lib · high confidence

The server-side rendering (SSR) utility in assets/svelte has been removed. This eliminates the previous mechanism for rendering Svelte components on the server, which previously required importing from a static server module to perform SSR rendering.

assets/svelte · medium confidence

The JavaScript files responsible for bootstrapping Phoenix LiveView and mounting Svelte components have been removed. This eliminates the client-side setup for Svelte components (app.js, hooks.js) and the server-side component registry (server.js), indicating a shift away from the previous Svelte-Phoenix integration pattern.

assets/js · high confidence

The previous manual setup tasks (configure\_esbuild, configure\_phoenix, install\_npm\_deps, and the main setup task) have been removed and replaced by a new \LiveSvelte.Install\ mix task. This new task leverages the Igniter framework to automatically configure the project, including setting up Vite, integrating with Phoenix LiveView, and managing dependencies. Users now run \mix igniter.install live\_svelte\ (or \mix igniter.install live\_svelte --bun\) to perform the entire installation and configuration process.

lib/mix · high confidence

Added comprehensive test coverage for the example project; Added comprehensive test suite for LiveSvelte core features; Added end-to-end tests for LiveView examples; Added integration tests for LiveSvelte SSR functionality; Adds PhoenixTest-based test coverage for LiveView examples.

The project's Elixir dependencies were updated, including raising the minimum Elixir version to 1.17, upgrading Phoenix to 1.7+, Phoenix LiveView to 1.0, and adding new dependencies like \phoenix\_vite\, \jsonpatch\, and \telemetry\. Development tooling was also updated with the addition of \credo\, \dialyxir\, \ex\_doc\ (v0.38), and \easy\_publish\, while older dev dependencies like \ex\_slop\ and \reach\ were introduced for code quality and CI checks.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 47 → 54 (+7.1)
• Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 82 → 79 (-3.1)
• Architecture 100 → 98 (-2.3)
• Maturity 65 → 65 (-0.0)
• Readiness 24 → 38 (+13.4)
• Security 64 → 78 (+13.7)
• Accessibility 62 → 62 (-0.1)

• Coverage not included — suite not readable by the collector
• Critical CVE: [GHSA redacted] (assets/package-lock.json)
• Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
• Duplicated block (9 lines × 4) (example_project/lib/example_web/components/layouts.ex)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• …and 34 more

• Coverage not measured — JavaScript/TypeScript suite
• Critical CVE: [GHSA redacted] (assets/package-lock.json)
• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (README.md)
• Duplicated block (10 lines × 4) (example_project/lib/example_web/components/layouts.ex)
• Duplicated block (8 lines × 2) (example_project/lib/example_web/live/live_chat.ex)
• Duplicated block (9–16 lines × 3) (example_project/lib/example_web/components/layouts.ex)
• FunctionTooLong: useLiveUpload.useLiveUpload (assets/js/live_svelte/useLiveUpload.ts)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (example_project/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• …and 85 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

woutdp/live_svelte was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.