StudioBrain
A schema-driven digital asset management and narrative intelligence platform for game development.
StudioBrain is a creative workbench that lets writers, game designers, and worldbuilders manage interconnected entities — characters, locations, factions, items, districts, and more — through a visual editor backed by YAML frontmatter and Markdown content.
Key Capabilities
- Entity Management — Create, edit, validate, and link entities with structured frontmatter fields and free-form Markdown body content.
- Visual Layout Designer — Compose entity edit and view pages from modular sections, component blocks, and configurable tabs using a drag-and-drop interface.
- AI Workshop — Generate and refine content with multi-provider AI support, deep analysis mode, context controls, and collaborative editing.
- Plugin System — Extend the editor with third-party plugins rendered in sandboxed iframes, communicating through a typed postMessage protocol.
- Theme System — Full light/dark mode support with semantic surface tokens for consistent, accessible styling.
- Asset Management — Upload, organize, and assign images and media to entities with role-based asset management.
- Relationship Graphing — Visualize and navigate connections between entities across your entire world.
Documentation Sections
User Guide
Step-by-step guides for using StudioBrain:
- Getting Started — Overview of the application, opening projects, and navigating the interface.
- Managing Entities — Creating, editing, validating, and organizing your worldbuilding entities.
- AI Workshop — Using AI features to generate, compare, and refine content.
Developer Reference
Technical documentation for extending and understanding the codebase:
- Layout System Architecture — How the layout designer, component blocks, tabs, and view pages work together.
- Component Blocks Reference — Complete catalog of built-in UI blocks and how to create custom ones.
- Plugin Iframe Protocol — Bidirectional messaging API for plugin iframes.
- Theme System & Migration — Semantic token system and the migration from hardcoded Tailwind colors.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | Next.js 15, React 19, TypeScript |
| Styling | Tailwind CSS 4, semantic surface tokens |
| State | Zustand, TanStack Query |
| Editor | Monaco Editor, MDX Editor |
| Drag & Drop | dnd-kit |
| 3D | React Three Fiber |
| Backend | Rust (Axum) — sb-server / sb-cloud |
| Data | YAML frontmatter + Markdown files |
Running Locally
The app and this documentation site are separate repositories. Clone them as siblings. The main application runs on port 3100. This documentation site runs on port 3200.
# Main application (studiobrain-core frontend)
cd studiobrain-core/frontend
npm install
npm run dev # http://localhost:3100
# Documentation site (studiobrain-cloud)
cd studiobrain-cloud/docs
npm install
npm run dev # http://localhost:3200