react/sandbox
React Sandbox for Full Project Development
Build a React application the way you would locally — Monaco editing, a real folder tree, packages, a terminal and Git — in a tab, on whatever machine you happen to be sitting at.
src/
components/ UserCard.jsx NavBar.jsx
hooks/ useUser.ts
store/ user.ts
routes/ index.jsx
App.jsx
main.jsx
package.json01 platform
Where a React application stops fitting in one file
Every React project crosses the same four thresholds. A workspace that cannot cross them with you is a workspace you outgrow in an afternoon.
-
The first custom hook
Logic leaves the component and needs somewhere to live.
hooks/besidecomponents/is the moment a snippet becomes a project, and a single-file editor cannot follow you past it. -
The first provider
Context needs a root to wrap, and providers compose in an order that matters. Seeing
main.jsxas a real file, with the nesting visible, is how that order stays deliberate. -
The first route
Routing means several page components and a config that names them. React Router expects a tree of files, not a tabbed pair.
-
The first shared store
Zustand or Redux introduces state that outlives any one component. It belongs in
store/, and being able to open it beside the component reading it is most of the debugging.
02 deep dive
Autocomplete that reads your own components
JSX is not HTML. It carries your components, their props and their types, and completion that does not know the difference is completion you learn to ignore.
Components resolve to their definitions. Start typing <User and the editor offers UserCard because it read the import, then completes the props with the types you declared.
Hooks complete with their signatures. useState returns a typed tuple, useEffect prompts for a dependency array. The suggestions come from React's own types rather than a fixed dictionary.
Rename crosses file boundaries. Rename a custom hook and every import follows, which is only possible because the whole project is loaded rather than one buffer.
Prettier runs when you ask it to. Formatting is on demand, not on a timer. Nothing rewrites your file while you are still deciding what the line should say.
- engine
- Monaco
- components
- resolved from imports
- types
- from your own props
- format
- Prettier, on demand
<UserCard
name={user.name}
role={user.role}
onSelect={open}
/>03 workflow
From createRoot to first commit
No scaffolding command, no dependency install, no dev server. This is the whole thing, start to first commit.
- new project → React
- src/App.jsx, src/main.jsx, index.html
- npm i react-router-dom zustand
- resolved via esm.sh · import map updated
- git init && git add -A
- git commit -m "scaffold"
- [main 7c19ae4] scaffold · 14 files
-
No install step to sit through
Packages resolve through esm.sh into a native import map. There is no
node_modulesto populate and nothing to download to disk. -
The repository is real
Commits, branches and history are genuine Git objects. Push to GitHub, or pull an existing repository in and keep committing.
-
It survives the tab closing
Projects, history and Git objects live in your browser's storage, so reopening is instant and offline.
04 features
What the workspace gives a React project
The tools below are the ones a React codebase leans on once it is past a single component — a React code editor with the navigation a multi file project actually needs.
-
Go to definition, across hooks
Ctrl-click
useUserand land on its declaration, in whichever file that is. The single most-used navigation in a hook-heavy codebase. -
Rename that follows imports
Rename a hook or a component and every import updates. Only possible because the whole project is loaded rather than one buffer.
-
JSX-aware completion
Type
<Userand getUserCardwith its props typed from what you declared, rather than a generic HTML attribute list. -
An npm panel
React Router, Zustand, TanStack Query — search, click, import by name. The import map is written for you and travels with the project.
-
Real Git
Stage, commit, branch, diff and read history through
isomorphic-git. Import a repository from GitHub and keep working against its real history. -
Preview in device frames
Check a responsive layout at real breakpoints without leaving the tab or resizing the window.
-
Per-project file history
Restore points and auto-save, so a refactor that went wrong is a click back rather than a rewrite.
-
Everything on the device
Projects are stored locally and work with no connection. A half-finished experiment stays yours.
05 deep dive
Where components, hooks and routes belong
The point of a real folder tree is not tidiness. It is that a project laid out conventionally can be handed to somebody else, or to yourself in six months, without a guided tour.
Conventional paths mean conventional imports. @/components/UserCard.jsx resolves the way a Vite project resolves it, so code written here pastes into a local project unchanged and vice versa.
Custom hooks get their own directory because they get their own lifecycle. A useUser beside the component using it is a helper; one in hooks/ is a unit other components can reach for.
Routes and stores are separated for the same reason. They are the two things most likely to be edited by someone who did not write the component, and burying them makes that harder.
The tree is the documentation. A newcomer opening src/ should be able to guess where anything lives. That is worth more than any README, and it costs nothing but discipline at the start.
- aliases
- @/ resolves
- layout
- Vite conventions
- depth
- unlimited nesting
- moves
- imports follow
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from '@/routes'
import '@/index.css'
createRoot(document.getElementById('root'))
.render(<RouterProvider router={router} />)06 pipeline
How a React project grows here
Four stages every React application passes through, and what the workspace does at each one.
-
One component
A single
App.jsxrendering into a root. Nothing to configure — this is where the template starts, and where a snippet editor would also be adequate. -
Components and hooks
Split the tree, lift logic into custom hooks. Go-to-definition and cross-file rename start earning their place the moment there are two files that import each other.
-
Routes and providers
Add React Router and wrap the root in the providers your app needs. Provider order becomes something you can see rather than something you remember.
-
State and handoff
Introduce a store, commit the history, then push to GitHub or export a zip. What leaves is ordinary source — the same files a local project would have produced.
07 ecosystem
One project, many stacks
A .jsx file can sit beside a .vue one and a Python script; the compiler is chosen per file, not per project.
08 languages
Everything the editor understands
Highlighting and IntelliSense cover 70+ languages. These are the ones XCODX also compiles or executes for you.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
09 questions
The React sandbox — common questions
Questions about using this as a working environment.
Can a real React application live here?
Yes. Components, custom hooks, context providers, routes and a store are the parts a React app is made of, and all five have somewhere to live rather than being flattened into one tab.
Does React Router work?
Yes. Install it from the npm panel and define routes in their own file; the preview navigates as it would locally. Nested routes and layout routes behave normally because this is the real router, not a stand-in.
Where do custom hooks belong?
In their own directory once more than one component uses them. The workspace is laid out for that — hooks/ beside components/ — and go-to-definition crosses the boundary so the split costs you nothing in navigation.
Can I use Zustand, Redux or TanStack Query?
Any of them. They install from the npm panel and import by name. Because they resolve to real packages rather than mocks, their devtools and middleware behave as documented.
Does React DevTools work on a project this size?
Yes. The browser extension attaches to the preview and inspects the real component tree, so the profiler and the component inspector both work on a full application.
Is the terminal real, or a mock?
It is a working shell surface over your project files. There is no Node process behind it, so it covers file and project operations rather than arbitrary commands — no npm run build, because there is no build step to run.
How big a project can it hold?
Comfortably a real React application — dozens of components, hooks, routes and a store, with their dependencies. The limit is your browser's storage quota, not a plan tier.
Can I import an existing React repository?
Yes, from GitHub, with its history intact. You keep committing against real Git objects and can push back when you are done.
Can I get my project out again?
Export the whole thing as a zip with its folder structure intact, or commit and push. It is ordinary source from that point on, with no proprietary format in the way.
Can two people work on the same project?
A project lives in one browser's storage, so it is single-owner by default. Sharing means handing it over — a link, a pushed branch or an exported zip — rather than two cursors in one file.
What happens if I clear my browser data?
The project goes with it, the same way deleting a folder removes a local one. That is the trade for storing nothing on a server, so commit and push for anything you would be unhappy to lose.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open a React workspace
A project tree, packages and version control in under a minute, on whatever machine you happen to be sitting at.