Surface is a component-based UI library for Phoenix LiveView that brings a declarative, template-driven approach to building interactive interfaces. Inspired by frameworks like React, it introduces components with typed properties, slots, and macros to simplify complex UIs. Developers can create reusable, encapsulated components that integrate seamlessly with LiveView’s server-rendered real-time model. Surface emphasizes readability, making templates feel closer to HTML while retaining Elixir’s functional power. It also provides form helpers, event bindings, and a growing ecosystem of ready-to-use UI components. By combining the productivity of declarative components with LiveView’s real-time updates, Surface enables rich, interactive apps without requiring a separate frontend framework like React or Vue.
Features
- Server‑side rendering component model for Phoenix LiveView
- Minimal need for custom JavaScript
- Rich built‑in components like buttons, tables, tabs, links, markdown, raw, dynamic components
- Template syntax with properties, events, slots, state management, JS interoperability, scoped CSS, contexts
- Enhances code organization and reusability in LiveView codebases
- Comes with documentation, blog posts, and example catalogue for learning
Project Samples
