Built on top of Phoenix LiveView and its component API, Surface leverages the amazing Phoenix Framework to provide a fast and productive solution to build modern web applications.
For installation instructions, please visit the Getting Started guide.
An HTML-centric templating language.
Components as modules - they can be stateless, stateful, renderless or compile-time.
Declarative properties - explicitly declare the inputs (properties, slots and events) of each component, including live components.
Slots - placeholders declared by a component that you can fill up with custom content.
Contexts - allows a parent component to share data with its children without passing them as properties.
Scoped CSS - allows defining CSS rules that are scoped by component avoiding conflicts between components styles and more.
Scoped JS hooks - allows defining JS hooks in colocated
.hooks.jsfiles that are automatically loaded without extra setup.
Compile-time checking for the templates, components and their properties, events, slots and many other validations.
Integration with editor/tools for warnings/errors, syntax highlighting, jump-to-definition, auto-completion (soon!) and more.
How to use it?
In order to have your templates automatically translated, you need to write the Surface code either wrapped in a
sigil or in a