A browser-based visual factory layout tool for Satisfactory built with React and Vite. Plan your factory floor, assign recipes, track throughput and power, and export your layouts — all without leaving the browser.
- Visual SVG canvas — drag-and-drop buildings onto a grid with pan & zoom
- 40+ buildings across six categories: Production, Extractor, Power, Storage, Logistics, and Special
- Zone system — draw named, color-coded zones to organize production areas with preset labels (Iron, Copper, Steel, Oil, Nuclear, and more)
- Belt & connection system — wire buildings together with conveyor belts (Mk.1–Mk.6), conveyor lifts, pipes, rails, or manual routes; over-capacity connections are flagged with warnings
- Live recipe data — loads
Recipes.jsonat runtime and maps every production recipe to its correct machine, including alternate recipes - Clock speed tuning — adjust per-building clock speed from 1% to 250%; power draw is computed using the real Satisfactory formula (
base × clock^1.321928) - Effective rate display — see live input/output throughput per item at the configured clock speed
- Multi-floor support — plan across a logistics basement, ground floor, and floors 1–4; cross-floor connections are highlighted with directional markers
- Production summary — factory-wide net produced/consumed rates per item
- Smart Splitter & Priority Merger config — set per-output rules (Any, None, Overflow, Item) directly in the UI
- Warnings & validation — missing recipes, mismatched machine assignments, invalid clock speeds, and over-capacity belts are all surfaced automatically
- Autosave — layout is continuously saved to
localStorage - Export / Import / Merge — save layouts as JSON, load them back, or merge two layouts together without ID collisions
| Key | Action |
|---|---|
1 |
Zone tool |
2 |
Place tool |
3 |
Belt/connect tool |
4 |
Select tool |
5 |
Delete tool |
R |
Rotate selected building 90° |
Del / Backspace |
Delete selected entity |
PageUp / PageDown |
Switch active floor |
Esc |
Cancel active operation |
| Middle-click / Alt+drag | Pan canvas |
| Scroll wheel | Zoom canvas |
- Node.js v18 or later
Recipes.jsonplaced atpublic/data/Recipes.json(see Data Sources below)
npm install
npm run devThen open http://localhost:5173.
npm run buildThe output lands in dist/ and can be served from any static host (Vercel, Netlify, GitHub Pages, etc.).
Recipe data is sourced from the Satisfactory community wiki:
Download the JSON from that page and place it at:
public/data/Recipes.json
The planner fetches this file at runtime and normalizes it into an internal recipe map, item registry, and per-machine index. Alternate recipes, generator fuel recipes, and build-gun recipes are all classified automatically.
Docs.json ships inside the game's local files and contains Unreal Engine class descriptors for every item, building, and recipe in the game. You can find it at:
<SatisfactoryInstallDir>/CommunityResources/Docs/Docs.json
This file uses UTF-16 encoding and contains native class names like Desc_OreIron_C, Desc_ConstructorMk1_C, etc. The planner's normalization layer maps these class names to human-readable display names and building definitions.
satisfactory-planner/
├── public/
│ ├── data/
│ │ └── Recipes.json ← place your recipe data here
│ └── favicon.svg
├── src/
│ ├── App.jsx ← main UI, canvas, panels, modals
│ ├── plannerUtils.js ← building defs, recipe normalization,
│ │ calculations, save/load logic
│ ├── index.css
│ └── main.jsx
├── index.html
├── vite.config.js
└── package.json
- Coffee Stain Studios — creators of Satisfactory
- Satisfactory Wiki — community-maintained wiki providing the
Recipes.jsonexport used for live recipe data
Recipe parsing logic and class-name normalization were developed with reference to:
This TypeScript package parses Docs.json into structured, developer-friendly JSON and was an invaluable reference for understanding how Satisfactory's Unreal Engine class descriptors are organized — particularly the producedIn → machine mappings, ingredient/product structures, and schematic unlocks.
This project was built with assistance from Claude (Anthropic). Claude helped with UI architecture, recipe normalization logic, SVG canvas interaction patterns, and overall code structure throughout development.
This is a fully static frontend app with no backend — it deploys perfectly on Vercel's free Hobby tier.
- Push the repo to GitHub
- Import it at vercel.com
- Set the Root Directory to
SatisfactoryPlanner - Vercel auto-detects Vite — build command
vite build, output dirdist - Deploy — you'll get a free
*.vercel.appURL with a custom domain option
This project is unofficial and not affiliated with Coffee Stain Studios. Satisfactory is a trademark of Coffee Stain Studios AB.