Webhl
WebHL is a fork of hlviewer.js that uses the File System Access API to load game assets direct from your computer rather than from a server.
Install / Use
/learn @x8BitRain/WebhlREADME
WebHL
https://x8bitrain.github.io/webhl/
<img width="863" alt="image" src="https://user-images.githubusercontent.com/15372551/154827940-84fe96c7-c190-4998-9e09-b03cd7fc9279.png">WebHL is a fork of hlviewer.js that uses the File System Access API to load game assets direct from your computer rather than from a server, including recording. Interface design from from vgui.css
How to use
Click "Open Game Directory" and open your 'Half-life' game folder containing 'valve', 'gearbox', 'cstrike', 'tfc', etc folders, then choose a map or demo to load from the menu.
WASD, Ctrl or C and Space to move, F for fullscreen, esc to release mouse, and ~ to toggle the menu.
Click on the red circle in the bottom right to start recording footage, press again to download a webm.
Have fun!
Bugs
- Some sounds don't play in the right order.
- Demos keep playing in different when switching maps after playing a demo.
Troubleshooting
- "...can't open this folder because it contains system files"
- Unfortunately this is an unavoidable browser security feature. You might have to move your HL folder outside of Program Files to make it work, I recommend the Goldsrc package for this.
- Nothing loads after choosing a game folder:
- This is a browser bug on chrome, try a few more times, it works 3/5 times.
- Screen is black and or loads forever:
- The map probably isn't compatible with the BSP parser, or the map isn't installed in your game folder. Open the console in the browser developer tools and check to see if there's a specific error, that usually reveals the problem.
Developing
Install pnpm from https://pnpm.io and
git clone https://github.com/x8BitRain/webhl.git && cd webhl
Install dependencies
pnpm i
Run dev server
pnpm dev
Build for production
pnpm build
output will be under dist/
Related Skills
node-connect
343.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
92.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Writing Hookify Rules
92.1kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
review-duplication
99.7kUse this skill during code reviews to proactively investigate the codebase for duplicated functionality, reinvented wheels, or failure to reuse existing project best practices and shared utilities.
