Skip to content

feat: add Django Lookbook (Storybook analogue) to repository#2209

Draft
herzog0 wants to merge 7 commits intodevelopfrom
teo/2205-lookbook
Draft

feat: add Django Lookbook (Storybook analogue) to repository#2209
herzog0 wants to merge 7 commits intodevelopfrom
teo/2205-lookbook

Conversation

@herzog0
Copy link
Copy Markdown
Collaborator

@herzog0 herzog0 commented Mar 18, 2026

⚠️ Disclaimer: most of the contents here were implemented by AI, but supervised, adapted, fixed and complemented by me. Some things may be incomplete or undesired, and I'm still in the process of thoroughly reviewing everything. I still think that the potential mistakes in this low-risk area are outweighed by the benefits gained by the implementation speed by a lot.

This PR adds the Django Lookbook component visualizer to the project.
This serves as a replacement to our current Storybook implementation, which uses React and lives in a different codebase.

image

Setup

  • Rebuild the project: docker compose up --build;
  • Navigate to http://localhost:8000/lookbook/ (don't forget the trailing /);

Pros & Cons

A good thing about moving to Lookbook is that it showed how some components were not working properly outside of the v3/demo/components page, giving us the possibility to fix some of those issues.

Some may find that the demo page is better for visualization, as all the components are there easily accessible (I tend to think that myself). We can always refactor the current implementation and condense some discrete pages into a single one, like the buttons section pages.

But, at its core, we get the basics: component catalog, implementation documentation, theme switching, component searching and grouping.

Missing Features & Current Issues

Django Lookbook is very minimal and doesn't offer many features like React Storybook does (like measuring, test s integration etc.).
Maybe a second test implementation could be made with storybook-django to see if that works well. The purpose here was to minimize the dependencies on anything related to Node.JS, but that comes at a cost.

Some components are showing weird behavior when displayed in Lookbook, like the install card, which overflows the dropdown trigger, but not its children:
image

The banner also spans full width, and I'm not sure what's causing this yet.
The learn card gets a weird font coloring when in dark mode.
Library intro card has some padding issues on the right.

There are other small styling issues like these, and I'm investigating each one of them, especially to guarantee that the tool is reliable and it's not it that it's causing the styling issues.
This is currently a Draft PR, and should be converted to a real one once these minor bugs are fixed.

@herzog0 herzog0 linked an issue Mar 18, 2026 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Storybook to Lookbook Migration: Spike and Implementation

1 participant