React (JSX) with PairPad
The pad opens with App.jsx, a small task list with useState, useMemo and a filter, plus index.html with its styles. index.html loads React 18 and Babel from a CDN, so the JSX compiles inside the Preview pane and re-renders as anyone in the room types. No bundler, no npm install.
- Wait a moment for the Preview pane: it downloads React 18.3.1, ReactDOM and Babel, compiles App.jsx and renders the task list. Add a task and click one to toggle it.
- Edit App.jsx, for example change the placeholder text or add a fourth filter. The preview recompiles and re-renders as you type; press Run or Reload to force a fresh render.
- Do the TODO together: add a delete button per task, and keep the list after a reload with localStorage inside a useEffect.
- Press Share and send the link. Your partner edits the same component with a live cursor and sees the same preview.
- If the preview goes blank, a JSX syntax error is the usual cause; Babel prints it in the browser console (F12) of the preview frame.
What to know
This setup is React without a toolchain. index.html loads the UMD builds of react and react-dom 18.3.1 and @babel/standalone from unpkg, and App.jsx is attached as <script type="text/babel" data-presets="react">. PairPad inlines App.jsx into the page and keeps that type, so Babel compiles the JSX in the preview frame and ReactDOM.createRoot renders it. Because React is a global, the component uses const { useState } = React instead of import statements.
That is the right size for a component conversation: hooks, state updates, props, keys in lists, controlled inputs, conditional rendering and effects all behave as they do in a real app, and you can split the code into several components in App.jsx. A free room keeps 2 files, so the styles sit in index.html; Pro has no file limit. What it is not is a project: import/export between files, npm packages, CSS modules, TypeScript types in JSX and React Router need a bundler such as Vite. The preview needs a network connection the first time, to fetch React and Babel from the CDN.
A few things the example is built to show. The list uses a stable id as its key, not the array index, so toggling and filtering never reuse the wrong row. Filtering is derived with useMemo from items and filter rather than stored in a second state variable that could drift out of sync. Every update copies the array (map, spread) instead of mutating it, which is why React sees the change and re-renders.
Pressing Run with App.jsx open renders the preview, because index.html loads it; JSX does not run in the console runner. For a React interview, put the task in a comment at the top of App.jsx, press Share before the call and send the link; Pro adds private interviewer notes, a scorecard and a keystroke replay.
Updated · Cosmovex
Questions
How does the JSX compile without a build step?
index.html loads @babel/standalone, and App.jsx is included as a text/babel script. Babel compiles it in the preview frame when the page loads, and React 18 renders the result.
Can I import other components or npm packages?
Not with import statements: there is no bundler. Define several components in App.jsx, or add a library's UMD build from a CDN with another script tag in index.html and use its global.
Can I write the component in TypeScript (TSX)?
Not in this setup: it uses Babel's react preset only. Write plain JSX here, or use the TypeScript pad for typed logic that runs in the console.
Does it work offline?
The first preview needs the network to fetch React, ReactDOM and Babel from unpkg. Editing and sharing the files works as usual; the preview stays blank until those scripts load.
Can my partner see the preview too?
Yes. Everyone in the room renders the same files in their own Preview pane, so a change you type shows up for them as well.
The free plan covers everything on this page. PairPad Pro ($29, paid once) is described on the PairPad page.
