A frontend pen has three editors — HTML, CSS, JavaScript — plus a live preview. Press Ctrl/⌘ + Enter to run, or enable LiveEdit for as-you-type updates.
1. Pick a preprocessor (optional)
Each editor has its own preprocessor menu. CSS supports SCSS, Less, Sass, Stylus, and PostCSS. JS supports Babel, TypeScript, CoffeeScript, LiveScript, and Angular.
2. Add external resources
Open Settings → CSS / JS and paste a URL. Or pick from the popular chips: jQuery, React, Tailwind, Three.js, Day.js.
3. Share the room
Click the LiveEdit button, then copy the invite link from the status bar. Anyone with the link joins instantly — no signup required for guests on public pens.
Tip
Press ? anywhere in the editor for the shortcut overlay.