whatisgithub

What is visual-hn?

ilyaizen/visual-hn — explained in plain English

Analysis updated 2026-05-18

1PythonAudience · developerComplexity · 3/5LicenseSetup · moderate

In one sentence

Visual HN is a FastAPI backend that adds preview images, descriptions, and rank-trend indicators to a Hacker News clone, paired with a browser extension overlay.

Mindmap

mindmap
  root((visual-hn))
    What it does
      Enriches HN clone feed
      Fetches Open Graph previews
      Tracks position trends
      Browser extension overlay
    Tech stack
      Python
      FastAPI
      SQLAlchemy
      Playwright
    Use cases
      Self-hosted feed proxy
      Visual link previews
      Trend tracking
    Audience
      Developers
      HN enthusiasts

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Run a self-hosted proxy that enriches a Hacker News style feed with thumbnails and link previews.

USE CASE 2

Install the companion browser extension to see visual overlays on top of the live feed.

USE CASE 3

Track how a story's position rises or falls over time using the built-in trend tracking.

What is it built with?

PythonFastAPISQLAlchemySQLitePlaywright

How does it compare?

ilyaizen/visual-hn0xustaz/streamgatea-bissell/unleash-lite
Stars111
LanguagePythonPythonPython
Setup difficultymoderatehardhard
Complexity3/54/54/5
Audiencedeveloperdeveloperresearcher

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 1h+

Documented for Ubuntu servers only, requires Python virtual environment plus separate browser extension setup.

Permissive open-source license, use freely for personal or commercial purposes.

So what is it?

Visual HN is a small backend service that sits in front of an existing Hacker News clone site called hcker.news and adds visual context to its list of stories. Normally Hacker News style feeds show just plain text links and titles. This project fetches a preview image and description for each linked article, using a web standard called Open Graph metadata that many sites already provide for link previews, and then injects that information into the page you see. Beyond adding thumbnails and descriptions, the service also tracks how each story's position on the list changes over time, showing whether a story is rising, falling, or holding steady, and marks top performers with medal style indicators. All of this information is also made available through an API that a companion browser extension uses to overlay the enriched feed directly on top of the original site. Under the hood it runs on Python using the FastAPI web framework, storing data in a SQLite database accessed asynchronously. For fetching pages and images reliably, it uses tools that mimic real browser behavior to avoid being blocked, along with a headless Chrome fallback for trickier cases. The project also includes an older, now retired, standalone HTML frontend built with Tailwind CSS, though the main way to use it today is through the browser extension paired with the live proxy. Setting it up requires a Linux server, specifically documented for Ubuntu, along with Python 3.10 or newer. After cloning the repository and installing dependencies in a virtual environment, you start it locally and browse to a local address to see the enriched feed. The browser extension is loaded separately as an unpacked extension in Chrome or Edge developer mode. A live version of the service is running publicly for anyone who wants to try it without setting anything up themselves. The project is open source under the MIT license, and the author notes ongoing development is focused on refining the core proxy, the preview images, and the underlying API.

Copy-paste prompts

Prompt 1
Set up the Visual HN FastAPI backend locally and connect it to the hcker.news proxy.
Prompt 2
Explain how Visual HN fetches Open Graph metadata and generates thumbnail images for each story.
Prompt 3
Load the Visual HN browser extension unpacked in Chrome and walk me through its settings.
Prompt 4
Show me how the position trend tracking works in Visual HN's database module.

Frequently asked questions

What is visual-hn?

Visual HN is a FastAPI backend that adds preview images, descriptions, and rank-trend indicators to a Hacker News clone, paired with a browser extension overlay.

What language is visual-hn written in?

Mainly Python. The stack also includes Python, FastAPI, SQLAlchemy.

What license does visual-hn use?

Permissive open-source license, use freely for personal or commercial purposes.

How hard is visual-hn to set up?

Setup difficulty is rated moderate, with roughly 1h+ to a first successful run.

Who is visual-hn for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.