KO|EN
About
Dev

✏️ CodePen

Browser-based HTML/CSS/JS editor — code, preview, and share in real time

🔗 Go to CodePen
Home › Dev › CodePen
Category
Dev
Developer
CodePen
Free Plan
✅ 있음
Language
English

About

CodePen is a browser-based code editor for front-end development. Write HTML, CSS, and JavaScript and see the output update in real time. Share your 'Pen' via a link, browse thousands of community creations, or fork someone else's work to learn from it. Perfect for prototyping ideas, reproducing bugs, and building portfolio pieces.

Key Features

💡 Tips

  • Add external CDN libraries (React, Vue, GSAP, etc.) in Settings → JS without any npm install.
  • Use console.log in your JS — output shows in the built-in console panel at the bottom of the editor.
  • Fork a popular community Pen, read through the code, and modify it — one of the best ways to learn new techniques.

Frequently Asked Questions

Is CodePen free?

Core features are free. Private Pens, collaboration features, and asset hosting require a Pro plan starting at $8/month.

Can I use React or Vue?

Yes. Enable the Babel preprocessor in Settings to run JSX and React code. Add Vue, Alpine.js, or any other library via CDN in the JS settings.

Can I use it for portfolio work?

Absolutely. Share public Pen URLs in your portfolio or use them during job interviews to demonstrate your front-end skills live.