Offline Local Studio
The GN-Apex CLI embeds an offline visual studio that runs on localhost:4646. It gives frontend developers a full GUI to model schemas, test content with a live preview engine, generate TypeScript/Zod/GraphQL code, and compile encrypted .nx binaries—with zero internet connection.
“Model fields, draft Markdown, preview rich data arrays, and copy type definitions on localhost without hitting cloud rate limits.”
Local-First Architecture
When you execute npx nexus studio, the CLI spins up an ephemeral HTTP server in Node.js and opens the Studio React SPA. The Studio bridges directly to your local filesystem:
Ephemeral CLI Server (:4646)
A local Express/Node daemon that mounts endpoints like /api/context, /api/content/schema/:id, and /api/content/:id/data.
Direct .nx Binary Writes
Changes made in the Visual Studio write directly to AES-256 encrypted binary files in .nexus/local/pages/*.nx.
Instant Type Generation
Compiles live schemas into TypeScript interfaces, Zod runtime validators, GraphQL ASTs, and Next.js query snippets.
Zero-Conflict Upstream Push
Every offline edit is tracked against origin.nx. Run 'npx nexus diff' to inspect changes before pushing to production.
The 3 Studio View Modes
The studio canvas provides three dedicated operational modes accessible from the top toolbar:
| Parameter | Type | Requirement | Description |
|---|---|---|---|
| Visual Builder | Mode | Optional | Drag-and-drop field tree editor powered by @dnd-kit. Create, rename, nest (Sections/Objects), and configure validation constraints. |
| Live JSON | Mode | Optional | Inspects the raw AST schema definition in real time. Includes syntax coloration and a one-click download trigger. |
| Content Preview | Mode | Optional | Interactive content editor for live data entry. Populate fields with rich text, image galleries, colors, and toggle Draft/Published states. |
Polyglot CodeGen Engine
Selecting any node in the Studio opens the Code Panel on the right sidebar. The engine dynamically computes and syntax-highlights four code targets in real time:
| 1 | export interface HomePage { |
| 2 | /** Main Hero Title */ |
| 3 | heroTitle: string; |
| 4 | heroBadge?: string; |
| 5 | heroImage: { url: string; alt?: string; mimeType?: string; size?: number }; |
| 6 | bodyContent?: string; |
| 7 | featuresList?: Array<{ |
| 8 | title: string; |
| 9 | description?: string; |
| 10 | icon?: string; |
| 11 | }>; |
| 12 | } |
Live Data Simulation & Editing
Switching to the Preview mode allows you to simulate and populate real data models before ever deploying a database schema.
- Singletons: Edit page titles, write Markdown in the built-in rich text editor, choose colors from the visual palette picker, and enter lat/lng map coordinates.
- Collections: Add new records, reorder items, test multi-select tags, and toggle items between
DraftandPublishedstates. - Auto-Debounce: All modifications are automatically debounced and saved to disk via
PUT /api/content/:projectId/dataevery 800ms.
Conflict Resolution Protocol
The Studio implements optimistic concurrency control by tracking the server's lastSaved timestamp against the local client state:
hasConflict state and triggers a warning toast. You can choose to Resolve to Server (pull upstream) or Force Overwrite (push local).CLI Gateway & Port Mapping
The Studio frontend connects to the local CLI daemon using standard environment proxies:
| Parameter | Type | Requirement | Description |
|---|---|---|---|
| GET /api/context | Handshake | Optional | Returns the active project ID and site configuration detected from .env.local. |
| GET /api/content/schema/:id | Schema Ingress | Optional | Reads and decompiles schema.nx to hydrate the Studio node tree on boot. |
| PATCH /api/content/schema/:id/draft | Draft Sync | Optional | Autosaves schema modifications, scaffolds missing .nx files, and prunes deleted models. |
| PUT /api/content/:id/data | Content Compilation | Optional | Compiles modified JSON records back into AES-256 encrypted .nx binary files on disk. |