[GH-ISSUE #1273] Feature Request: UI Rework

kerem commented

2026-03-01 14:46:15 +03:00

Owner

Originally created by @aitorllj93 on GitHub (Nov 21, 2023).
Original GitHub issue: https://github.com/ArchiveBox/ArchiveBox/issues/1273

Type

Request modification of existing behavior or design

What is the problem that your feature request solves

This comes from a conversation with @pirate in the REST API status question. We both agree that would be nice to add a new UI to the project including state-of art technologies and patterns and improving the user experience

Describe the ideal specific solution you'd want, and whether it fits into any broader scope of changes

New FrontEnd built on top of Django Templates. Tailwind for the styles instead of Bootstrap. Possibly HTMX in case we need to add some extra JS logic. Additionally, we might need some additional JS libraries or components, in those cases we should have an open talk about the specific cases and reach to an agreement, by trying to minimize the impact on the application overall

I'm willing to contribute dev time to fix this issue
I like ArchiveBox so far / would recommend it to a friend

cc @pirate @zblesk

Originally created by @aitorllj93 on GitHub (Nov 21, 2023). Original GitHub issue: https://github.com/ArchiveBox/ArchiveBox/issues/1273 ## Type - Request modification of existing behavior or design ## What is the problem that your feature request solves This comes from a conversation with @pirate in the [REST API status question](https://github.com/ArchiveBox/ArchiveBox/issues/496#issuecomment-1817724215). We both agree that would be nice to add a new UI to the project including state-of art technologies and patterns and improving the user experience ## Describe the ideal specific solution you'd want, and whether it fits into any broader scope of changes New FrontEnd built on top of Django Templates. Tailwind for the styles instead of Bootstrap. Possibly HTMX in case we need to add some extra JS logic. Additionally, we might need some additional JS libraries or components, in those cases we should have an open talk about the specific cases and reach to an agreement, by trying to minimize the impact on the application overall --- - I'm willing to contribute [dev time](https://github.com/ArchiveBox/ArchiveBox#archivebox-development) to fix this issue - I like ArchiveBox so far / would recommend it to a friend cc @pirate @zblesk

kerem commented

2026-03-01 14:46:16 +03:00

Author

Owner

@aitorllj93 commented on GitHub (Nov 21, 2023):

@pirate feel free to assign me the issue, I can work on some prototyping this weekend so I can show you my ideas and we can define the scope and features that would be nice to include. I can also try to start including tailwind in the project although it's my first time with Django so I might need some help on that. Let me know if there's anyone else worth it to mention on the UI topic, I would love to hear some feedback on usability improvements we can include.

@aitorllj93 commented on GitHub (Nov 21, 2023): @pirate feel free to assign me the issue, I can work on some prototyping this weekend so I can show you my ideas and we can define the scope and features that would be nice to include. I can also try to start including tailwind in the project although it's my first time with Django so I might need some help on that. Let me know if there's anyone else worth it to mention on the UI topic, I would love to hear some feedback on usability improvements we can include.

kerem commented

2026-03-01 14:46:16 +03:00

Author

Owner

@aitorllj93 commented on GitHub (Nov 21, 2023):

This is an example of a previous pet project I worked on during my first try on HTMX. All the interactions, including the right drawer are built using htmx & tailwind. The only custom javascript there is for the epub reader library, which is an isolated template rendered after the html or htmx navigate to that specific page.

https://github.com/ArchiveBox/ArchiveBox/assets/5903438/59c94c3a-e3be-40b9-a25a-57b2cd237bce

@aitorllj93 commented on GitHub (Nov 21, 2023): This is an example of a previous pet project I worked on during my first try on HTMX. All the interactions, including the right drawer are built using htmx & tailwind. The only custom javascript there is for the epub reader library, which is an isolated template rendered after the html or htmx navigate to that specific page. https://github.com/ArchiveBox/ArchiveBox/assets/5903438/59c94c3a-e3be-40b9-a25a-57b2cd237bce

kerem commented

2026-03-01 14:46:16 +03:00

Author

Owner

@Victor239 commented on GitHub (Oct 17, 2024):

This would be enormously helpful to have thumbnails of all archived content, the current table is useful for seeing many items at a time but sometimes I'd rather be quickly reminded of what an item actually is via a thumbnail.

@Victor239 commented on GitHub (Oct 17, 2024): This would be enormously helpful to have thumbnails of all archived content, the current table is useful for seeing many items at a time but sometimes I'd rather be quickly reminded of what an item actually is via a thumbnail.

kerem commented

2026-03-01 14:46:16 +03:00

Author

Owner

@pirate commented on GitHub (Oct 17, 2024):

There is actually already a thumbnail grid view in the upper right of the filters area (on the snapshots admin list).

The button to use it is way too small, so most people don't see it. We should make it more prominent.

@pirate commented on GitHub (Oct 17, 2024): There is actually already a thumbnail grid view in the upper right of the filters area (on the snapshots admin list). The button to use it is way too small, so most people don't see it. We should make it more prominent.

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@Victor239 commented on GitHub (Oct 17, 2024):

Thanks, yeah had never noticed that before. The thumbnails don't seem to load for me though, but when I click on each item I can see a thumbnail underneath their SingleFile section at least:

@Victor239 commented on GitHub (Oct 17, 2024): Thanks, yeah had never noticed that before. The thumbnails don't seem to load for me though, but when I click on each item I can see a thumbnail underneath their `SingleFile` section at least: ![Image](https://github.com/user-attachments/assets/3d8e5dce-99c5-413b-84e8-04085961d396)

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@pirate commented on GitHub (Oct 17, 2024):

The Snapshot grid view thumbnails are only based on the screenshot output, so if you're missing that output which it looks like you are, then nothing will show.

Do you have chrome or the screenshot method disabled? If you open a new issue with the output of archivebox version I can help debug the missing screenshots.

@pirate commented on GitHub (Oct 17, 2024): The Snapshot grid view thumbnails are only based on the `screenshot` output, so if you're missing that output which it looks like you are, then nothing will show. Do you have chrome or the screenshot method disabled? If you open a new issue with the output of `archivebox version` I can help debug the missing screenshots.

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@Victor239 commented on GitHub (Oct 17, 2024):

I believe when I created these archives I only selected the SingleFile option. It's been a few years since I last used AB so getting familiar with it again after seeing the HN post.

It would be useful to have AB utilise the thumbnail from SingleFile, or whatever alternative archive types are available if screenshot wasn't selected. I think I might have not selected Screenshot as an additional archive type to reduce storage usage.

@Victor239 commented on GitHub (Oct 17, 2024): I believe when I created these archives I only selected the `SingleFile` option. It's been a few years since I last used AB so getting familiar with it again after seeing the HN post. It would be useful to have AB utilise the thumbnail from `SingleFile`, or whatever alternative archive types are available if screenshot wasn't selected. I think I might have not selected `Screenshot` as an additional archive type to reduce storage usage.

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@pirate commented on GitHub (Oct 17, 2024):

Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url.

@pirate commented on GitHub (Oct 17, 2024): Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url.

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@Victor239 commented on GitHub (Oct 17, 2024):

Thanks, will do!

@Victor239 commented on GitHub (Oct 17, 2024): Thanks, will do!

kerem commented

2026-03-01 14:46:17 +03:00

Author

Owner

@TomK32 commented on GitHub (Jan 16, 2025):

Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url.

Might make sense to generate a thumbnail (in landscape, or even better use the image provided in the open graph metadata if available) of the screenshot just for the grid view. I'll put some work into getting that grid/list view button into a spot where people can actually see it.

Other things about the grid: Link to the index.html, I'm not a fan of this massive header and prefer to be sent to the singlefile.html when I click the snapshot. Maybe I can make that configurable? There's too much noise on the grid view anyways: Do we care about the datetime, number of outputs or size in MB. Even the checkbox for selecting them is something that should be switched elsewhere or by tapping for a longer duration.

The filters weren't mentioned, but I'd love to change them to something like the date filters that Firefox's History window has: Today, Yestday, Last 7 Days, This Month, December 2024, ... older than 3 Months. Thoughts?

@TomK32 commented on GitHub (Jan 16, 2025): > Singlefile is fairly heavy to use for thumbnails, you'd effecitvley be loading iframes of 40 sites all at once to view the grid. I would re-enable screenshots, they're not too big usually, just an extra 1MB/url. Might make sense to generate a thumbnail (in landscape, or even better use the image provided in the open graph metadata if available) of the screenshot just for the grid view. I'll put some work into getting that grid/list view button into a spot where people can actually see it. Other things about the grid: Link to the `index.html`, I'm not a fan of this [massive header](https://github.com/ArchiveBox/ArchiveBox/issues/1273#issuecomment-2418747837) and prefer to be sent to the `singlefile.html` when I click the snapshot. Maybe I can make that configurable? There's too much noise on the grid view anyways: Do we care about the datetime, number of outputs or size in MB. Even the checkbox for selecting them is something that should be switched elsewhere or by tapping for a longer duration. The filters weren't mentioned, but I'd love to change them to something like the date filters that Firefox's History window has: Today, Yestday, Last 7 Days, This Month, December 2024, ... older than 3 Months. Thoughts?