Codepen
Social development environment for front-end code. Build and share HTML/CSS/JS demos, explore thousands of community creations. The go-to for frontend prototyping and experimentation. Pens run entirely client-side, which makes it a fast way to reproduce a bug before filing it.
Not sure how to add Codepen to your home screen? Step-by-step for Chrome, Safari, Firefox and Edge — it takes about ten seconds, and there is no app store involved.
Own Codepen? Have us re-run this measurement — we open it in a real browser, cut the network, and send you what survived.
How to install Codepen as a PWA
Are you the maker of Codepen? Claim this listing →
More in Development Tools
Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.
The best regex debugger on the web. Real-time explanation, match highlighting, test strings, and a library of saved patterns. Supports PCRE2, JavaScript, Python, Golang regex. It explains each token in plain language beside the pattern, which turns debugging into reading rather than guessing.
Google's image compression tool — compare formats (WebP, AVIF, MozJPEG) side by side with live quality sliders. All processing is client-side. A must-have for web developers.
Drag-drop SVG optimizer with live preview. Uses SVGO under the hood — remove metadata, clean paths, reduce file size by 30-80%. Essential for frontend developers.
Check the bundle size of any npm package before installing it. Enter a package name, get instant size stats (minified + gzipped). A critical tool for keeping JS bundles lean.
Full browser-based IDE running Node.js via WebAssembly. Open GitHub repos instantly, run npm packages without installation, share working demos with a URL. No local setup needed.