{"id":13466416,"url":"https://github.com/surface-ui/surface","last_synced_at":"2025-05-12T13:21:37.803Z","repository":{"id":37855523,"uuid":"197472304","full_name":"surface-ui/surface","owner":"surface-ui","description":"A server-side rendering component library for Phoenix","archived":false,"fork":false,"pushed_at":"2025-02-14T15:57:58.000Z","size":2786,"stargazers_count":2105,"open_issues_count":32,"forks_count":150,"subscribers_count":63,"default_branch":"main","last_synced_at":"2025-05-06T03:55:41.896Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://surface-ui.org","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surface-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-17T22:32:27.000Z","updated_at":"2025-05-05T00:02:55.000Z","dependencies_parsed_at":"2022-07-12T00:17:39.663Z","dependency_job_id":"b0165f40-5e9d-4c4a-a988-83d58ef6cf55","html_url":"https://github.com/surface-ui/surface","commit_stats":{"total_commits":717,"total_committers":58,"mean_commits":"12.362068965517242","dds":"0.36820083682008364","last_synced_commit":"33fb4052540432a3fb42819ea609496c8661a3b2"},"previous_names":["msaraiva/surface"],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surface-ui%2Fsurface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surface-ui%2Fsurface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surface-ui%2Fsurface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surface-ui%2Fsurface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surface-ui","download_url":"https://codeload.github.com/surface-ui/surface/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745198,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T15:00:43.839Z","updated_at":"2025-05-12T13:21:37.783Z","avatar_url":"https://github.com/surface-ui.png","language":"Elixir","funding_links":[],"categories":["Elixir"],"sub_categories":[],"readme":"# Surface\n\n[![Build Status](https://github.com/surface-ui/surface/workflows/CI/badge.svg)](https://github.com/surface-ui/surface/actions?query=workflow%3A%22CI%22)\n\nSurface is a **server-side rendering** component library that allows developers to\nbuild **rich interactive user-interfaces**, writing minimal custom JavaScript.\n\nBuilt on top of [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/) and its component API,\nSurface leverages the amazing Phoenix Framework to provide a **fast** and **productive** solution\nto build modern web applications.\n\nFull documentation and live examples can be found at [surface-ui.org](https://surface-ui.org).\n\n## Example\n\n```elixir\n# Defining the component\n\ndefmodule Hello do\n  use Surface.Component\n\n  @doc \"Someone to say hello to\"\n  prop name, :string, required: true\n\n  def render(assigns) do\n    ~F\"\"\"\n    Hello, {@name}!\n    \"\"\"\n  end\nend\n\n# Using the component\n\ndefmodule Example do\n  use Surface.Component\n\n  def render(assigns) do\n    ~F\"\"\"\n    \u003cHello name=\"John Doe\"/\u003e\n    \"\"\"\n  end\nend\n```\n\n## Features\n\n* **An HTML-centric** templating language, designed specifically to improve development experience.\n\n* **Components as modules** - they can be stateless, stateful, renderless or compile-time.\n\n* **Declarative properties** - explicitly declare the inputs (properties and events) of each component.\n\n* **Slots** - placeholders declared by a component that you can fill up with **custom content**.\n\n* **Contexts** - allows a parent component to share data with its children without passing them as properties.\n\n* **Compile-time checking** of the template structure, components' properties, slots, events and more.\n\n* **Integration with editor/tools** for warnings/errors, syntax highlighting, jump-to-definition,\n    auto-completion (soon!) and more.\n\n## Installation\n\nPhoenix v1.7 comes with built-in support for LiveView apps. You can create a new phoenix application with:\n\n```bash\nmix phx.new my_app\n```\n\n\u003e **Note:** In case you want to add Surface to an existing Phoenix application that doesn't have\nLiveView properly installed, please see Phoenix Liveview's installation instructions at\n[hexdocs.pm/phoenix_live_view/installation.html](https://hexdocs.pm/phoenix_live_view/installation.html).\n\nAdd `surface` to the list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:surface, \"~\u003e 0.12.0\"}\n  ]\nend\n```\n\n## Configuring the project using `mix surface.init`\n\nAfter fetching the dependencies with `mix deps.get`, you can run the `surface.init` task to\nupdate the necessary files in your project.\n\nIn case you want the task to also generate a sample component for you, use can use the `--demo` option.\nA liveview using the component will be available at the `/demo` route.\n\nAdditionally, the task can also set up a [Surface Catalogue](https://github.com/surface-ui/surface_catalogue/)\nfor your project using the `--catalogue` option. The catalogue will be available at `/catalogue`.\n\n\u003e **Note:** When using the `--demo` and `--catalogue` options together, the task also generates two\n\u003e catalogue examples and a playground for the sample component.\n\n```bash\nmix surface.init --demo --catalogue\n```\n\nStart the Phoenix server with:\n\n```bash\nmix phx.server\n```\n\nThat's it! You can now access your application at \u003chttp://localhost:4000\u003e.\n\nYou can see the full list of options provided by `surface.init` by running:\n\n```bash\nmix help surface.init\n```\n\nFor further information regarding installation, including how to install Surface manually,\nplease visit the [Getting Started](https://surface-ui.org/getting_started) guide.\n\n## Migrating from previous versions\n\nPlease see the [Migration Guide](MIGRATING.md) for details.\n\n## Tooling\n\n* [Surface Formatter](https://github.com/surface-ui/surface_formatter) - A code formatter for Surface.\n* [Surface package for VS Code](https://marketplace.visualstudio.com/items?itemName=msaraiva.surface) - Syntax highlighting support for Surface/Elixir.\n\n## License\n\nCopyright (c) 2020, Marlus Saraiva.\n\nSurface source code is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurface-ui%2Fsurface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurface-ui%2Fsurface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurface-ui%2Fsurface/lists"}