Ideas on how to customise the layout?

[thbar]

Thanks for phoenix_playground, I find it very entertaining & useful at the moment!

This issue is a bit of a brain dump / raw user feedback, so bear with me!

I'm trying it on a MVP, and I need to customise the layout (add some custom CSS via Tailwind & a couple of similar stuff).

I made a couple of attempts.

The relevant code is at the moment there:

• https://github.com/phoenix-playground/phoenix_playground/blob/main/lib/phoenix_playground/layouts.ex
• https://github.com/phoenix-playground/phoenix_playground/blob/main/lib/phoenix_playground/routers.ex

I cannot see how to customise it without a fair amount of refactoring, so I looked for another solution.

layout can be set at mount time:

https://hexdocs.pm/phoenix_live_view/live-layouts.html#application-layout

But this is apparently only for layout, so it leaves no room to customise root_layout if I read correctly.

@wojtekmach do want to support customisable layouts ultimately?

Thanks!

[thbar]

I've worked around this (for now) by putting everything in the layout without any root_layout :smile:

[nileshtrivedi]

@thbar Just ran into this limitation. Possible to share a code example of how you achieved this? I am trying to pre-load Shoelace (webcomponents library) and Tailwind CSS, both from the CDN, into my page. I think that can be achived only with root_layout

[thbar]

At this point I have only used this trick:

defmodule DemoLive do
  use Phoenix.LiveView

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

  # SNIP
end

and before that:

defmodule MyLayout do
  use Phoenix.Component

  def render("live.html", assigns) do
# SNIP

Hope this helps!

[joshprice]

I've been using this method for single live views and it's simple and works well. Can import anything else you like in the same way.

  def render(assigns) do
    ~H"""
    <script src="https://cdn.tailwindcss.com"></script>
    <div class="flex justify-center items-center h-screen bg-black">
    </div>
    """
  end

I was initially trying to emulate this method from the original lib which isn't currently implemented:

https://hexdocs.pm/liveview_playground/tailwind.html#using-tailwind