Quick Tip: <pre> Helper Component

You need a solid, scalable foundation for your digital product. That’s Elixir. Book a free consult today to learn how we can put Elixir to work for you.

As a follow-up to our previous post Debugging Complex Data in LiveView, here’s a useful tip: you can turn this approach into a reusable function component! Let’s see what that might look like:

attr :inspect, :any, required: true

def pre(assigns) do
  ~H"""
  <pre>
    <%= inspect(@inspect, pretty: true) %>
  </pre>
  """
end

Add the above to your core_components.ex, then use the component in any template where you want to inspect some data:

<div>
  <.pre inspect={@form[:my_field]} />

  <.form for={@form} ...>
    ...
  </.form>
</div>

Now as you interact with the form in your browser, you can watch the impact it has on the %FormField{} stored in the LiveView assigns.