Back to Hub
FRAMEWORKS & TOOLS •

Skip npm. Prototype Frameworks at CDN Speed.

Here's an honest truth most "online React IDE" pages won't tell you: you don't need npm, a bundler, or a cloud container to prototype with React, Vue, or TypeScript. Modern CDNs serve every package as native ES modules, and browsers import them directly. No install step, no build step, no waiting for a container to boot.

This guide shows the real patterns — React via esm.sh, Vue via ESM builds, TypeScript transpiled in-browser — and ends with a frank comparison of when a browser playground beats CodeSandbox, StackBlitz, or CodePen (and when it doesn't).

React without npm: import maps + esm.sh

esm.sh rewrites any npm package as browser-ready ES modules. Pair it with an import map and you get bare imports that just work:

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@19",
    "react-dom/client": "https://esm.sh/react-dom@19/client"
  }
}
</script>
<script type="module">
import React from 'react';
import { createRoot } from 'react-dom/client';
const App = () => React.createElement('h1', null, 'No build step!');
createRoot(document.getElementById('root')).render(App());
</script>

Want JSX instead of createElement? Add htm (Hyperscript Tagged Markup) — JSX-like syntax with zero compilation:

import htm from 'https://esm.sh/htm@3';
const html = htm.bind(React.createElement);
const App = () => html`<h1>Hello, ${name}!</h1>`;

What about HMR? True Hot Module Replacement (state-preserving updates) needs a dev server watching your files. What a browser playground gives you instead is instant full reload — often under 50ms locally, which feels just as fast for prototypes. Anyone promising "real HMR" with zero infrastructure is stretching the term.

Vue without a build: the ESM browser build

Vue ships an official browser build with the template compiler included — in-DOM templates work with no compilation at all:

<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from
  'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({ data() { return { message: 'Vue, zero build' }; } })
  .mount('#app');
</script>

Single-File Components (the .vue format) can be compiled in-browser via @vue/compiler-sfc from a CDN, but it's heavy and slow to boot — for quick prototypes, template strings or in-DOM templates are the pragmatic choice. Full SFC support is genuinely one of the things that justifies a real build pipeline.

TypeScript without tsc: transpile in the browser

The TypeScript compiler itself runs in the browser. Load it from a CDN and transpile on the fly — types get stripped, modern JS comes out:

import ts from 'https://esm.sh/typescript@5';
const tsCode = `const greet = (name: string): string => ` + '`Hello, ${name}`;';
const js = ts.transpileModule(tsCode, {
  compilerOptions: { module: ts.ModuleKind.ESNext }
}).outputText;
// js is now plain runnable JavaScript — eval it or inject as a module
new Function(js.replace('export', ''));

Honest limits: this is transpilation only — no type checking (use an editor with Monaco's TS worker for squiggles), and multi-file projects need you to manage the module graph yourself. For learning TypeScript and small prototypes, it's plenty.

The honest comparison: playground vs cloud IDEs

So where does a client-side playground like NitroIDE actually fit next to the big names? Here's the frank version:

NitroIDE (browser playground)
+ instant, works offline, zero setup, private by default
− frontend only: HTML/CSS/JS. No Python, no Node, no terminal
CodeSandbox / StackBlitz (cloud containers)
+ real npm, real builds, shareable URLs, backend templates
− needs internet, cold boots, free tiers have limits
CodePen / JSFiddle (snippet playgrounds)
+ fastest for tiny demos, huge community, embeds everywhere
− not built for multi-file projects or app architecture

The rule of thumb: prototyping UI or learning a framework → browser playground. Building something with a backend, a database, or a real build pipeline → cloud IDE. Neither is "the best" — they solve different problems, and pretending otherwise is marketing, not engineering.

The offline superpower: once esm.sh modules are cached, CDN-based prototypes keep working without internet — and NitroIDE itself is an offline PWA. That's a workflow no cloud container can match: prototype React on a plane, push to a real repo later.

Try it live: edit and run this example right here, no signup needed.

Prototype Frameworks Instantly.

React, Vue, and TypeScript via CDN — no npm, no build, no waiting.

Launch NitroIDE

Related articles