{"id":32170919,"url":"https://github.com/damir/live_ui","last_synced_at":"2026-02-18T22:02:08.196Z","repository":{"id":225724540,"uuid":"766691019","full_name":"damir/live_ui","owner":"damir","description":"Set of macros for building Phoenix.LiveView modules","archived":false,"fork":false,"pushed_at":"2024-03-03T23:46:36.000Z","size":392,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-24T18:51:04.711Z","etag":null,"topics":["ecto","liveview","phoenix"],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/live_ui","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/damir.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-03-03T23:37:30.000Z","updated_at":"2025-02-22T01:32:17.000Z","dependencies_parsed_at":"2024-03-04T00:15:22.936Z","dependency_job_id":null,"html_url":"https://github.com/damir/live_ui","commit_stats":null,"previous_names":["damir/live_ui"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/damir/live_ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damir%2Flive_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damir%2Flive_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damir%2Flive_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damir%2Flive_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damir","download_url":"https://codeload.github.com/damir/live_ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damir%2Flive_ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29596329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T20:59:56.587Z","status":"ssl_error","status_checked_at":"2026-02-18T20:58:41.434Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ecto","liveview","phoenix"],"created_at":"2025-10-21T17:38:04.228Z","updated_at":"2026-02-18T22:02:08.190Z","avatar_url":"https://github.com/damir.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiveUI\n\nSet of macros for building `Phoenix.LiveView` modules to help manage database records.\n\nThis is done by configuring default implementation of `LiveUI` for a given `Ecto.Schema` struct and\ninitializing basic Index and Show live modules. This will in turn build the infrastructure for displaying\nand processing data without need to write boilerplate code associated with `m:Phoenix.LiveView#callbacks` callbacks and HEEX templates.\n\n`LiveUI` has the following features:\n\n* autogenerated views for CRUD operations\n* basic protocol implementation with sensible defaults\n* sortable tables with pagination\n* advanced search form\n* format values with css, functions and components\n* handles ownership to current user\n* handles relations\n* handles file uploads\n* support to override functions for data processing\n* support to override live view callbacks\n* custom actions for operations on single and multiple records\n* audit with record versioning\n* dark and light mode\n* debug mode that displays socket assigns\n\n`LiveUI` is possible because of these libraries:\n\n* `Cldr`\n* `Ecto`\n* `Faker`\n* `Flop`\n* `LiveInspect`\n* `LiveSelect`\n* `PaperTrail`\n* `PetalComponents`\n* `Phoenix`\n\n## Installation\n\n* add entry to `content` list in `assets/tailwind.config.js` - `../lib/live_ui/**/*.*ex`\n* add line to `assets/css/app.css` - `@import '../../../live_ui/lib/live_ui/assets/default.css'`\n* modify `root.html.heex` template - `\u003cbody class=\"bg-amber-50 dark:bg-gray-900 antialiased\"\u003e`\n* add `js-cookie` to `js/vendor` for theme switcher - \u003chttps://github.com/js-cookie/js-cookie\u003e\n* add theme switcher hook to `assets/js/app.js`\n\n  ```javascript\n  const ColorSchemeHook = {\n    deadViewCompatible: true,\n    mounted() {\n      this.init()\n    },\n    updated() {\n      this.init()\n    },\n    init() {\n      initScheme()\n      this.el.addEventListener(\"click\", window.toggleScheme)\n    },\n  }\n  ```\n\n* add switcher code to head in `root.html.heex` - `\u003cLiveUI.Components.Core.color_scheme_switch_js /\u003e`\n* add switcher icon to body in `root.html.heex` - `\u003cLiveUI.Components.Core.color_scheme_switch /\u003e`\n\n### Cldr\n\nAdd `Cldr` module:\n\n``` elixir\n  defmodule MyApp.Cldr do\n    use Cldr,\n      default_locale: \"en\",\n      otp_app: :my_app,\n      providers: [Cldr.Number, Money, Cldr.Calendar, Cldr.DateTime],\n      gettext: MyAppWeb.Gettext\n  end\n```\n\n### LiveSelect\n\nAdd hook to `assets/js/app.js` - \u003chttps://hexdocs.pm/live_select/readme.html#javascript-hooks\u003e\n\n### Petal components\n\nInstalation guide - \u003chttps://petal.build/components#install_petal_components\u003e\n\n## Configuration\n\n```elixir\n# live ui\nconfig :live_ui,\n  debug: true,\n  repo: MyApp.Repo,\n  cldr: MyApp.Cldr,\n  ignored_fields: [:token, :hashed_password, :first_version_id, :current_version_id]\n\n# petal components\nconfig :petal_components, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}\n\n# flop\nconfig :flop, repo: MyApp.Repo, default_limit: 10, max_limit: 100\n\n# cldr\nconfig :ex_cldr, default_backend: LiveUI.Cldr\nconfig :my_app, LiveUI.Cldr, locales: [\"en\"]\n\n# paper trail (optional)\nconfig :paper_trail,\n  repo: MyApp.Repo,\n  originator: [name: :user, model: MyApp.User],\n  strict_mode: true\n```\n\nThere is a sample aplication bundled with the project that has all these set up, just run\n`mix ecto.setup` to generate some random data and start the server with `iex -S mix phx.server`.\nAdmin credentials are `admin@example.com/password`.\n\n## Minimal setup\n\nEcto schema:\n\n```elixir\ndefmodule MyApp.User do\n  use Ecto.Schema\n\n  schema \"users\" do\n    field :name, :string\n    field :email, :string\n    timestamps()\n  end\nend\n```\n\nRouter entry:\n\n```elixir\nscope \"/\", MyAppWeb do\n  live_ui(\"/users\", UserLive, MyApp.User)\nend\n```\n\nProtocol file:\n\n```elixir\ndefimpl LiveUI, for: MyApp.User do\n  use LiveUI.Protocol\nend\n```\n\nLive modules:\n\n```elixir\ndefmodule MyAppWeb.UserLive.Index do\n  use LiveUI.Views.Index, for: MyApp.User\nend\n\ndefmodule MyAppWeb.UserLive.Show do\n  use LiveUI.Views.Show, for: MyApp.User\nend\n```\n\n## Is it any good?\n\n[Yes](https://news.ycombinator.com/item?id=3067434)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamir%2Flive_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamir%2Flive_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamir%2Flive_ui/lists"}