Grids Documentation
Welcome to the A New World: Grids developer documentation. Here you'll find everything you need to build custom overlays, integrate with the Edge API, and extend the game with your own UIs.
What is Grids?
Grids is a UE5 sandbox game set in The Grid — an infinite universe of player-owned Zones. Every player starts in The Nexus, the central hub, and can explore, build, trade, and purchase their own zones to customize however they want. Zones can be public spaces, private workshops, shopping malls, game arenas, or anything in between.
The game features a web overlay system — transparent web pages rendered on top of the game viewport using CEF (Chromium Embedded Framework). In-game UIs are built with React 19, Tailwind CSS 4, and TypeScript, giving developers the full power of the web ecosystem inside the game.
Quick Links
- The Grid — The infinite universe: zones, ownership, navigation, and discovery
- Zone Architecture — Dedicated servers, state replication, block streaming, and scalability
- Credits & Purchasing — In-game currency, Stripe payments, and the zone economy
- Overlays Overview — How the overlay system works (architecture, lifecycle, rendering)
- Getting Started — Create your first overlay with the CLI scaffolder
- SDK Reference — Full API reference for
@grids/overlay-sdk - Design System — Pre-built UI components via
@grids/ui - Edge API — REST API for assets, zones, authentication, and more
- Input & Interaction — Alt-key system, cursor toggle, context menus
- Asset Types — Supported asset formats and the library system
Architecture at a Glance
┌─────────────────────────────────────────────────┐
│ UE5 Viewport │
│ │
│ ┌─────────────┐ ┌──────────┐ ┌───────────┐ │
│ │ Asset │ │ Context │ │ Notifica- │ │
│ │ Browser │ │ Menu │ │ tions │ │
│ │ (overlay) │ │ (overlay)│ │ (overlay) │ │
│ └──────┬──────┘ └────┬─────┘ └─────┬─────┘ │
│ │ │ │ │
│ └──────────┬───┴──────────────┘ │
│ │ │
│ ┌──────────▼──────────┐ │
│ │ WebOverlaySubsystem │ │
│ │ (C++ / CEF bridge) │ │
│ └──────────┬──────────┘ │
│ │ │
│ ┌──────────▼──────────┐ │
│ │ OverlayContentServer │ │
│ │ (localhost:9735) │ │
│ └─────────────────────┘ │
└─────────────────────────────────────────────────┘
Each overlay is a standalone React SPA served from Content/Overlays/<name>/ via a local HTTP server. The @grids/overlay-sdk provides a typed bridge (window.ue.grids.*) for communication between JavaScript and C++.