LiveCapture - zero-boilerplate storybook for LiveView components by Waffle creator

Your Libraries & OS Mentoring Libraries
, , , , ,
1

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.

15 Likes
2

Very interesting and an amazing alternative.
Is it possible to capture components from a dependency ?
Or the components must live in the same app where live capture is running
I am working a UI library and I would like to keep a separation between the main library and testing/playground?

3

Thank you! I built LiveCapture with the UI-library use case in mind.

You can mount the Storybook from any project that uses LiveCapture inside a playground app. For example, here’s how I mounted the Phoenix LiveDashboard Storybook inside the Captures app, which hosts storybooks from other open-source projects and libraries.

If you’d like, you can add your library there as well, and it’ll be available on the Captures website.

P.S. There’s a common pattern libraries use to set up a development playground for local testing. It’s usually a bare-bones Phoenix app defined in dev.exs (note the .exs extension). See LiveCapture’s dev.exs and Phoenix LiveDashboard’s dev.exs for reference.

Let me know if you have any questions or run into any rough edges. I’m happy to fix them.

4

Presented LiveCapture at Copenhagen Elixir meetup

5

Thanks for the detailed reply.
So I tried couple of way, but I am bit lost :sweat_smile:
My goal is to keep the component files as it is without modifying them
Is it possible to capture the components, without adding capture_all() inside the component file.
Here is the library if it helps, I would like to add live capture as a dependency but only in e2e app without modifying the original components

6

I’ve created a PR with integration example. Feel free to ping me in the linked PR.

1 Like
7

Thanks a lot, you are a saver. It works like a charm.
I will keep you updated with some stories

8

I’ve released a new version which adds component schema generation with component urls. It’s now become possible to use this schema with Playwright for visual regression testing.

Usage

mix live_capture.gen.schema --module MyAppWeb.LiveCapture --url-prefix /storybook path/to/captures.json

Output Format

captures.json

[
  {
    "schema": "MyAppWeb.LiveCapture",
    "breakpoints": [
      {"name": "s", "width": "480px"},
      {"name": "m", "width": "768px"}
    ],
    "captures": [
      {"module": "MyAppWeb.Example", "function": "simple", "variant": null, "url": "/storybook/raw/components/Example/button"},
      {"module": "MyAppWeb.Example", "function": "with_capture_variants", "variant": "main", "url": "/storybook/raw/components/Example/button/main"},
      {"module": "MyAppWeb.Example", "function": "with_capture_variants", "variant": "secondary", "url": "/storybook/raw/components/Example/button/secondary"}
    ]
  }
]
1 Like