framework/preact
Preact Online IDE for a Tiny, Fast React Alternative
Preact gives you the React API you already know in about three kilobytes — hooks, components and htm templates that run with no build step, right in the browser.
import { render } from 'preact';
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';
function Counter() {
const [n, setN] = useState(0);
// htm is JSX-like, evaluated at runtime
return html`
<button onClick=${() => setN(n + 1)}>
clicked ${n} times
</button>`;
}
render(html`<${Counter} />`, document.body);01 platform
What you keep and what you drop moving from React
Preact is not a smaller subset of React — it is a separate implementation of the same ideas, and the editor is a good place to feel exactly where the two line up and where they part.
-
The API you already know
Components,
useState,useEffect,useRef, context and refs all behave the way the React docs describe. If you can write a React component, you can write this one without looking anything up. -
About three kilobytes
The whole view layer is roughly 3KB gzipped. On the cold mobile connection a real user arrives on, that is the difference between an app that paints now and one that paints after a framework downloads.
-
No build step, with htm
htmgives you JSX-like templates as tagged template literals, evaluated in the browser — so a Preact app runs with nothing compiled ahead of time, which is exactly what a browser editor wants. -
React libraries, via compat
preact/compataliasesreactandreact-domto Preact, so a surprising amount of the React ecosystem installs from npm and just works — you find the edges by trying them here, not in production.
02 deep dive
The React API, in about three kilobytes
Same hooks, same mental model, a fraction of the bytes — and you can write it two ways depending on whether you want a build step at all.
Hooks are the ones you know. useState, useEffect, useMemo, useCallback and useRef come from preact/hooks and follow the same rules. Custom hooks compose across files exactly as they would in React.
htm replaces JSX at runtime. html\<${App} />\`` is a tagged template that Preact evaluates directly, so there is no transform between what you type and what runs. It is the no-build-step path, and it is what the starter uses.
JSX still works if you prefer it. Point your files at Preact's h and write JSX as usual; it compiles on the same fast path the other framework pages use. Either way the runtime underneath is the same 3KB Preact.
- hooks
- preact/hooks
- no-build
- htm templates
- compat
- preact/compat
- signals
- @preact/signals
import { useState, useCallback } from 'preact/hooks';
// a hook is just a function that calls hooks —
// identical to React, a fraction of the runtime.
export function useToggle(initial = false) {
const [on, setOn] = useState(initial);
const toggle = useCallback(() => setOn(v => !v), []);
return [on, toggle];
}03 pipeline
What Preact does on an update that React does not
The size comes from choices about how updates happen. These are the ones you can observe in the preview while you work.
-
Diff against the DOM
Preact diffs against the real DOM rather than keeping a separate virtual tree in the shape React does. It is a smaller algorithm, which is a large part of where the 3KB comes from.
-
Batch on the microtask
State updates are batched and flushed on the next microtask, so several
setStatecalls in a handler produce one update — the same outcome as React, reached more cheaply. -
Use browser events
Preact attaches standard DOM event listeners instead of a synthetic event system.
onInputis the browser'sinputevent, which is one fewer layer to learn and one fewer to ship. -
Signals, optionally
Install
@preact/signalsand a signal updates only the text it renders, skipping the component diff entirely — a fine-grained path Preact offers that plain React does not.
04 features
What a Preact project ships with
Everything below is on the moment you open the Preact editor, which starts with the interactive quiz the starter ships — hooks, state and htm in one small working app.
-
npm without a terminal wait
Search and click install.
@preact/signals,preact/compat,preact-routerand the rest resolve through esm.sh into a native import map, ready on the next render with no node_modules. -
Live preview, four ways
Full width, split beside the code, in real device frames, or in its own tab — useful when the point of Preact is how fast the small bundle paints.
-
TypeScript when you want it
Write
.tsxand keep going; types are stripped on the same fast path, so a typed Preact component costs nothing extra at compile time. -
The VS Code engine
Monaco brings IntelliSense, multi-cursor, the command palette and Prettier — the editor Visual Studio Code is built on, not a highlighted textarea.
-
Real Git in the browser
Stage, commit, branch and read history through isomorphic-git, offline, and import an existing repository without leaving the tab.
-
preact/compat on tap
Alias react and react-dom to Preact and pull a React library from npm to see whether it runs on 3KB — the fastest way to test compatibility is to try it.
05 deep dive
Templates with no build step, using htm
htm is the piece that makes Preact so natural in a browser editor: JSX-style markup with nothing to compile.
It is JSX you can read. html\<div class=${cls}>${children}</div>\`` looks like JSX and nests like JSX, but it is a standard tagged template literal — valid JavaScript that runs as written, with no transform in front of it.
Interpolation is plain ${}. Values, event handlers and child components all drop in with template-literal interpolation, so there is no new syntax to learn beyond what the language already gives you.
It keeps the loop instant. Because nothing compiles, the gap between saving and seeing is a page reload rather than a build — which is the whole reason the starter reaches for htm rather than JSX.
- syntax
- tagged template
- compiles
- nothing to compile
- components
- html
<${App} /> - runtime
- preact + htm/preact
import { html } from 'htm/preact';
export function List({ items }) {
return html`
<ul>
${items.map(item => html`<li>${item}</li>`)}
</ul>
`;
}06 workflow
From an empty tab to a running Preact app
No scaffolding, no dependency install, no dev server — the whole loop, and it stays instant because nothing is compiled ahead of time.
- new project → Preact
- created app.js, index.html, style.css
- install @preact/signals
- resolved via esm.sh · import map updated · 0 files written
- save app.js
- no build step · preview reload 2ms
- 3.1 KB runtime · first paint under 50ms
- git commit -m "scored quiz"
- [main 4a7f0c2] scored quiz · 3 files changed
-
Nothing to keep alive
With htm there is no compile to run and no dev server to restart — a save is a reload, and the reload is the whole build.
-
The same loop on a phone
Because nothing is compiled ahead of time, a phone runs the exact loop a laptop does, with no local runtime involved.
-
Share by link
Send a live preview URL and the recipient loads a 3KB app instantly, not a screenshot of one.
07 ecosystem
Preact next to the ecosystem it mirrors
Preact borrows React's API and much of its tooling, and the same editor compiles or runs any of the technologies beside it, per file.
08 languages
What the editor compiles beside Preact
Preact is one file type among many the editor compiles in the browser, renders natively, or executes on demand.
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
Preact on XCODX — common questions
Is Preact really a drop-in React alternative?
For the core API, yes — components and hooks behave the same, and preact/compat aliases react and react-dom so many React libraries install and run unchanged. The differences are at the edges, which the editor is a safe place to discover before you rely on them.
Do I need a build step to use Preact here?
No. The starter uses htm, which gives JSX-like templates as tagged template literals that run as plain JavaScript with nothing to compile. If you prefer JSX, that works too, on the same fast transform the other framework pages use.
Which hooks does Preact support?
The ones you know — useState, useEffect, useMemo, useCallback, useRef and useContext — imported from preact/hooks. Custom hooks compose across multiple files exactly as they do in React, because the rules are the same.
Can I install React libraries with preact/compat?
Often, yes. Install preact/compat from the npm panel and alias react and react-dom to it, and libraries that stick to the public React API tend to work. Ones that reach into React internals are where you will find the limits.
What are @preact/signals?
Signals are a fine-grained state primitive: a signal updates only the text it renders, skipping the component diff. Install @preact/signals from npm and a value change touches one node instead of re-running a component.
Why is Preact so much smaller than React?
It diffs against the real DOM rather than a large virtual-DOM implementation, uses native browser events instead of a synthetic system, and keeps its surface small. The result is roughly 3KB, which paints faster on a cold mobile connection.
Can I use TypeScript with Preact?
Yes. Write .tsx files and annotate as normal; the types are stripped on the same fast path, so a typed Preact component adds no compile-time cost and needs no configuration.
Can I run Preact's server-side rendering here?
No. preact-render-to-string runs on a server before the response is sent, which needs a Node process rather than a browser tab. Everything client-side — hooks, signals, routing, state — works normally.
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 Preact project now
A 3KB app on screen in under a minute — hooks and htm, no build step, no account wall and nothing to install.