HTML & CSS with PairPad
The pad opens with two files: index.html (a nav bar, two pricing cards and a small inline script for the mobile menu) and styles.css. The Preview pane shows the page and re-renders as anyone in the room types. Share gives the room a link; up to 3 people at once edit the same files in a free room.
- Look at the Preview pane: index.html is rendered with styles.css inlined, because the page links it by file name.
- Open styles.css and change the border on .plan.featured, or the 220px in the grid template. The preview updates as you type.
- Do the TODO together: below 560px hide the nav links and show the Menu button. Narrow the preview by resizing the window and press the button; the inline script in index.html toggles the open class.
- Press Share and send the link. Each person sees the other's cursor and selection in whichever file they have open, and the preview follows the room's text.
- A free room keeps 2 files, so split JavaScript into its own script.js (and download the room as a .zip) with Pro, which has no file limit.
What to know
The preview is built from the room's files, not from a server. index.html is rendered in a sandboxed frame, and every <link rel="stylesheet" href="…"> and <script src="…"> that names a file in the room is inlined, so a page split across index.html, styles.css and script.js previews exactly as it would when served from a folder. A free room keeps 2 files, which is why this example keeps its script inline; Pro has no file limit. Links to files that are not in the room, such as a CDN stylesheet or font, load from the network as usual.
Scripts in the preview run in a frame with no access to PairPad, its storage or your cookies, and alerts and forms work. Because the preview re-renders while people type, a half-written loop could hang it; every for, while and do loop in the page's scripts gets a time check, and a loop that runs for more than 1.5 seconds is stopped with a banner at the bottom of the preview instead of freezing anyone's tab.
The example covers the two layout techniques people most often pair on: a responsive card grid with grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), which reflows from two columns to one without a media query, and a navigation bar that needs one, with an aria-expanded attribute kept in sync by the inline script so the menu button is announced correctly by screen readers.
There is no build step. Plain HTML, CSS and browser JavaScript work; Sass, Tailwind's build, TypeScript in the page and npm imports do not. Opening a lone CSS file shows it applied to a small specimen page. Free rooms are deleted 24 hours after the last activity; Pro rooms are permanent.
Updated · Cosmovex
Questions
Does the preview update for everyone at once?
Each person's preview renders from the room's shared text, so when one person types, everyone with the Preview pane open sees the change within a moment.
Can I link CSS and JavaScript files?
Yes. <link rel="stylesheet" href="styles.css"> and <script src="script.js"></script> that name a file in the room are inlined into the preview. Files that are not in the room load from their URL. A free room keeps 2 files; Pro removes the limit.
Can I use Tailwind, Sass or npm packages?
There is no build step, so Sass and npm imports do not work. You can load a library from a CDN with a normal script or link tag, which the preview fetches like any page would.
What happens if a script in the page has an infinite loop?
Loops in the page's scripts carry a time check. One that keeps running for more than 1.5 seconds is stopped and a banner in the preview says so; fix the code and the preview reloads as you type.
Is this an alternative to CodePen without login?
For editing a page together, yes: nobody needs an account, and up to 3 people at once edit the same files with live cursors (10 in a Pro room). It does not have a public gallery or embeds; rooms are private to whoever has the link.
The free plan covers everything on this page. PairPad Pro ($29, paid once) is described on the PairPad page.
