Question 1

How do I add Surface to an existing Phoenix app?

Accepted Answer

After adding Surface to your mix.exs dependencies, run 'mix surface.init' to update project files. You can use options like --demo for sample components or --catalogue for a component library, as detailed in the installation guide.

Question 2

What's the difference between Surface and plain LiveView?

Accepted Answer

Surface builds on LiveView by adding a component library with HTML-centric templating, compile-time checks, and declarative properties, whereas LiveView provides lower-level reactive UI capabilities without these structured abstractions.

Question 3

Can Surface be used with React or Vue?

Accepted Answer

No, Surface is tightly coupled with Elixir and Phoenix for server-side rendering and doesn't integrate with client-side frameworks like React or Vue. It's designed to minimize JavaScript and leverage server-side logic.

Question 4

How does Surface handle state management?

Accepted Answer

State is managed server-side through Phoenix LiveView's processes, with Surface components supporting stateless or stateful behaviors. Contexts allow data sharing between components without explicit property passing.

Question 5

Is Surface good for SEO?

Accepted Answer

Yes, because it uses server-side rendering, HTML is generated on the server and sent to the client, making content crawlable by search engines, which improves SEO compared to client-side rendered applications.

Question 6

Surface or React for building Elixir web apps?

Accepted Answer

Surface is ideal if you want to stay within the Elixir ecosystem with minimal JavaScript and server-side rendering, while React is better for teams needing rich client-side interactivity and a larger front-end ecosystem.

surface

What is surface?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions