React + Angular + Vanilla playground • AI Agent • Version History
Build, run, and share code instantly.
CodPen is a CodePen-like environment for React, Angular, Next.js, and Vanilla projects. Create files & folders, edit with Monaco, run a live Sandpack preview, review AI change proposals before applying them, and restore earlier versions whenever needed.
Everything you need to move fast
A practical, modern setup for building and testing ideas with clean UI and strong ergonomics.
VS Code-like File Explorer
Create files & folders, rename, delete, and keep everything organized.
Monaco Editor
Fast editing with syntax highlight and a familiar coding experience.
Live Sandpack Preview
Run React, Next.js, Angular, or Vanilla instantly with preview and console feedback.
AI Coding Agent
Ask AI to create, update, or delete files through structured change proposals.
Review Before Apply
Inspect every AI change with per-file approval controls before project files are touched.
Monaco Diff Viewer
Compare original and proposed code side by side with split or inline diffs.
Version History
Save checkpoints for manual saves, AI changes, and restores with a private history timeline.
Restore & Undo
Restore older versions or instantly undo the latest AI-applied changes.
Shareable Projects
Save and share your work with a single link while history stays private.
Designed for creators
CodPen is built for fast iteration: write code, run it, see it, improve it. Repeat.
Prototyping
Spin up UI ideas quickly and test them live.
Teaching
Share runnable examples with students or teammates.
Debugging
Reproduce issues in isolation and fix them faster.
Showcasing
Create clean demos for portfolios and product updates.
- Project structure with folders & files
- Live preview and runtime console
- AI proposals with diff review
- Private version history with restore
- Undo for approved AI changes
No setup. Just code.
FAQ
Can I create files and folders like VS Code?
Yes. Use the file explorer to add, rename, and delete items — ideal for real project structures.
Does it support React, Angular, and Vanilla projects?
Yes. Switch between modes and run instantly in the live preview sandbox.
Is the AI panel required?
No. It’s optional. Use it for review or generation when you want a second brain.
Will AI changes apply automatically?
No. AI returns a structured proposal first. You review diffs, approve files, and then apply only what you choose.
Can I restore previous versions?
Yes. Saved projects have private history, checkpoints, and restore support.
Can I share a project link?
Yes. Save your project, make it public, and share it with a single URL.