Wenn Sie wissen möchten, ob sich die Schätzung einer Interaktion lohnt, diskutieren Sie nicht in einem Ticket darüber. Bauen Sie sie in zehn Minuten in einem Browser-Tab und lassen Sie alle das gleiche funktionierende Ergebnis sehen. Genau dafür ist CodePen da.
CodePen ist eine browserbasierte Spielwiese für HTML, CSS und JavaScript, die das Ergebnis direkt während der Eingabe anzeigt. Seit 2012 bezeichnet sich die Plattform als soziale Entwicklungsumgebung für Front-End-Designer und -Entwickler, und im Juli 2026 wurde sie neu aufgebaut als CodePen 2.0, ein auf Vite basierender Editor, der einige Dinge anders handhabt, als es in älteren Tutorials noch beschrieben wird.
Stellen Sie es sich wie eine bereits fertig montierte Werkbank vor: Sie treten heran und fangen direkt an zu arbeiten. Eine Grenze ist dabei jedoch wichtiger als alle anderen: Pens sind standardmäßig öffentlich, daher gehört proprietärer Code niemals hinein.
Dieser Artikel behandelt die Funktionen von CodePen, die Neuerungen in Version 2.0, die Verwendung mit React und Vue, das Teilen und Exportieren Ihrer Arbeit sowie die zwei Regeln, die wir bei Kundenprojekten anwenden.
CodePen ist eine Entwicklungsplattform, auf der jeder direkt im Browser Front-End-Code, also HTML, CSS und JavaScript, schreiben kann, ohne etwas herunterladen zu müssen. Die Ergebnisse werden in Echtzeit angezeigt, was die Zeitspanne zwischen einer Änderung und dem Feedback, ob sie funktioniert hat, verkürzt.
Diese Zeitspanne ist keine Frage des Geschmacks. Jakob Nielsens Grenzwerte für Antwortzeiten legen eine Sekunde als Schwelle fest, bei der der Gedankengang erhalten bleibt, und zehn Sekunden als den Punkt, an dem die Aufmerksamkeit abschweift. Ein lokaler Build plus ein Neuladen der Seite überschreitet routinemäßig die erste Grenze. Eine sofortige Vorschau tut dies nicht, und genau dieser Umstand ist der Hauptgrund, warum das Tool so wertvoll ist.
Entwickler und Designer können zudem Code-Schnipsel, sogenannte Pens, veröffentlichen und mit dem Rest der Welt teilen.
Das sollte man klar sagen, denn ältere Anleitungen (und bis vor kurzem auch dieser Artikel) beschreiben ein Tool, das sich weiterentwickelt hat.
In der ersten Jahreshälfte 2026 führte CodePen eine öffentliche Beta-Version eines neuen Editors durch, und im Juli 2026 wurde 2.0 offiziell eingeführt. Die wichtigste Neuerung ist die Konsolidierung: Der klassische Pen-Editor, der Projekt-Editor und der alte Vue-spezifische Editor sind nun ein einziger, auf Vite basierender Editor.
Was das in der Praxis bedeutet:
App.vue, Header.vue, usw.), genau wie ein kleines echtes Projekt.<body>“ gehört, zu schreiben und Styles sowie Skripte automatisch eingebunden zu bekommen, bleibt dies als Classic Block in 2.0 erhalten. Sie haben nichts verloren.*.codepen.app Subdomain, die deinen Pen als Live-Seite bereitstellt und jederzeit aktualisiert werden kann.Der praktische Nutzen für Teams: 2.0 schließt die Lücke zwischen „CodePen ist nur für einzelne Snippets“ und „für echte Projekte braucht man eine komplette Sandbox“. Dinge, für die man CodePen früher verlassen musste, funktionieren jetzt direkt hier.
Die CodePen-Community veröffentlicht Front-End-Komponenten, Animationen und nahezu fertige Seitenlayouts. Wenn Sie Ideen haben, die es wert sind, geteilt zu werden, können Sie diese auf demselben Weg veröffentlichen. Stellen Sie nur vorher sicher, dass der Code tatsächlich von Ihnen stammt und nicht dem Urheberrecht Dritter unterliegt.
Für ein Team ist dies die kostengünstigste Form der technischen Recherche. Bevor Sie eine unbekannte Interaktion einschätzen, verbringt jemand zehn Minuten damit herauszufinden, ob sie bereits öffentlich gelöst wurde.
Sie interessieren sich nicht für den Code anderer? Völlig verständlich. Sie können CodePen dennoch nutzen, um die Styles einer Komponente unabhängig von den Regeln Ihrer bestehenden Codebasis zu entwickeln, damit diese nicht durch Code beeinflusst werden, der für andere Zwecke geschrieben wurde. Mit anderen Worten: eine leere Leinwand.
Erstellen Sie ein Pen pro Komponente, damit Sie jedes Mal mit weniger Code arbeiten. Diese Gewohnheit, pro Komponente ein Pen zu nutzen, spart am meisten Zeit: Da Sie nur eine einzelne Komponente vor sich haben, kann eine Änderung nicht unbemerkt ein benachbartes Element beschädigen, und Sie bemerken Fehler sofort statt erst am Ende.
CodePen ist eine praktische Methode, um ein neues Framework oder eine Bibliothek auszuprobieren, ohne vorher eine Umgebung einrichten zu müssen. Und es ist der Ort, an dem Vergleiche aufhören, theoretisch zu sein: Eine Führungskraft kann dem Team beide Optionen als funktionierende Pens präsentieren, statt nur darüber zu diskutieren. Ein funktionierendes React ist besser als ein beschriebenes. Wenn Sie die Optionen ernsthaft abwägen, zeigt Ihnen unser Leitfaden zu den besten Front-End-Frameworks auf, wie wir jedes einzelne hinsichtlich Performance, Team-Eignung und kommerziellem Risiko bewerten.
Einige Funktionen fallen selbst nach mehrmaligen Besuchen nicht sofort auf – es lohnt sich also, sie sich in Ruhe anzusehen.
Auf der Hauptseite kannst du nach Pens, Personen, Projekten oder Sammlungen suchen. Wenn du jedoch zu schnell tippst und die Eingabetaste drückst, übersiehst du vielleicht, dass du auch Themen (Frameworks, Bibliotheken und UI-Muster) erkunden kannst, die jeweils eine eigene Seite mit Pens, Vorlagen und Ressourcen haben. Die Beispiele enthalten einen Screenshot, sodass du eine Vorschau sehen und entscheiden kannst, ob sich ein Blick lohnt.
Von dort aus kannst du die Editor-Ansicht öffnen, um mit dem Code zu experimentieren, oder zur Detailansicht wechseln, um zu kommentieren, zu liken, dem Autor zu folgen und mit dem Pen zu interagieren. Du kannst einen Pen auch für später speichern; du findest ihn dann im Bereich Dein in der Navigation.
Der Editor ist das Herzstück. Du siehst den Code und die Vorschau gleichzeitig, und die Vorschau aktualisiert sich automatisch, während du den Code änderst. Kein Hin- und Herwechseln zwischen Dateireitern und Browser-Tabs mehr – das spart bei jedem Arbeitsschritt Zeit. Brauchst du einen Bereich nicht? Dann zieh ihn einfach mit der Maus aus dem Bild.
Du kannst auch das Layout anpassen. Wenn du mehr Höhe für die Vorschau benötigst, etwa um ein mobiles Layout zu prüfen, kannst du die Code-Bereiche über das Menü Ansicht ändern vertikal untereinander anordnen.
Ein Präprozessor ist eine Sprache, die zu HTML, CSS oder JavaScript kompiliert wird: zum Beispiel Sass für CSS oder Haml für HTML. Du schreibst den kürzeren Code, und der Browser erhält am Ende den Standard-Code. In Version 2.0 sind diese sowie neuere Optionen wie Tailwind, Lightning CSS, MJML und Nunjucks als Blöcke und Prozessoren direkt integriert, ohne dass du den Editor verlassen musst.
Um eine externe Bibliothek oder ein Stylesheet einzubinden, öffnen Sie Einstellungen, suchen Sie den Tab für den entsprechenden Bereich und fügen Sie Ihre externen Quellen hinzu. Sie möchten Bootstrap nutzen? Fügen Sie es mit wenigen Klicks als externes Stylesheet hinzu, ganz ohne lokale Konfiguration.
In einem kostenpflichtigen Plan besteht das Hinzufügen eines Bildes aus drei Schritten: Öffnen Sie Assets, laden Sie das Bild hoch und kopieren Sie die URL in Ihren Code. Im kostenlosen Plan hosten Sie das Bild zunächst an anderer Stelle (Imgur oder ImgBB funktionieren hierfür gut) und fügen den Link dann in ein <img> -Tag oder eine CSS- background-image -Regel ein.
Ja, Sie können React auf CodePen verwenden, genau wie die meisten anderen JavaScript-Bibliotheken, da diese als externe Skripte eingebunden werden können. Da React nicht im Dropdown-Menü für JavaScript-Präprozessoren enthalten ist, fügen Sie es unter Settings, JS, Add External Scripts/Penshinzu, geben „React“ ein und wählen die benötigten Versionen aus. Wenn Sie JSX schreiben, aktivieren Sie Babel für die Kompilierung.
Wir setzen bei Kundenprojekten React-Frontends genau in dieser Form ein. Bei AppTweakhaben wir beispielsweise das Dashboard mit React und TypeScript neu aufgebaut und die Ladezeit um 80 % verbessert – genau die Art von Performance-Gewinn im Frontend, die Nielsens Grenzwerte für Antwortzeiten vorhersagen. Ein Pen ist der Ort, an dem solche Komponenten prototypisch entwickelt werden, bevor sie in die Anwendung integriert werden.
Hier zeigt sich der größte Vorteil von 2.0. Früher benötigte Vue einen speziellen Editor für Single-File-Components, der über Topics erreichbar war. Das ist nicht mehr nötig: Vue wird jetzt direkt im 2.0-Editor von Vite verarbeitet, sodass .vue Single-File-Components problemlos neben allem anderen funktionieren und ein Vue-Pen sogar einen anderen importieren kann.
Wir setzen beide Frameworks produktiv ein, nicht nur für Demos. Bei Farmlink (GrainFox) haben wir die Benutzeroberfläche mit Flutter und Vue überarbeitet, woraufhin sich die App-Nutzung beim Kunden verdreifacht hat. Wenn man solche Interfaces prototypisch entwickelt, ist ein Pen der kostengünstigste Ort, um eine Komponente zu testen, bevor man sie in die Codebasis integriert.
Falls Sie einem älteren Tutorial folgen, das Sie über Explore Topicszu einem separaten Vue- oder Flutter-Editor schickt, seien Sie skeptisch. Die Wege werden derzeit im neuen Editor zusammengeführt. Im Zweifelsfall starten Sie einfach einen normalen 2.0-Pen und fügen das Framework als Prozessor oder externe Ressource hinzu.
Sie schreiben in SCSS (einer CSS-Erweiterung mit Variablen, Verschachtelungen und Funktionen), aber Ihr Projekt unterstützt nur reines CSS? Ein Klick genügt. Klicken Sie auf den Pfeil oben rechts im Code-Bereich und wählen Sie Kompilierte Ansicht. Dies lässt sich jederzeit rückgängig machen. Wenn Sie den Pen herunterladen, wird die kompilierte Version in einem eigenen Ordner mitgeliefert.
Um einen Pen in Ihr Projekt zu integrieren, ist Kopieren und Einfügen am schnellsten. Sie können ihn auch Exportieren (in der Fußzeile, nach dem Speichern) als ZIP-Datei oder GitHub Gist – praktisch, wenn Sie Dateien teilen möchten, ohne gleich ein ganzes Repository aufzusetzen.
Wenn Sie ein neues Front-End-Projekt starten, sind dies die Gründe, warum Sie zu CodePen greifen sollten.
CodePen war eine echte Hilfe bei meiner Abschlussarbeit, für die ich ein komplett neues Front-End für eine bestehende Codebasis entwickeln musste. Es ist die gleiche Art von Problem, die wir für Kunden lösen: Für Eurofound haben wir in sechs Wochen ein frisches, benutzerfreundliches Front-End über ein bestehendes Back-End und eine Datenbank hinweg entwickelt und eine Schnittstelle für mehr als 280 Initiativen bereitgestellt. Ich greife immer noch zu CodePen, wenn ich etwas Neues lernen möchte – sei es React oder eine Animationstechnik – oder eine Bibliothek isoliert testen will. Dabei mache ich mir nie Sorgen um den bestehenden Code, da mir der Pen den nötigen Freiraum gibt, die Benutzeroberfläche zu entwickeln und sie erst später auf das Projekt anzuwenden, ohne etwas zu verändern, das bereits funktioniert.
Für einen einzelnen Entwickler ist CodePen eine bequeme Hilfe. Für ein Team unter Zeitdruck verändert es die Zeitplanung und bringt ein Risiko mit sich, das man offen ansprechen sollte.
Einrichtung ohne Aufwand. Jedes Experiment, für das man sonst eine lokale Umgebung, einen Build-Prozess und einen Entwicklungsserver bräuchte, startet stattdessen direkt in einem Browser-Tab. Bei Projekten, in denen das Team verschiedene Komponentenansätze testet, bevor es sich für einen entscheidet, fällt dieser Einrichtungsaufwand nur einmal zu Beginn der eigentlichen Entwicklung an – und nicht für jedes Experiment aufs Neue.
Feedback ohne Umwege. Bei unseren Projekten findet die Design-Abnahme für eine Interaktion meist direkt im Pen statt, statt erst nach einem Deployment. Ein Designer öffnet ihn, sieht das Ergebnis in Aktion und hinterlässt Kommentare an Ort und Stelle. Entscheidungen müssen nicht mehr darauf warten, dass eine Umgebung für andere zugänglich gemacht wird. (Mehr darüber, wie wir diese Lücke schließen, haben wir hier geschrieben: vom Design zum Front-End.)
Onboarding und Evaluierung. Wenn ein Entwickler zu einem Projekt mit einem unbekannten Framework stößt, ist eine Handvoll Pens ein schnellerer Einstieg als ein Repository, das er noch nicht einmal ausführen kann. Dasselbe gilt, wenn ein Lead zwischen zwei Bibliotheken wählen muss: Beide als Pens umsetzen und das Team auf den laufenden Code reagieren lassen, statt auf bloße Meinungen.
Wir wenden bei jedem Projekt dieselben zwei Regeln an. Sie sind es, die nützliches Prototyping von einem Sicherheitsrisiko unterscheiden.
Die zweite Regel ist die mit dem asymmetrischen Risiko. Ein Tool, das dir einen Nachmittag Arbeit spart, kann durch einen einzigen eingefügten Schlüssel einen Sicherheitsvorfall und ein Kundengespräch auslösen, das dich weit länger als diesen Nachmittag beschäftigen wird.
Wenn man diese Grenze einhält, ist CodePen am besten als Prototyping-Ebene zu verstehen, die vor der Entwicklung angesiedelt ist, nicht darin. Plane es als Recherchezeit ein, nicht als Entwicklungszeit, dann zahlt sich dieser Ansatz aus.
CodePen ist nicht immer das richtige Werkzeug, und das Gegenteil zu behaupten, ist reine Zeitverschwendung.
Ja, mit Einschränkungen. Du kannst nach Pens suchen, den Editor nutzen und öffentliche Pens kostenlos erstellen. Zudem kannst du den Editor ohne Konto verwenden (allerdings ohne Speicherfunktion). Der kostenlose Plan ist auf drei Dateien pro Pen begrenzt. Kostenpflichtige Pläne – Starter (8 $/Monat), Developer (12 $/Monat) und Super (26 $/Monat) bei jährlicher Abrechnung – bieten Privatsphäre, mehr Dateien, Asset-Hosting, Zusammenarbeit mit anderen und Werbefreiheit. Die aktuellen Tarife findest du auf der Preisseite von CodePen.
Nicht für vertrauliche Inhalte. Pens sind standardmäßig öffentlich und können von jedem gefunden und geforkt werden. Kundencode, Zugangsdaten und vertrauliche Daten sollten daher niemals dort eingefügt werden. Stelle das Problem mit Platzhalterdaten nach oder behalte die Arbeit in der eigenen Projektumgebung.
Ein neu entwickelter, auf Vite basierender Editor, der im Juli 2026offiziell wurde. Er fasst die alten Pen-, Project- und Vue-Editoren zusammen, unterstützt mehrere Dateien pro Pen, fügt Prozessoren wie Tailwind und Lightning CSS als „Blocks“ hinzu und macht jeden Pen unter einer *.codepen.app URL bereitstellbar. Die vertraute Drei-Fenster-Ansicht bleibt als „Classic Block“ erhalten.
Ja. Da React nicht im Dropdown-Menü für JavaScript-Präprozessoren enthalten ist, füge es unter „Settings“, „JS“, „Add External Scripts/Pens“ hinzu und aktiviere Babel, wenn du JSX schreibst. Die meisten anderen JavaScript-Bibliotheken lassen sich auf die gleiche Weise einbinden.
Ja, und zwar einfacher als zuvor. In 2.0 wird Vue direkt von Vite verarbeitet, sodass Single-File-Components keinen separaten Editor mehr benötigen.
Verwenden Sie nach dem Speichern die Export-Schaltfläche in der Fußzeile. Sie können eine ZIP-Datei herunterladen oder ein GitHub Gist veröffentlichen. Auch Kopieren und Einfügen in Ihr Projekt funktioniert und ist oft schneller.
CodePen ist auf schnelle Front-End-Experimente mit sofortiger Vorschau ausgelegt. CodeSandbox und StackBlitz bilden ein vollständiges Projekt mit Dateibaum, Paketmanager und Entwicklungsserver ab. CodePen 2.0 schließt einen Teil dieser Lücke, aber die sinnvolle Trennung bleibt bestehen: CodePen für isolierte Komponenten und Interaktionen, eine vollständige Sandbox für alles, was einen echten Build-Prozess erfordert.
CodePen behauptet sich als Prototyping-Ebene: schnell zur Hand, kostenlos zum Ausprobieren und sicher, solange die beiden oben genannten Regeln gelten. Die Werkbank ist bereits aufgebaut und mit 2.0 nun deutlich leistungsfähiger.
Wenn Sie abwägen, wie Ihr Team Front-End-Projekte prototypisiert, entwickelt und ausliefert, sprechen wir gerne mit Ihnen darüber. Imaginary Cloud entwirft und entwickelt Front-End-Anwendungen seit 2010, und unsere Dienstleistungen für die digitale Transformation decken alles vom ersten Prototyp bis zum fertigen Produkt ab. Kontaktieren Sie uns und erzählen Sie uns, woran Sie arbeiten.
Webentwickler mit einer besonderen Liebe zum Frontend. Mutter von Katzen. In meiner Freizeit versuche ich, den Planeten zu retten, indem ich umweltfreundliche Alternativen teile.
CEO von Imaginary Cloud und Mitautor des Buches Product Design Process. Ich mag Essen, Wein und Krav Maga (nicht unbedingt in dieser Reihenfolge).
People who read this post, also found these interesting:
.webp)
