framework/angular
Angular Online IDE and Editor for Real Projects
Compile and run standalone Angular components in a browser tab — dependency injection, signals and the built-in control flow all working, with no CLI to install and nothing to scaffold first.
import { Component, inject, computed } from '@angular/core'
import { UserService } from './user.service'
@Component({
selector: 'user-card',
template: `<h3>{{ initials() }}</h3>`
})
export class UserCard {
private users = inject(UserService)
initials = computed(() => this.users.current().name[0])
}01 platform
What Angular in a browser actually removes
Angular's reputation for setup cost is mostly the CLI and the toolchain in front of it. Take those away and what is left is a framework that starts in a tab.
-
No
ng new, and no wait for itScaffolding an Angular project locally means the CLI, a dependency install and a dev server before the first line of your own code. Here the project exists when the tab opens.
-
Standalone components, not NgModules
Standalone is Angular's default now, and this is built around it: a component declares its own imports and bootstraps directly. There is no module graph to maintain for a project this size.
-
Dependency injection that actually injects
inject()and constructor injection both resolve against a real injector hierarchy. Providers,providedIn: 'root'and component-level providers behave as documented rather than as an approximation. -
TypeScript without a separate build
Angular is a TypeScript framework and the editor treats it as one — decorators, generics and strict templates, with annotations stripped at compile rather than checked in a second pass.
02 deep dive
Dependency injection you can watch resolve
DI is the concept Angular newcomers search for most, and the one hardest to learn from a diagram. Watching an injector actually resolve a token is faster than reading about hierarchies.
inject() is the modern surface. Call it in a field initializer and the injector resolves the token at construction. No constructor parameter list, no @Inject decorator for ordinary cases.
Provider scope is observable. A service providedIn: 'root' is one instance for the app; the same service in a component's providers array is one per component instance. Log the constructor and the difference stops being theoretical.
Injection tokens work for non-class values. Configuration, strings and functions are provided through InjectionToken, which is how Angular avoids the ambiguity a bare string key would create.
Failures name the token. A missing provider produces Angular's own NullInjectorError with the token in the message, which is what most Angular questions on Stack Overflow are actually about.
- api
- inject() + constructor
- scope
- root / component
- tokens
- InjectionToken
- errors
- NullInjectorError, named
import { Injectable, signal } from '@angular/core'
@Injectable({ providedIn: 'root' })
export class UserService {
current = signal({ name: 'Ada Lovelace' })
}03 pipeline
What the JIT compiler does to a component
Four stages between saving a file and seeing it render, all in the browser. Angular compiles its templates rather than interpreting them, and knowing where that happens is what makes an error legible.
-
Strip TypeScript
Decorators are preserved and annotations removed. Angular's decorators are not syntax sugar — they are the metadata the compiler reads in the next stage — so this pass has to keep them intact.
-
Compile the template
The template string becomes a render function. Bindings, the built-in control flow and component selectors are resolved against what the class declares, so a reference to something undeclared is caught here rather than at runtime.
-
Wire the injector
Providers declared on the component and in
providedInare registered against the injector tree. This is where a missing provider surfaces asNullInjectorErrorrather than as an undefined field later. -
Bootstrap
bootstrapApplicationmounts the root component and change detection begins. The preview updates in place; there is no dev server to restart and no rebuild to wait on.
04 deep dive
Reactivity without Zone.js
Angular's reactivity story changed completely over its recent releases, and signals are now the center of it. A browser loop is the cheapest way to build the intuition.
signal(), computed() and effect() are the whole core. A signal holds a value and notifies its dependents; a computed derives from signals and caches; an effect runs when what it reads changes.
Computed caching is observable. Put a log inside a computed and read it twice — it runs once. That is a thing you can be told, and a thing you can watch, and only the second one sticks.
The built-in control flow reads signals directly. @if, @for and @switch replaced the structural directives, and they call signals in the template without an async pipe or a subscription to manage.
RxJS still has its place. Observables remain the right tool for streams and cancellation; toSignal and toObservable bridge the two rather than forcing a choice.
- core
- signal / computed / effect
- control flow
- @if @for @switch
- bridge
- toSignal / toObservable
- rxjs
- supported
template: `
@if (count() > 0) {
<p>{{ doubled() }}</p>
} @else {
<p>nothing yet</p>
}
`
count = signal(0)
doubled = computed(() => this.count() * 2)05 features
What ships with an Angular project
Everything below is on the moment you open the Angular editor. There is no schematic to run and nothing to add to a configuration file.
-
Standalone bootstrap
bootstrapApplicationwith the providers your app needs. A root component and a provider array replace the module boilerplate entirely. -
Router and forms
Install
@angular/routerand@angular/formsfrom the npm panel; routes and reactive forms behave as they do locally, because they are the real packages. -
Angular Material
Install it and import the components you need. Theming works, because the SCSS goes through Dart Sass in the browser like any other stylesheet.
-
RxJS, in full
Operators, subjects and the
asyncpipe all work. Angular ships RxJS as a peer dependency and nothing here replaces it with a stub. -
TypeScript strictness you choose
Decorators, generics and strict null checks in the editor. Annotations strip at compile rather than blocking the loop on a type-check pass.
-
Templates, not boilerplate
Over a hundred ready-to-run starters, several of them Angular with routing and a component library already wired together.
06 workflow
From an empty tab to a bootstrapped app
No ng new, no dependency install, no dev server to keep alive. This is the whole loop, start to running.
- new project → Angular
- main.ts, app.component.ts, index.html
- npm i @angular/router
- resolved via esm.sh · import map updated
- save → app.component.ts
- JIT compile 22ms · injector wired
- bootstrapApplication · rendered
-
Compilation is the only wait
There is no bundler and no dev server between saving and rendering — the JIT compiler runs in the browser and the app re-bootstraps in place.
-
Packages resolve without installing
esm.sh and a native import map replace
node_modules. Nothing is downloaded to disk and nothing has to be re-linked. -
It keeps working offline
XCODX installs as a Progressive Web App and the compiler runs on your device, so the loop survives losing the connection.
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
Angular on XCODX — common questions
The questions that decide whether this fits your work.
Does this run real Angular, or an approximation?
Real Angular, compiled with its JIT compiler in the browser. Components, dependency injection, the router and change detection are the framework's own implementations rather than a lookalike, which is why the errors you get are Angular's errors.
JIT or AOT — which compiler is this?
JIT, and that is a deliberate limit rather than an oversight. AOT is a build-time compiler that runs in Node as part of ng build, and there is no Node process in a browser tab. JIT is what Angular itself uses for development-time tooling.
Do I need the Angular CLI?
No, and it does not run here. ng new, ng generate and ng build are Node programs. Everything they scaffold — a component file, a service, a route — is a file you can create directly, which is most of what the CLI does for a project this size.
Do standalone components work?
Yes, and they are the assumed default. A component declares its own imports array and the app starts with bootstrapApplication. NgModules still compile if you have them, but nothing here requires you to write one.
Does dependency injection work properly?
Yes. inject() and constructor injection both resolve against a real injector hierarchy, providedIn: 'root' gives an application-wide instance, and component-level providers give one per instance. A missing provider throws Angular's own NullInjectorError naming the token.
Can I use signals and the built-in control flow?
Yes. signal, computed and effect work, and @if, @for and @switch compile as the built-in control flow rather than the structural directives they replaced. RxJS is unchanged, with toSignal and toObservable bridging the two models.
Can I install Angular Material or NgRx?
Yes, from the npm panel. They resolve through esm.sh into the import map and import by name, so you are working against the real libraries and their real behavior rather than a stand-in.
What about server-side rendering?
Not here, and no browser-only editor can do it. Angular renders SSR on a Node server before the response is sent, so it needs a server process. Everything client-side runs normally, and a component built here moves into an SSR project unchanged.
Is this a good place to learn Angular?
Yes, and dependency injection is the reason. It is the concept newcomers search for most and the hardest to learn from a diagram — being able to change a provider's scope and watch the constructor fire a different number of times teaches it in a way reading cannot.
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 project now
A standalone component compiled and bootstrapped in under a minute, with no CLI to install and no scaffold to wait through.