{"id":13424696,"url":"https://github.com/phoenixframework/phoenix_live_view","last_synced_at":"2025-09-09T20:53:09.910Z","repository":{"id":37812696,"uuid":"148402802","full_name":"phoenixframework/phoenix_live_view","owner":"phoenixframework","description":"Rich, real-time user experiences with server-rendered HTML","archived":false,"fork":false,"pushed_at":"2025-05-12T21:08:55.000Z","size":16720,"stargazers_count":6459,"open_issues_count":82,"forks_count":981,"subscribers_count":169,"default_branch":"main","last_synced_at":"2025-05-12T22:24:20.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/phoenix_live_view","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phoenixframework.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-12T01:27:33.000Z","updated_at":"2025-05-12T21:08:56.000Z","dependencies_parsed_at":"2024-02-10T09:28:45.480Z","dependency_job_id":"a120f893-e6b9-4972-8bb9-5860610bc9ad","html_url":"https://github.com/phoenixframework/phoenix_live_view","commit_stats":{"total_commits":3887,"total_committers":561,"mean_commits":6.928698752228164,"dds":0.6598919475173656,"last_synced_commit":"dc52a5aa77051b96c76f4f3a204def45f7403c4a"},"previous_names":[],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Fphoenix_live_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Fphoenix_live_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Fphoenix_live_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Fphoenix_live_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phoenixframework","download_url":"https://codeload.github.com/phoenixframework/phoenix_live_view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253928478,"owners_count":21985793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:58.003Z","updated_at":"2025-09-09T20:53:09.884Z","avatar_url":"https://github.com/phoenixframework.png","language":"Elixir","funding_links":[],"categories":["Elixir","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Phoenix LiveView\n\n[![Actions Status](https://github.com/phoenixframework/phoenix_live_view/workflows/CI/badge.svg)](https://github.com/phoenixframework/phoenix_live_view/actions?query=workflow%3ACI) [![Hex.pm](https://img.shields.io/hexpm/v/phoenix_live_view.svg)](https://hex.pm/packages/phoenix_live_view) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://hexdocs.pm/phoenix_live_view)\n\nPhoenix LiveView enables rich, real-time user experiences with server-rendered HTML.\n\nVisit the [https://livebeats.fly.dev](https://livebeats.fly.dev/) demo to see\nthe kinds of applications you can build, or see a sneak peek below:\n\nhttps://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4\n\n\u003cbr /\u003e\n\nLiveView ships by default in new Phoenix applications. After you\n[install Elixir](https://elixir-lang.org/install.html) on your machine,\nyou can create your first LiveView app in two steps:\n\n    $ mix archive.install hex phx_new\n    $ mix phx.new demo\n\n\u003e If you have an older existing Phoenix app and you wish to add LiveView,\n\u003e see [the previous installation guide](https://github.com/phoenixframework/phoenix_live_view/blob/v0.20.1/guides/introduction/installation.md).\n\n## Feature highlights\n\nLiveView brings a unified experience to building web applications. You no longer\nhave to split work between client and server, across different toolings, layers, and\nabstractions. Instead, LiveView enriches the server with a declarative and powerful\nmodel while keeping your code closer to your data (and ultimately your source of truth):\n\n  * **Declarative rendering:** Render HTML on the server over WebSockets with a declarative model, including an optional LongPolling fallback.\n\n  * **Rich templating language:** Enjoy HEEx: a templating language that supports function components, slots, HTML validation, verified routes, and more.\n\n  * **Diffs over the wire:** Instead of sending \"HTML over the wire\", LiveView knows exactly which parts of your templates change, sending minimal diffs over the wire after the initial render, reducing latency and bandwidth usage. The client leverages this information and optimizes the browser with 5-10x faster updates, compared to solutions that replace whole HTML fragments.\n\n  * **Live form validation:** LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and [specialized recovery](https://hexdocs.pm/phoenix_live_view/form-bindings.html#recovery-following-crashes-or-disconnects).\n\n  * **File uploads:** Real-time file uploads with progress indicators and image previews. Process your uploads on the fly or submit them to your desired cloud service.\n\n  * **Rich integration API:** Use the rich integration API to interact with the client, with `phx-click`, `phx-focus`, `phx-blur`, `phx-submit`, and `phx-hook` included for cases where you have to write JavaScript.\n\n  * **Optimistic updates and transitions:** Perform optimistic updates and transitions with JavaScript commands via `Phoenix.LiveView.JS`.\n\n  * **Loose coupling:** Reuse more code via stateful components with loosely-coupled templates, state, and event handling — a must for enterprise application development.\n\n  * **Live navigation:** Enriched links and redirects are just more ways LiveView keeps your app light and performant. Clients load the minimum amount of content needed as users navigate around your app without any compromise in user experience.\n\n  * **Latency simulator:** Emulate how slow clients will interact with your application with the latency simulator.\n\n  * **Robust test suite:** Write tests with confidence alongside Phoenix LiveView built-in testing tools. No more running a whole browser alongside your tests.\n\n## Learning\n\nCheck our [comprehensive docs](https://hexdocs.pm/phoenix_live_view) to get started.\n\nThe Phoenix framework documentation also keeps a list of [community resources](https://hexdocs.pm/phoenix/community.html), including books, videos, and other materials, and some include LiveView too.\n\nAlso follow these announcements from the Phoenix team on LiveView for more examples and rationale:\n\n  * [LiveBeats: Building a Social Music App With Phoenix LiveView](https://fly.io/blog/livebeats/)\n\n  * [Build a real-time Twitter clone with LiveView](https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5)\n\n  * [Build a real-time Twitch clone with LiveView and Elixir WebRTC](https://www.youtube.com/watch?v=jziOb2Edfzk)\n\n  * [Initial announcement](https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript)\n\n## Component systems\n\nWhen you create a new Phoenix project, it comes with a minimal component system to power Phoenix generators.\nIn case you want to enrich your developer experience, there are several component systems provided by the\ncommunity at different stages of development:\n\n* [Bloom](https://github.com/chrisgreg/bloom): The opinionated, open-source extension to Phoenix Core Components\n\n* [Doggo](https://github.com/woylie/doggo): Headless UI components for Phoenix\n\n* [Petal Components](https://github.com/petalframework/petal_components): Phoenix + Live View HEEX Components\n\n* [PrimerLive](https://github.com/ArthurClemens/primer_live): An implementation of GitHub's Primer Design System using Phoenix LiveView\n\n* [SaladUI](https://github.com/bluzky/salad_ui): Phoenix Liveview component library inspired by shadcn UI\n\n* [Mishka Chelekom](https://github.com/mishka-group/mishka_chelekom): Phoenix + LiveView UI kit and HEEx components\n\n* [Fluxon UI](https://fluxonui.com): Elegant and accessible UI components for Phoenix LiveView\n\n## LiveDebugger\n\n[LiveDebugger](https://github.com/software-mansion/live-debugger) is a debugging tool built specifically for Phoenix LiveView applications. It provides a real-time view into your LiveView processes, making it easier to understand the component hierarchy, inspect assigns, trace lifecycle callbacks, and troubleshoot issues more efficiently.\n\nTo get started, follow the setup instructions in the [LiveDebugger repository](https://github.com/software-mansion/live-debugger?tab=readme-ov-file#getting-started).\n\n## What makes LiveView unique?\n\nLiveView is server-centric. You no longer have to worry about managing\nboth client and server to keep things in sync. LiveView automatically\nupdates the client as changes happen on the server.\n\nLiveView is first rendered statically as part of regular HTTP requests,\nwhich provides quick times for \"First Meaningful Paint\", in addition to\nhelping search and indexing engines.\n\nThen LiveView uses a persistent connection between client and server.\nThis allows LiveView applications to react faster to user events as\nthere is less work to be done and less data to be sent compared to\nstateless requests that have to authenticate, decode, load, and encode\ndata on every request.\n\nWhen LiveView was first announced, many developers from different\nbackgrounds got inspired by the potential unlocked by LiveView to\nbuild rich, real-time user experiences. We believe LiveView is built\non top of a solid foundation that makes LiveView hard to replicate\nanywhere else:\n\n  * LiveView is built on top of the Elixir programming language and\n    functional programming, which provides a great model for reasoning\n    about your code and how your LiveView changes over time.\n\n  * By building on top of a [scalable platform](https://dockyard.com/blog/2016/08/09/phoenix-channels-vs-rails-action-cable),\n    LiveView scales well vertically (from small to large instances)\n    and horizontally (by adding more instances). This allows you to\n    continue shipping features when more and more users join your\n    application, instead of dealing with performance issues.\n\n  * LiveView applications are *distributed and real-time*. A LiveView\n    app can push events to users as those events happen anywhere in\n    the system. Do you want to notify a user that their best friend\n    just connected? This is easily done without a single line of\n    custom JavaScript and with no extra external dependencies\n    (no extra databases, no Redis, no extra message queues, etc.).\n\n  * LiveView performs change tracking: whenever you change a value on\n    the server, LiveView will send to the client only the values that\n    changed, drastically reducing the latency and the amount of data\n    sent over the wire. This is achievable thanks to Elixir's\n    immutability and its ability to treat code as data.\n\n## Browser Support\n\nAll current Chrome, Safari, Firefox, and MS Edge are supported.\nIE11 support is available with the following polyfills:\n\n```shell\n$ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-js\n```\n\nNote: The `shim-keyboard-event-key` polyfill is also required for [MS Edge 12-18](https://caniuse.com/#feat=keyboardevent-key).\n\nNote: The `event-submitter-polyfill` package is also required for [MS Edge 12-80 \u0026amp; Safari \u0026lt; 15.4](https://caniuse.com/mdn-api_submitevent_submitter).\n\n```javascript\n// assets/js/app.js\nimport \"mdn-polyfills/Object.assign\"\nimport \"mdn-polyfills/CustomEvent\"\nimport \"mdn-polyfills/String.prototype.startsWith\"\nimport \"mdn-polyfills/Array.from\"\nimport \"mdn-polyfills/Array.prototype.find\"\nimport \"mdn-polyfills/Array.prototype.some\"\nimport \"mdn-polyfills/NodeList.prototype.forEach\"\nimport \"mdn-polyfills/Element.prototype.closest\"\nimport \"mdn-polyfills/Element.prototype.matches\"\nimport \"mdn-polyfills/Node.prototype.remove\"\nimport \"child-replace-with-polyfill\"\nimport \"url-search-params-polyfill\"\nimport \"formdata-polyfill\"\nimport \"classlist-polyfill\"\nimport \"new-event-polyfill\"\nimport \"@webcomponents/template\"\nimport \"shim-keyboard-event-key\"\nimport \"event-submitter-polyfill\"\nimport \"core-js/features/set\"\nimport \"core-js/features/url\"\n\nimport {Socket} from \"phoenix\"\nimport {LiveSocket} from \"phoenix_live_view\"\n...\n```\n\n## Contributing\n\nWe appreciate any contribution to LiveView.\n\nPlease see the Phoenix [Code of Conduct](https://github.com/phoenixframework/phoenix/blob/master/CODE_OF_CONDUCT.md) and [Contributing](https://github.com/phoenixframework/phoenix/blob/master/CONTRIBUTING.md) guides.\n\nRunning the Elixir tests:\n\n```bash\n$ mix deps.get\n$ mix test\n```\n\nRunning all JavaScript tests:\n```bash\n$ npm run setup\n$ npm run test\n```\n\nRunning the JavaScript unit tests:\n\n```bash\n$ npm run setup\n$ npm run js:test\n# to automatically run tests for files that have been changed\n$ npm run js:test.watch\n```\n\nRunning the JavaScript end-to-end tests:\n\n```bash\n$ npm run setup\n$ npm run e2e:test\n```\n\nChecking test coverage:\n\n```bash\n$ npm run cover\n$ npm run cover:report\n```\n\nJS contributions are very welcome, but please do not include an updated `priv/static/phoenix_live_view.js` in pull requests. The maintainers will update it as part of the release process.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphoenixframework%2Fphoenix_live_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphoenixframework%2Fphoenix_live_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphoenixframework%2Fphoenix_live_view/lists"}