angular/sandbox
Angular Sandbox for Full Application Development
Build an Angular application the way you would locally — components, services, routes and guards in a real folder tree, with packages, a terminal and Git — on whatever machine you happen to be sitting at.
src/app/
components/ user-card.component.ts
services/ user.service.ts
guards/ auth.guard.ts
routes.ts
app.component.ts
src/main.ts
package.json01 platform
Where an Angular application stops fitting in one file
Every Angular project crosses the same four thresholds, and the CLI exists mostly to help with them. A workspace that cannot cross them with you is one you outgrow in an afternoon.
-
The first injectable service
Logic leaves the component and becomes something the injector provides.
services/besidecomponents/is the moment a snippet becomes an application. -
The first route
Routing means several page components and a
routes.tsthat names them. Lazy-loaded routes need real separate files, not tabs in one buffer. -
The first guard or interceptor
CanActivateandHttpInterceptorare cross-cutting by definition — they sit outside any component and have to be reachable from the bootstrap. -
The first shared provider array
Bootstrap configuration grows: the router, HTTP, animations, a store. Seeing
main.tsas a real file keeps the provider order deliberate rather than accidental.
02 deep dive
Template completion that reads your component class
An Angular template is neither HTML nor JavaScript. It has bindings, pipes, the built-in control flow and your own selectors in it, and completion that ignores the difference is completion you learn to ignore.
Selectors resolve to their components. Type <user- in a template and the editor offers user-card because it read the imports array, then completes the inputs the class declares.
Bindings complete on both sides. [value] offers the component's inputs; (click) offers its outputs. The list is what the class actually exposes rather than a generic attribute set.
The control-flow blocks are understood. @if, @for and @switch are Angular syntax rather than HTML, and the editor treats them as such — including @for's required track expression.
Rename crosses the class and the template. Rename an input and the bindings that use it follow, which only works because the whole project is loaded rather than one file.
- selectors
- from the imports array
- inputs
- typed from the class
- control flow
- @if @for @switch
- engine
- Monaco
@for (user of users(); track user.id) {
<user-card
[name]="user.name"
(select)="open(user)"
/>
} @empty {
<p>No users yet</p>
}03 workflow
From bootstrapApplication to first commit
No ng new, no dependency install, no dev server. This is the whole thing, start to first commit.
- new project → Angular
- src/main.ts, src/app/app.component.ts
- npm i @angular/router @angular/forms
- resolved via esm.sh · import map updated
- new file → services/user.service.ts
- git init && git add -A
- [main 3e81cd2] scaffold · 16 files
-
Creating a file replaces a schematic
ng generate componentwrites a class, a template and a spec. Two of the three are one file here, and creating it directly is faster than remembering the flag. -
The repository is real Git
Commits, branches and history are genuine Git objects through
isomorphic-git. 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 works with no connection.
04 features
What the workspace gives an Angular project
The tools below are the ones an Angular codebase leans on once it is past a single component — an Angular code editor with the navigation a multi file project actually needs.
-
Go to definition, across the injector
Ctrl-click a service and land on its
@Injectableclass, in whichever file that is. The most-used navigation in a DI-heavy codebase. -
Rename that follows imports
Rename a service or a component and every import and template binding updates together.
-
An npm panel
@angular/router,@angular/forms, Angular Material, NgRx — search, click, import by name. The import map is written for you. -
Real Git
Stage, commit, branch, diff and read history. Import a repository from GitHub and keep working against its real history.
-
An integrated terminal
A shell surface over your project files, for the moments when typing is faster than clicking through a tree.
-
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 offline. A half-finished experiment stays yours.
05 deep dive
Where components, services and routes belong
Angular is more opinionated about structure than most frameworks, and that is an advantage the moment a second person opens the project.
The conventional layout is the documented one. app/components, app/services, app/guards, routes.ts — a newcomer opening src/app should be able to guess where anything lives without a tour.
Services live apart because their lifetime does. A service providedIn: 'root' outlives every component that injects it. Filing it beside one of them misrepresents what it is.
Routes are a file, not a decoration. Lazy loading needs route definitions the bundler can see separately, and keeping routes.ts at the top of app/ is what makes the application's shape readable.
Bootstrap configuration is the app's contract. main.ts lists every global provider. It is the first file to read when joining a project, and burying it costs more than it saves.
- components
- app/components
- services
- app/services
- routing
- app/routes.ts
- bootstrap
- src/main.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { provideRouter } from '@angular/router'
import { AppComponent } from './app/app.component'
import { routes } from './app/routes'
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)]
})06 pipeline
How an Angular project grows here
Four stages, none needing a machine you have configured. This is the argument for a browser workspace over a local one for anything you did not start.
-
One component
A root component and a bootstrap call. Nothing to configure — where the template starts, and where a snippet editor would also be adequate.
-
Services and injection
Lift logic into injectables and provide them. Go-to-definition across the injector starts earning its place the moment there are two files that depend on each other.
-
Routes and guards
Add the router, split pages into their own components, protect them with guards. The provider list in
main.tsbecomes something you read rather than remember. -
State and handoff
Introduce a store, commit the history, then push to GitHub or export a zip. What leaves is ordinary TypeScript — the same files a CLI project would have produced.
07 ecosystem
One project, several frameworks
An Angular component can sit beside a .vue file and a Python script; the compiler is chosen per file, not per project.
08 languages
Every language 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 Angular sandbox — common questions
Questions about using this as a working environment.
Can a real Angular application live here?
Yes. Components, injectable services, routes, guards and a bootstrap configuration are the parts an Angular app is made of, and all five have somewhere to live rather than being flattened into one file.
How do I generate a component without ng generate?
ng generate?Create the file. A standalone component is one TypeScript class with a @Component decorator — the schematic writes boilerplate around that, and for a project this size typing it directly is faster than recalling the flags.
Does the Angular Router work, including lazy routes?
Yes. Install @angular/router, provide it in bootstrapApplication and define routes in their own file. loadComponent works because the import is a real dynamic import the browser resolves through the import map.
Can I use Angular Material or NgRx?
Both, from the npm panel. Material's SCSS theming compiles through Dart Sass in the browser, and NgRx works against the real store because it resolves to the real package.
Does Angular DevTools work on a project this size?
Yes. The extension attaches to the preview and inspects the real component tree, the injector graph and signal values, because the preview is a genuine Angular 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 ng build, because there is no Node to run it.
How big a project can it hold?
Comfortably a real Angular application — dozens of components, services, routes and their dependencies. The limit is your browser's storage quota, not a plan tier.
Can I import an existing Angular repository?
Yes, from GitHub, with its history intact. Anything requiring the CLI at build time will not run here, but the source opens and edits normally and you 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 TypeScript from that point on, with no proprietary format in the way.
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.
Does it work on a tablet or Chromebook?
Yes. The workspace is a responsive web app, so a Chromebook or an iPad gets the same file tree, the same compiler and the same preview a laptop does.
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 an Angular workspace
A project tree, services, routes and version control in under a minute, on whatever machine you happen to be sitting at.