Phoenix Playground - The easiest way to run single-file Phoenix apps

I’m happy to announce a new project, Phoenix Playground, the easiest way to build single-file Phoenix apps.

Here is an example:


Mix.install([
  {:phoenix_playground, "~> 0.1.0"}
])

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def render(assigns) do
    ~H"""
    <span><%= @count %></span>
    <button phx-click="inc">+</button>
    <button phx-click="dec">-</button>

    <style type="text/css">
      body { padding: 1em; }
    </style>
    """
  end

  def handle_event("inc", _params, socket) do
    {:noreply, assign(socket, count: socket.assigns.count + 1)}
  end

  def handle_event("dec", _params, socket) do
    {:noreply, assign(socket, count: socket.assigns.count - 1)}
  end
end

PhoenixPlayground.start(live: DemoLive)

See Announcing Phoenix Playground blog post for more information and check out the GitHub repo. I’m looking forward to hearing what you are building with this.

Happy hacking!

46 Likes

Congratulations! This is HUGE for some use cases.
Based on what I read in the GitHub repo it seems I can create different pages with it that then I can properly route normally if I had to an existing project, correct?
Also, in the example you have a <style> tag. Can we use <script> tags that run properly on mount without the need of an Hook? (like, it just works…? :))

I’m excited to test this out for internal tooling where trusted users could interact with a livebook running a few of these.

I like the Kino library, but I’ve found it to be a massive context switch if I just want to throw together a quick page for an action that doesn’t deserve it’s own page in our admin portal, but where using an existing component or context module would be far easier to with something like this. I’m stoked to try it

1 Like