Skip to content
A tool for visualizing and organizing media content.
JavaScript HTML CSS Batchfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


There is plenty of feature-rich and free software out there to organize your media content, and over the years I've tried many different options, but none stuck for a long time. From creating "shelves" in Trello to GoodReads, all have pros and cons. Some specialize in books, others geared toward movies or music. The online software usually has a "social" layer and more specialized while the standalone utils are more generic.

This project doesn't attempt to replace or compete with the similar software; instead, it offers, what I think, a unique set of features:

  • It uses Windows (possible to extend to other OSs) folder structure as the source of truth for your collection. So you only have to maintain it in one central place. This fundamental design decision provides a slew of benefits listed below.
  • Unlimited "nested shelves" or sub-shelves. This gives you flexibility in how you want to organize your content. E.g. Media>Books>Fiction>Historical>Crime>Europe>Middle Ages>Ellis Peters
  • Folder icons to visually rate the media.
  • Keep metadata (URLs, comments, reviews, etc) in the corresponding folders in simple text files.
  • Use any other software to perform a search or other actions to manipulate content or folders, as all the data is in open format.
  • Support both electronic media and shadow folders for your hard copy collection.

Because the UI is read-only (at this point) you can also think of this project as a glorified bookmark manager.

Live Demo

Click here to see the live demo.


How it works

  1. Create or adjust existing folder structure to represent your collection. See "Naming Convention".
  2. Run indexer every time you make modifications to the folders. See "To Run".

Naming Convention

  • Mugshot pictures should have a name "pic". The file extension doesn't matter.
  • If folder name starts with "en", "Series -", or "Short Stories" a line will be added in the UI to visually separate these folders from others.
  • readme.txt stores metadata for each folder.


  1. Install Node.js.
  2. Install Java.
  3. Install Mvn.
  4. Run "mvn package" inside media-visualizer\tools in a command line.
  5. Run "npm install -g http-server" in a command line.

To compile

  1. Navigate to media-visualizer\tools.
  2. run "mvn clean install" in a command line.

To run

  1. Configure media-visualizer\config\
  2. Run media-visualizer\index.bat This will run fat jar that indexes the media folder.
  3. Run media-visualizer\run.bat This will start the web server.


  • Media-Visualizer UI portion is based on d3 orgchart yammer. See demo here.
  • Images in media-visualizer\website\mv_img_static are from
  • Sample images in media-visualizer\books are from
  • Lots of other open source software!

Future Plans

  • Make an installer so that you don't have to manually install all the prerequisites.
  • Make indexer a service that watches the folders and updates index in real time.
  • Support other OS folder structures (mainly make sure we recognize other OS icons).
  • Make folder icons be configurable or provide a way to specify custom icons.
  • Make UI editable so that changes in the UI reflected in the folder structure.
  • Develop online service version with a social layer.
You can’t perform that action at this time.