Surface

Overview

Surface is a server-side rendering component library that allows developers to build rich interactive user-interfaces, writing minimal custom Javascript. It is built on top of Phoenix LiveView and its component API, leveraging the Phoenix Framework to provide a fast and productive solution for building modern web applications.

Features

• HTML-centric templating language: Designed specifically to improve development experience.
• Components as modules: Components can be stateless, stateful, renderless, or compile-time.
• Declarative properties: Allows explicit declaration of the inputs (properties and events) of each component.
• Slots: Placeholders declared by a component that can be filled up with custom content.
• Contexts: Allows a parent component to share data with its children without passing them as properties.
• Compile-time checking: Checks the template structure, components' properties, slots, events, and more at compile-time.
• Integration with editor/tools: Provides warnings/errors, syntax highlighting, jump-to-definition, auto-completion (coming soon), and more.

Summary

Surface is a server-side rendering component library that simplifies the development of rich interactive user interfaces. With features such as an HTML-centric templating language, modular components, declarative properties, slots, and contexts, Surface provides a fast and productive solution for building modern web applications. It seamlessly integrates with Phoenix LiveView and offers compile-time checking and tooling support for a smooth development experience. Installation is straightforward, and a sample component and a catalogue can be generated to quickly get started with using Surface in a Phoenix application.