Hey, Elixir Forum. I’m excited to introduce LiveCapture, a storybook-like library for Phoenix LiveView components.

I like having stories for my components, but I’ve always felt some friction when creating and maintaining them. With LiveCapture, I tried to reduce the boilerplate as much as possible, up to the point where you don’t need to write stories at all to get a storybook.

Here’s an example of two simple LiveView components:

defmodule SimpleComponents do
  use MyAppWeb, :component
  
  capture_all()
  
  attr :name, required: true, default: "World"
  def greeting(assigns), do: ~H"Hello, {@name}!"

  attr :title, required: true, examples: ["H1 header"]
  def title(assigns), do: ~H"<h1>{@title}</h1>"
end

Just add capture_all() to capture all components in the module. You don’t need to do anything else, LiveCapture can infer component attributes automatically.

I’ve created an example module that shows typical capture patterns. LiveCapture also supports state variants, slots with HEEx templates, dynamic attribute resolution, and more.

Here’s a live example of a hosted storybook for all Phoenix LiveDashboard components.

The main use case for LiveCapture is local development, where you can quickly build and review complex UI states. For example, I was working on a component that renders a live transcription of an ongoing phone call. It helped a lot to be able to render different states without having to actually start a call.

Main features:

• Render HEEx components with predefined state snapshots
• Quickly test visual quality by switching between different width breakpoints
• Explore component documentation with dynamic state inspection
• Nice DSL with a strong focus on ergonomics and simplicity

If you like the project, please give it a star on GitHub.

P.S. I also built the Captures website, which hosts storybooks from other projects.

I’ll appreciate any feedback and your thoughts on the library.

https://github.com/achempion/live_capture