HTMX 3D

HTMX 3D

Real-time multiplayer 3D game with server-side rendering. Built with Go (Fiber), HTMX, WebSockets, and custom hxsocketsfiber library.

Go, HTMX, WebSockets, Fiber
Started: 12/12/2023
Updated: 11/14/2025
htmx,web,3d,game,multiplayer,go
View Project GitHub

HTMX 3D Game Everything is a div

Overview

This project demonstrates the power of HTMX by building an interactive 3D experience without heavy JavaScript frameworks. It pushes the boundaries of what's possible with hypermedia-driven architecture.

Features

  • Real-Time Multiplayer - 250ms synchronization intervals with ~33 FPS per-player rendering
  • Server-Side 3D Rendering - Full 3D environment generated via Go templates and streamed as HTML
  • Image-Based Level Editor - Maps designed using a simple png where pixel colors map to wall types at specific junctions
  • Server-Side Physics - Complete physics engine with velocity, acceleration, friction, gravity, and collision detection
  • Custom WebSocket Library - Built with hxsocketsfiber, my custom Go library for HTMX WebSocket integration
  • HTMX-Powered - Uses HTMX and CSS transforms for rendering without heavy JavaScript frameworks

Multiple Players in Game Multiple players exploring the game world

Technical Implementation

Architecture Stack

  • Backend: Go with Fiber framework
  • Real-Time Communication: WebSockets via custom hxsocketsfiber library
  • Frontend: Server-side HTML templating (no React/Vue/etc.)
  • Rendering: HTMX for dynamic updates + CSS 3D transforms
  • Game Loop: 250ms multiplayer sync, 30ms per-player render loops (~33 FPS)

The project uses HTMX as the transportation layer and 3D CSS transforms as the rendering medium. This is intentionally ridiculous and impractical, but it has some interesting practical considerations.

Multiplayer Architecture

Each player receives:

  • Personalized 30ms render updates containing their 3D view
  • 250ms sync updates with all other players' positions
  • Real-time input handling via WebSocket message handlers
  • Server-authoritative physics and collision detection

Image-Based Level Design

Maps are created from PNG files where pixel colors map to different wall types:

  • White pixels → Industrial walls
  • Yellow pixels → Brick walls
  • Red pixels → Copper walls
  • Blue pixels → HTMXCon themed walls

Development Journey

Early Development - Picture 1 Initial development - the proof of concept

Early Development - Picture 2 The first map gen system

This initial map gen was built just using a in-code 2d array containing all the wall junctions

IFrames as Walls I just thought it'd be funny to see if I could put iframes on the walls because they are all just divs

It did seem to work but was understandably very laggy and extremly slow to load.

Debugging Phase Debugging... F

So debugging a 3d engine that is being rendered on your local machine is already hard enough but calculating movements and then projecting it in the browser is another thing.

CSS Walls Glitching CSS walls glitching into the 4th dimension

Interesting discoveries

  1. Multiplayer architecture is drastically simplier than something that has to be mostly client authoritative or mostly server authoritative. This system is entirely server authoritative.

  2. By using this method, we do get a lot of interesting capabilities, one of them being the iframes in game space. But the possibilities are truely endless. Anything you can you do in HTML can you project to game objects.

HTMX Con 2025

This project was showcased at HTMX Con 2025!

HTMX Con 2025 Demo Room Special demo room created for HTMX Con 2025

Demo Video

Full Conference Segment

Live Demo

Visit the live demo at htmx-3d.deastl.com to try it yourself!