A simple, intuitive web-based system for planning out server rack setups in the game Data Center. This tool is built with vanilla JavaScript and works entirely in the browser with GitHub Pages support. Fully AI slop, don't expect perfection.
✨ Drag & Drop Interface - Easily drag equipment from the library into racks
🏷️ Custom Labels - Label and add notes to each piece of equipment
🔗 Share Designs - Export designs as shareable links
💾 Local Storage - Auto-save designs locally for later
- Add Racks - Start with one rack (or click "+ Add Rack" for more)
- Drag Equipment - Drag items from the "Equipment Library" into a rack
- Organize - Arrange equipment to optimize your setup
- Label Items - Click equipment in a rack to add custom labels and notes
- Save - Click "Save" to persist your design locally
- Share - Click "Share" to get a link to share with others!
- Equipment sizes are shown in U (rack units) - e.g., a 3U device takes up 3 units of space
- Each rack has 47U of space
- Use the color coding to quickly identify equipment types
- You can delete equipment by clicking the × button in the modal
- Delete racks one at a time (minimum one rack must exist)
The "Share" button generates a URL with your design encoded in it. Share this URL with others to let them view/edit your design.
Designs are automatically saved to browser local storage. They persist between sessions on the same browser/device.
This project is licensed under the GPU GPL V3 License - see the LICENSE file for details.
Contributions are welcome! Feel free to submit issues and pull requests.
This project uses:
- Vanilla JavaScript (no frameworks)
- CSS3 with custom properties
- HTML5 Drag and Drop API
- LocalStorage API
- URL SearchParams API
All features work without any build process or external dependencies!