Holodex: the Vue frontend behind a VTuber archive, mid rewrite to React

A frontend for a VTuber video archive, not the service itself

The repository description is blunt about what this is: Holodex frontend source code. The site it serves is holodex.net, a place where people browse and search archived video from Hololive and other VTuber streams, and the public topics are hololive, vtuber and vue. What sits in this repository is the browser side of that site, not a scraper, not a database, and not a backend. The service side lives elsewhere, which is why the setup notes tell you that by default the API is proxied to a staging environment. That distinction matters for anyone evaluating it: a contributor is joining a front end codebase that talks to an API it does not contain, so running the app locally without a working API endpoint gives you a shell rather than a working site. The licence is MIT, the default branch is dev, and the last push was on 2026-10-21, so the tree is being worked on daily.

The next branch is where the React rewrite lives

The most consequential line in the README is a warning rather than a feature description: the bulk of development is currently happening on the next branch, and anyone who wants to participate in Holodex React development should check that branch out and open pull requests against it, with the contribution and development readme located at /package/react/README.md. So the main tree is a Vue application while the active work is a parallel React implementation, and the repository is carrying two front ends at once. For a contributor this is the first thing to establish, because the difference decides whether your pull request is merged, ignored, or pointed at a codebase that is being retired. The project board is linked from the README as the place to see what is planned, and for major changes the README asks you to open an issue first to discuss the change before writing code.

Cloning the repo and running the dev server

The development setup is three commands, and the environment variable note is the part that trips people up. By default the API is proxied to staging, and to point it elsewhere you copy, rename and edit the .env.placeholder file at the repository root to change API_BASE_URL.

git clone [email protected]:HolodexNet/Holodex.git
npm install
# By default the api is proxied to staging, copy, rename and edit the .env.placeholder to change API_BASE_URL
npm run serve

The clone URL uses SSH, so you need a key registered with GitHub before it works. The production build is a separate command pair, and the second one analyses the bundle size rather than building it, which is a reasonable thing to have available given how heavy the dependency list is.

npm run build
# Analyzing build bundle size
npm run analyze-build

A Vue 2 and Vuetify stack with a large dependency surface

The package manifest describes the stack in full, and it is a Vue 2.7 application built on Vuetify 2, with Vuex and vuex-persistedstate for state, vue-router for routing, vue-i18n for translation, axios with axios-retry for HTTP, socket.io-client and vue-socket.io-extended for live updates, and a set of smaller utilities for dayjs dates, jwt-decode for tokens, oauth-open for the login flow, string-similarity for search, and youtube-player for embedded playback. There is also a workspaces entry pointing at src/external/vue-grid-layout, so one vendored dependency is maintained as a local package rather than taken from the registry. The scripts section shows the toolchain: Vite for serving and building, ESLint for linting with a lint-staged and husky pre-commit setup, and Jest for tests. The project also ships a .browserslistrc, a jest.config.js, a jsconfig.json, a tsconfig.json, a seo.html file, deploy.sh and deploy-staging.sh scripts, and a Placeholders.md, which suggests a fairly complete production pipeline around the application code.

Translations, live chat and tags are the features that shaped the code

The roadmap in the README is a good guide to what the application actually does, because each checked item is a feature the site has. Multi language support is listed as done, which matches the src/locales directory and the vue-i18n dependency, and the Crowdin badge in the README shows that the translation files are managed on Crowdin rather than edited by hand. Live chat features and TL transcript are done, which is what the socket.io client and the vue-socket.io-extended plugin are for. The music player, radio and tagging songs in singing streams are also done. The video tagging system was expanded, but the updated tagging system with user contributed tagging, tag aliasing and tag categories is still unchecked, as is the public API and API key for user accounts. So a public API for Holodex data does not exist yet, which matters if your interest in this project is programmatic access to the archive rather than the interface to it.

The source tree, one directory per concern

The project structure is documented as a tree in the README, and it maps cleanly onto a Vue application: components for the reusable pieces, views for the pages, a store where each file corresponds loosely to a page, a router for paths and views, plugins for Vuetify and i18n, mixins for shared behaviour, utils for helpers, and a locales directory for the UI text of each language. Two entries are worth calling out. The external directory holds components imported into the project for maintenance and updating, which is how the grid layout dependency is vendored. And App.vue is the main entry point that sets up the router view, which tells you the routing is component based rather than file based.

docs    # Changelog, hosted on Github Pages
public  # Static resources
src
├── components              # Vue components
├── locales                 # UI text translations for each languages
├── plugins                 # Vuetify, i18n and other plugin definitions
├── mixins                  # Vue mixins commonly used across components
├── external                # External components we imported into the project for maintenance / updating
├── router                  # Router definitions for path and views
├── store                   # Vuex store modules, each file loosley corresponds to each page.
├── utils                   # Utility declarations
├── views                   # Vue Page defintions
└── App.vue                 # Main entry point, sets up router-view

The docs directory holds the changelog and is hosted on GitHub Pages, which is where the public release notes live, and the src/external subdirectory is the reason the manifest has a workspaces key.

Where this codebase is the wrong starting point

Several things make this a poor foundation for a new product, and they are visible rather than hidden. The framework generation is dated. Vue 2.7, Vuetify 2, Vuex 3 and vue-router 3 are all the previous generation of their ecosystems, and the roadmap does not mention a Vue 3 migration because the plan is to leave Vue entirely for React on the next branch. Building a new feature on Vue 2 code in a repository that is actively replacing it means writing twice. The release history shows a single tagged release, 2.1, dated 2021-03-15, so five years of work have shipped without a new tag, which is fine for a continuously deployed site and unhelpful if you want a stable version to pin. The README also does not document a rollback, a public API contract, or a data export path, and the API itself is not in this repository, so you cannot run the whole product from this codebase alone.

Editorial conclusion

Use this repository if you want to run or contribute to a VTuber video archive frontend that already has multi language support, live chat and tag search in place. Do not start new work on the Vue code without reading the branch notes, because the README says most development happens on the next branch for the React version, and a Vue contribution to the main tree may land in code that is being replaced. Verify first which branch your change belongs on, and check the project board, because the roadmap still lists the public API and the user contributed tagging system as unfinished.

Frequently asked questions

Official sources

1. HolodexNet/Holodex on GitHub
2. License: MIT
3. Project website
4. README
5. Releases