Settings View Source Phoenix.LiveEditable

LiveView components for in-place editing.

LiveEditable provides helpers for your LiveView/HEEX templates.

Example HEEX tag:

<.live_editable id="MyField" ple_data="Click me to Edit" ple_action="save"/>

Add a handler to your LiveView:

def handle_event("save", value, socket) end
   ... do something ...
end

See the online demo for running examples.

LiveEditable is for admin interfaces to provide basic inline editing. It supports many CSS frameworks (Tailwind, Milligram, etc.) and field types (Text, Select, etc.). LiveEditable is inspired by Vitaliy Potapov's X-Editable, and is designed to be extensible.

LiveEditable is pre-alpha - not ready for production use.

demonstration

Demonstration

IN YOUR BROWSER:

Try the online demo.

USING DOCKER ON YOUR DESKTOP:

$ docker run -p 8080-8082:8080-8082 andyldk/phoenix_live_editable

Now open a browser and visit http://localhost:8080

CLONING THE SOURCE TO YOUR DESKTOP:

$ git clone https://github.com/andyl/phoenix_live_editable 
$ cd phoenix_live_editable 
$ mix deps.get
$ mix phx.server 

Now open a browser and visit http://localhost:4040

code-organization

Code Organization

The LiveEditable Repo is an umbrella project. This was done to make it easier to demo and test the LiveEditable components against a variety of CSS frameworks.

Umbrella Subapp	Description
phoenix_live_editable	LiveEditable components
ple_demo_base	phoenix app with a landing page
ple_demo_milligram	phoenix app with LiveEditable using Milligram
ple_demo_tailwind3	phoenix app with LiveEditable using Tailwind3
ple_util	utility modules to support the demo apps

Note that the LiveEditable package on hex.pm contains only the phoenix_live_editable subapp, not the demo apps.

installation

Installation

PhoenixLiveEditable can be installed in your own LV application by adding phoenix_live_editable to your list of dependencies in mix.exs:

Using the path option:

def deps do
  [
    {:phoenix_live_editable, 
      path: "~/src_root/phoenix_live_editable/apps/phoenix_live_editable"}
  ]
end

Using the github option:

def deps do
  [
    {:phoenix_live_editable, 
      github: "andyl/phoenix_live_editable",
      subdir: "apps/phoenix_live_editable"}
  ]
end

Using the hex option:

def deps do
  [
    {:phoenix_live_editable, "~> 0.0.1"}
  ]
end

After that:

$ mix deps.get && mix deps.compile

Next add LiveEditable configuartion to your config/config.exs:

config :<your_phoenix_app>, <your endpoint>, [
  live_editable: [ple_interface: <YOUR_CSS_FRAMEWORK_MODULE>]
]

Valid Framework Modules include:

- Phoenix.LiveEditable.Interface.Milligram
- Phoenix.LiveEditable.Interface.Tailwind3 

Now you can use LiveEditable in your LiveViews and LiveComponents:

defmodule MyApp.Live.Asdf do
end

customizing-liveeditable

Customizing LiveEditable

Instructions on how to tweak LiveEditable CSS TBD.

extending-liveeditable

Extending LiveEditable

Instruction on how to create new LiveEditable modules TBD.