Wer eine CSS-Animation ausprobieren, einen JavaScript-Algorithmus testen oder eine Komponente schnell prototypen möchte, greift meistens zu CodePen. Seit 2012 ist die Plattform das zentrale Zuhause der Frontend-Community: Über 21 Millionen öffentliche Projekte, täglich Tausende neue Einreichungen und eine aktive Kommentarkultur machen CodePen zur wichtigsten Anlaufstelle für HTML-, CSS- und JavaScript-Experimente. Dieser Artikel erklärt, wie man CodePen effektiv nutzt – vom ersten Pen bis zur Einbettung in eigene Websites.
Was ist CodePen und wofür wird es genutzt?
CodePen ist ein browserbasierten Entwicklungsumgebung (Online-IDE) speziell für Frontend-Code. Der Clou: Änderungen im Editor werden sofort in der Vorschau sichtbar – kein Speichern, kein Build-Prozess, kein Browserfenster neu laden. Das macht CodePen ideal für:
- Schnelles Prototyping von UI-Komponenten ohne lokales Projekt-Setup
- Bug-Reproduktion als minimaler Testfall für Stack-Overflow-Fragen oder GitHub-Issues
- Lernprojekte und interaktive Tutorials
- Portfolio-Demos, die direkt im Browser laufen
- Kollaboration über geteilte Links ohne Versionskontrolle
Einen Pen erstellen
Nach dem Öffnen von CodePen landet man direkt im Editor. Ein neuer Pen besteht aus drei Panels: HTML, CSS und JS – plus der Live-Vorschau darunter oder daneben. Die Anordnung lässt sich über Change View anpassen: Editor links, Vorschau rechts ist für breite Bildschirme am produktivsten.
Im HTML-Panel schreibt man nur den Body-Inhalt, kein vollständiges Dokument-Gerüst. CodePen generiert das <html>-, <head>- und <body>-Tag automatisch. Externe Stylesheets und Skripte bindet man über die Pen Settings ein, nicht über <link>-Tags im HTML.
Externe Libraries einbinden
Unter Pen Settings → CSS bzw. Pen Settings → JS lassen sich externe Ressourcen auf zwei Wegen einbinden:
- CDN-Links: Direkte URL zu einer CSS- oder JS-Datei (z. B. von jsDelivr oder cdnjs) eintragen. CodePen lädt die Datei beim Rendern der Vorschau.
- npm-Pakete: CodePen Pro unterstützt das direkte Einbinden von npm-Paketen über die Eingabe des Paketnamens – kein CDN-Link nötig.
Populäre Libraries wie React, Vue, Alpine.js oder GSAP haben oft einen eigenen Schnellauswahl-Button in den Settings, sodass man den CDN-Link nicht manuell suchen muss.
Preprocessors: Sass, TypeScript, Babel
CodePen kompiliert Preprocessors direkt im Browser. Im CSS-Panel wählt man unter Settings → CSS Preprocessor zwischen:
- Sass / SCSS: Variablen, Nesting, Mixins – der verbreitetste CSS-Preprocessor
- Less: Ähnliche Funktionen, etwas andere Syntax
- Stylus: Minimalistischere Syntax ohne Semikolons und geschweifte Klammern
Im JS-Panel stehen TypeScript, Babel (für modernes JavaScript ohne TypeScript-Typen) und CoffeeScript zur Verfügung. Für React-Projekte wählt man Babel und bindet React/ReactDOM per CDN ein; TypeScript-Pens nutzen automatisch die aktuellste TypeScript-Version.
Pens teilen und einbetten
Jeder gespeicherte Pen erhält eine eindeutige URL (z. B. https://codepen.io/username/pen/abc123). Für das Einbetten in externe Seiten bietet CodePen einen iframe-Embed-Code an:
<iframe height="300" style="width: 100%;" scrolling="no"
title="Mein Pen" src="https://codepen.io/user/embed/abc123"
frameborder="no" loading="lazy"></iframe>Der Embed-Code lässt sich über Share → Embed konfigurieren: Vorschau- oder Editor-Ansicht, Standardpanel (HTML/CSS/JS), Höhe und Theme (hell/dunkel).
Collections, Projects und CodePen Pro
Collections sind kuratierte Sammlungen eigener oder fremder Pens – nützlich, um thematisch verwandte Experimente zu gruppieren oder Inspirations-Listen zu pflegen. Projects gehen einen Schritt weiter: Sie ermöglichen mehrere Dateien (HTML, CSS, JS, Bilder) in einer Ordnerstruktur, ähnlich einem echten lokalen Projekt – allerdings nur in CodePen Pro.
CodePen Pro bietet außerdem: Private Pens, Asset-Hosting (Bilder direkt in CodePen hochwählen), Collab Mode für simultanes Echtzeit-Editieren mit anderen Nutzern sowie Live-Preview auf dem eigenen Gerät über eine separate URL.
Vergleich: CodePen vs. Alternativen
| Feature | CodePen | JSFiddle | StackBlitz | CodeSandbox |
|---|---|---|---|---|
| Live-Vorschau | ✓ | ✓ | ✓ | ✓ |
| Node.js / npm | Pro (begrenzt) | ✗ | ✓ | ✓ |
| Framework-Templates | Begrenzt | ✗ | ✓ (React, Vue, etc.) | ✓ |
| Community / Explore | Sehr groß | Klein | Mittel | Mittel |
| Offline-Modus | ✗ | ✗ | ✓ (WebContainers) | Begrenzt |
| Kostenlose Stufe | Großzügig | Vollständig | Eingeschränkt | Eingeschränkt |
Wer reine HTML/CSS/JS-Experimente ohne Build-Tool benötigt, ist bei CodePen am besten aufgehoben. Für vollständige Node.js-Anwendungen oder Framework-Projekte mit Package-Manager sind StackBlitz oder CodeSandbox die bessere Wahl. Wer nach Lernmaterial sucht, findet in der CodePen Topics-Sektion kuratierte Sammlungen zu CSS-Animationen, SVG, Canvas und vielem mehr.
FAQ: CodePen für Entwickler
- Kann ich in CodePen PHP oder serverseitige Sprachen nutzen?
- Nein. CodePen ist ausschließlich auf Frontend-Technologien (HTML, CSS, JavaScript) ausgerichtet. Für serverseitige Experimente mit Node.js oder PHP eignen sich StackBlitz bzw. lokale Entwicklungsumgebungen besser.
- Wie binde ich Google Fonts in einen Pen ein?
- Unter Pen Settings → CSS gibt es ein Feld für externe Stylesheets. Dort einfach den Google-Fonts-
<link>-URL eintragen (nur die URL, ohne HTML-Tags). Alternativ kann man@import url(…)direkt im CSS-Panel verwenden. - Werden Pens automatisch gespeichert?
- CodePen speichert automatisch, sobald man aufhört zu tippen (Autosave-Modus). Manuell kann man mit Ctrl+S speichern. Nicht angemeldete Nutzer verlieren Änderungen beim Schließen des Tabs – also vorher einen Account erstellen.
- Kann ich CodePen für Bewerbungen nutzen?
- Ja, CodePen-Profile funktionieren hervorragend als lebendes Portfolio. Arbeitgeber können Demos direkt im Browser sehen, ohne Code lokal einzurichten. Viele Entwickler verlinken ihren CodePen-Profil in der Bewerbung neben GitHub.