surface
A server-side rendering component library for Phoenix that enables building rich interactive UIs with minimal JavaScript.
What is surface?
Surface is a server-side rendering component library built on top of Phoenix LiveView. It enables developers to build rich, interactive web applications with minimal custom JavaScript by leveraging the Phoenix Framework for fast, server-side UI rendering.
Elixir developers using the Phoenix Framework who want to build modern, interactive web applications with a component-based architecture while minimizing client-side JavaScript.
Developers choose Surface for its HTML-centric templating language, compile-time validation of templates and component properties, and strong editor integration, which together provide a productive and maintainable way to build complex UIs entirely from the server side.
Overview
A server-side rendering component library for Phoenix
Use Cases
Best For
- Building interactive web applications in Elixir with minimal custom JavaScript
- Creating reusable component libraries within Phoenix LiveView projects
- Developing server-rendered UIs with compile-time validation of templates and properties
- Implementing complex UI compositions using slots and contexts for data sharing
- Teams prioritizing developer experience with syntax highlighting, jump-to-definition, and auto-completion support
- Projects requiring strict interface definitions through declarative properties and events in components
Not Ideal For
- Projects requiring extensive client-side interactivity or offline-first functionality, as Surface minimizes JavaScript and depends on server connectivity.
- Teams using JavaScript-heavy front-end stacks like React or Vue, since Surface is deeply integrated with Elixir and Phoenix and doesn't interoperate with other frameworks.
- Applications where low-latency real-time updates are critical in high-latency environments, due to the server-round-trip nature of LiveView.
Pros & Cons
Pros
Provides a templating language specifically designed for web interfaces, improving developer experience with clear, declarative syntax as highlighted in the README.
Validates template structure, component properties, slots, and events during compilation, catching errors early and ensuring robustness, as mentioned in the features list.
Supports syntax highlighting, jump-to-definition, and auto-completion in tools like VS Code, enhancing productivity and reducing errors, per the tooling section.
Leverages Phoenix LiveView for fast server-side rendering, reducing the need for custom JavaScript and simplifying client-side complexity, aligning with the project's philosophy.
Cons
Only works within the Elixir and Phoenix ecosystem, making it unsuitable for polyglot projects or teams not committed to this stack, as it requires LiveView installation.
Not ideal for applications needing heavy client-side logic or dynamic UI updates without server round-trips, since it emphasizes server-side rendering and minimal JavaScript.
Requires Phoenix LiveView to be properly installed and configured, adding complexity for existing projects not already using LiveView, as noted in the installation instructions.
Frequently Asked Questions
Related Projects
plugCompose web applications with functions
commandedUse Commanded to build Elixir CQRS/ES applications
ex_adminExAdmin is an auto administration package for Elixir and the Phoenix Framework
torchA rapid admin generator for Elixir & Phoenix
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.