{"id":32164196,"url":"https://github.com/andyl/phoenix_live_editable","last_synced_at":"2026-02-21T03:03:09.679Z","repository":{"id":39578894,"uuid":"208457561","full_name":"andyl/phoenix_live_editable","owner":"andyl","description":"In-place editing for Phoenix Live View","archived":false,"fork":false,"pushed_at":"2023-08-29T09:51:24.000Z","size":26842,"stargazers_count":25,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-21T14:50:01.454Z","etag":null,"topics":["elixir","phoenix","phoenix-liveview"],"latest_commit_sha":null,"homepage":"https://phoenix-live-editable.fly.dev","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-14T15:10:37.000Z","updated_at":"2025-01-29T19:28:45.000Z","dependencies_parsed_at":"2023-01-30T05:31:02.205Z","dependency_job_id":null,"html_url":"https://github.com/andyl/phoenix_live_editable","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/andyl/phoenix_live_editable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyl%2Fphoenix_live_editable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyl%2Fphoenix_live_editable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyl%2Fphoenix_live_editable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyl%2Fphoenix_live_editable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyl","download_url":"https://codeload.github.com/andyl/phoenix_live_editable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyl%2Fphoenix_live_editable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29672272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T00:11:43.526Z","status":"online","status_checked_at":"2026-02-21T02:00:07.432Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["elixir","phoenix","phoenix-liveview"],"created_at":"2025-10-21T14:43:23.000Z","updated_at":"2026-02-21T03:03:09.673Z","avatar_url":"https://github.com/andyl.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phoenix.LiveEditable \n\nLiveView components for in-place editing. \n\nExample HEEX tag:\n\n    \u003cEditable.text value=\"Click me to Edit\" ple_action=\"save\"/\u003e\n\nAdd a handler to your LiveView:\n\n    def handle_event(\"save\", value, socket) end\n       ... do something ...\n    end\n\nSee the [online demo][ld] for running examples.\n\nLiveEditable is for admin interfaces to provide basic inline editing. It\nsupports many CSS frameworks (Tailwind3, Milligram, Bootstrap5, Bulma) and\nfield types (Text, Select, etc.).  LiveEditable is inspired by [Vitaliy\nPotapov's][vp] [X-Editable][xe], and is designed to be extensible.\n\nLiveEditable is pre-alpha - not ready for demo or production use.\n\n[ld]: http://phoenix-live-editable.fly.dev\n[xe]: http://vitalets.github.io/x-editable\n[vp]: https://github.com/vitalets\n\n## Demonstration \n\nDEMO IN YOUR BROWSER: \n\nTry the [online demo][ld]. \n\nDEMO USING DOCKER ON YOUR DESKTOP: \n\n    $ docker run -p 8080-8082:8080-8082 andyldk/phoenix_live_editable\n\nNow open a browser and visit `http://localhost:8080`\n\nDEMO BY CLONING THE SOURCE TO YOUR DESKTOP: \n\n    $ git clone https://github.com/andyl/phoenix_live_editable \n    $ cd phoenix_live_editable \n    $ mix deps.get\n    $ mix phx.server \n\nNow open a browser and visit `http://localhost:4040`\n\n## Installation\n\nPhoenixLiveEditable can be installed in your own LV application by adding\n`phoenix_live_editable` to your list of dependencies in `mix.exs`:\n\nUsing the path option: \n```elixir\ndef deps do\n  [\n    {:phoenix_live_editable, \n      path: \"~/src_root/phoenix_live_editable/apps/phoenix_live_editable\"}\n  ]\nend\n```\n\nUsing the github option: \n```elixir\ndef deps do\n  [\n    {:phoenix_live_editable, \n      github: \"andyl/phoenix_live_editable\",\n      subdir: \"apps/phoenix_live_editable\"}\n  ]\nend\n```\n\nUsing the hex option: \n```elixir\ndef deps do\n  [\n    {:phoenix_live_editable, \"~\u003e 0.0.1\"}\n  ]\nend\n```\n\nAfter that:\n\n    $ mix deps.get \u0026\u0026 mix deps.compile\n\nNext add LiveEditable configuartion to your `config/config.exs`:\n\n    config :\u003cyour_phoenix_app\u003e, \u003cyour endpoint\u003e, [\n      live_editable: [ple_renderer: \u003cYOUR_CSS_FRAMEWORK_MODULE\u003e]\n    ]\n\nValid Framework Modules include:\n\n    - Phoenix.Editable.Renderer.Milligram\n    - Phoenix.Editable.Renderer.Tailwind3 \n\nNow you can use LiveEditable in your LiveViews and LiveComponents:\n\n    defmodule MyApp.Live.Asdf do\n    end\n\n## Code Organization \n\nThe [LiveEditable Repo][gh] is an umbrella project.  This was done to make it\neasier to demo and test the LiveEditable components against a variety of CSS\nframeworks.  \n\n| Umbrella Subapp         | Description                                   |\n|-------------------------|-----------------------------------------------|\n| `phoenix_live_editable` | LiveEditable components                       |\n| `ple_demo_base`         | phoenix app with a landing page               |\n| `ple_demo_milligram`    | phoenix app with LiveEditable using Milligram |\n| `ple_demo_tailwind3`    | phoenix app with LiveEditable using Tailwind3 |\n| `ple_util`              | utility modules to support the demo apps      |\n\nNote that the LiveEditable package on hex.pm contains only the\n`phoenix_live_editable` subapp, not the demo apps.\n\n[gh]: https://github.com/andyl/phoenix_live_editable\n\n## Customizing and Extending LiveEditable\n\n** Renderer Modules **\n\nRenderer modules generate HTML for a specific CSS framework.\n\nBuilt-in renderer modules include: \n\n    Phoenix.Editable.Renderer.Bootstrap5\n    Phoenix.Editable.Renderer.Milligram\n    Phoenix.Editable.Renderer.Tailwind3\n\nA renderer module is selected in application configuration.\n\n    in config/config.exs... \n      \n    config :ple_demo_base, PleDemoBaseWeb.Endpoint,\n      url: [host: \"localhost\"],\n      secret_key_base: \"4GI1s5NnxDzI+Le2lVANn7DEDuC0KYYIOrBlbzMdEkuW0GoO92Hs8bUDEcZa20mM\",\n      render_errors: [view: PleDemoBaseWeb.ErrorView, accepts: ~w(html json), layout: false],\n      pubsub_server: PleDemoBase.PubSub,\n      live_view: [signing_salt: \"rRioLeCG\"],\n      live_editable: [ple_renderer: Phoenix.Editable.Renderer.Tailwind3]\n\nYou can fork a built-in renderer, or white a renderer from scratch for a new\nCSS framework. \n\nFor more information, see the **Renderer Guide**.\n\n** Handler Modules **\n\nHandler modules provide `event_handler` functions that can be used in multiple LiveViews.\n\nBuilt-in handler modules include: \n\n    Phoenix.Editable.Handler.Default\n    Phoenix.Editable.Handler.Test \n\nA handler module is selected in a LiveView:\n\n    def MyLiveView do \n\n        use Phoenix.LiveView\n        use Phoenix.Editable.Handler.Default \n\n        ...\n\n    end\n\nYou can fork a built-in handler, or white a handler from scratch, or not use\nhandlers, or use a combination of handler functions and custom functions.\n\nFor more information, see the **Handler Guide**.\n\n## Contributing\n\nThe scope of Phoenix.LiveEditable is to cover common [HTML5 input types][1],\n[common form controls][2] and basic features (inline/modals, tooltips, validation,\nautocompletion, etc.).\n\n[1]: https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types\n[2]: https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls\n\nPull requests welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyl%2Fphoenix_live_editable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyl%2Fphoenix_live_editable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyl%2Fphoenix_live_editable/lists"}