TL;DR
Phoenix LiveView 1.2 has been officially released, adding colocated CSS capabilities and small enhancements. Developers can now embed CSS directly within HEEx templates, with ongoing work on CSS scoping support.
Phoenix LiveView 1.2.0 has been officially released, introducing colocated CSS support and other improvements, enabling developers to embed CSS directly within HEEx templates.
The new version, LiveView 1.2, builds on previous work by allowing developers to colocate CSS in HEEx templates, similar to how colocated JavaScript is handled. This is achieved through the use of the :type attribute, which extracts CSS content into a dedicated folder during compilation, facilitating integration with bundlers like Tailwind or Esbuild.
One of the key features is the potential for CSS scoping using the @scope rule, which allows rules to apply only within specific component boundaries. However, full browser support for @scope is limited at this time. The LiveView team has implemented an opt-in configuration for scoping via a new compile-time setting, but actual scoping functionality remains experimental and not shipped by default.
In addition to CSS features, LiveView 1.2 introduces several smaller enhancements: a new behavior for formatting <script> and <style> tags, automatic encoding of Phoenix.LiveView.JS structs in push events, configurable HEEx debug annotations, and more detailed documentation for the JavaScript client.
Impact of Colocated CSS and Future Scoping
This release is significant because it advances the integration of CSS within LiveView components, making it easier for developers to encapsulate styles and improve component modularity. Although full CSS scoping support is not yet available across browsers, the groundwork laid in LiveView 1.2 paves the way for more robust styling strategies in future versions, potentially reducing style conflicts and improving maintainability of complex applications.
Developers working with LiveView now have more options for organizing their styles directly within templates, aligning with modern front-end practices. The ongoing development of scoping features indicates a focus on component isolation, which could have long-term benefits for large-scale Elixir applications.
Elixir Phoenix LiveView development kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Background and Evolution of CSS in LiveView
Prior to LiveView 1.2, the framework supported colocated JavaScript within HEEx templates, allowing for more integrated client-side behavior. The addition of colocated CSS builds on this foundation, enabling styles to be embedded alongside component templates. The concept of CSS scoping using the @scope rule is relatively new and not widely supported across browsers as of June 2026.
Earlier versions of LiveView focused primarily on server-rendered interactivity, but recent updates have increasingly emphasized component encapsulation and developer convenience. The move toward colocated CSS reflects a broader trend in web development to improve style modularity and reduce global CSS conflicts.
“The addition of colocated CSS in LiveView 1.2 significantly simplifies component styling and aligns with modern front-end development practices.”
— an anonymous researcher
HEEx template CSS editor
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Limitations of CSS Scoping in Current Browser Support
The @scope rule is not yet well supported across browsers, and LiveView 1.2 does not include automatic scoping. The framework offers an experimental, opt-in approach, but full scoping functionality remains in development and is not shipped by default.
frontend development tools for Elixir
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Upcoming Developments and Expected Improvements
Further work on CSS scoping support is expected, with the LiveView team exploring alternative strategies and encouraging community feedback. Future releases may include broader scoping features, more comprehensive documentation, and enhanced developer tools for style encapsulation.
Developers should monitor the project’s GitHub repository and community channels for updates on scoping support and other planned features.
CSS scoping tools for web development
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Key Questions
What is new in Phoenix LiveView 1.2?
LiveView 1.2 introduces colocated CSS support, improvements to JavaScript encoding, configurable HEEx debug annotations, and other minor enhancements.
How do I enable colocated CSS in my project?
Update your mix.exs dependency to require ‘~> 1.2.0’ for phoenix_live_view, re-fetch dependencies, and add CSS within your HEEx templates using the :type attribute. Refer to the documentation for detailed setup instructions.
Is CSS scoping fully supported in LiveView 1.2?
No. Full CSS scoping support using the @scope rule is not yet supported across browsers. LiveView 1.2 provides an experimental, opt-in approach, but actual scoping features are still under development.
What are the main benefits of colocated CSS?
Colocated CSS allows styles to be embedded directly within component templates, improving modularity, reducing global CSS conflicts, and simplifying style management.
What features are planned for future LiveView releases?
Future updates are expected to include broader CSS scoping support, enhanced developer tooling, and further improvements to component encapsulation and styling strategies.
Source: Hacker News
