Getting started#CodPen#Online editor
Getting started with the CodPen online editor
From choosing a template to creating files, using live preview, and saving your first project—a practical path into CodPen.
By CodPen.irPublished August 1, 20261 min read
Choose the right mode
CodPen includes ready-to-run environments for Vanilla, React, Next.js, and Angular. Start with Vanilla for HTML, CSS, and JavaScript, or React for component-driven interfaces.
The build-and-feedback loop
- Create files and folders from the file explorer.
- Write code in Monaco and watch the output update.
- Inspect errors and logs in the console.
- Sign in to save the project and publish it when ready.
A minimal starting point
<main class="app">
<h1>Hello CodPen</h1>
<p>Edit, preview, improve.</p>
</main>
Your first goal is not a complete project. Make one small change and learn the path from editing to preview.
