React Content Studio
Deterministic UI Content Engine
Deterministic content extraction and live in-browser WYSIWYG editing studio for React and Next.js codebases.
Overview
React Content Studio is an innovative developer tool that eliminates the barrier between non-technical copywriters and React/Next.js codebases. Unlike heavy headless CMS integrations that require rewriting components, React Content Studio parses the project's source code via Abstract Syntax Trees (AST), extracts all user-facing copy, images, and links, and allows real-time visual editing directly in the browser with deterministic code write-back.
Design decisions
The choices that shaped the system, and why.
- 1
Why Babel AST over a Headless CMS?
Headless CMS setups force developers to refactor components into GraphQL/REST fetching hooks and lock businesses into recurring SaaS subscriptions. React Content Studio parses JSX/TSX syntax trees using `@babel/parser`, allowing non-technical editors to change text directly on the rendered page and writing 1:1 clean Git diffs back to disk.
- 2
Zero-AI Deterministic Guarantee
Guaranteed 100% precision. Never relies on generative AI that could hallucinate or modify component props, hooks, or imports.
Architecture
AST Parser & Code Modifier
Uses Babel parser and generator to parse JSX/TSX syntax trees, detecting string literals and template strings without breaking component props or business logic.
Live Hot-Reload Synchronization
Seamlessly communicates with the local development server via WebSockets to update rendered UI without page reloads.
Zero-AI Deterministic Guarantee
Guarantees zero hallucination; modifications are exact 1:1 file diffs written back to disk with Git cleanliness.
Sample Showcase Sandbox
Bundled with a full SaaS landing page demonstrating live heading, feature card, and image replacement.
DevOps & deployment
Runs locally as an npm CLI tool or within isolated Docker development containers.
How it ships · Docker (APP_DIR bind-mounted into the container)
- 1APP_DIR=/path/to/app docker compose up --build
- 2Studio indexes the mounted codebase
- 3UI on :4310, HTTP API + MCP server
Features
- One-click scan: Point to any React/Next.js folder and instantly extract all editable text strings.
- Visual in-situ click-to-edit interface directly on the rendered website canvas.
- Automated image asset switcher with local public asset directory scanning.
- Safe disk write-back with automatic formatting and syntax validation.
