CodePen ist ein Editor fuer die Oberflaeche im Browser, der die Arbeit als Adresse veroeffentlicht
Zusammenfassung
Ein Editor und eine Gemeinschaft fuer die Oberflaeche im Browser, mit drei Flaechen fuer HTML, CSS und JavaScript nebeneinander, jede Aenderung sofort in der Vorschau, und ein fertiges Stueck in einem Klick als oeffentliche Adresse.
Empfehlen- Name
- CodePen
- Version
- 20261010
- Preis
- Kostenlos
- Open Source
- Proprietär
- Betriebssystem
- Web
- Webseite
- https://codepen.io/
- Aktualisiert
- 2026-10-11 10:42
Ein Stueck Code fuer die Oberflaeche zu schreiben wird selten vom Code selbst aufgehalten. Zeit kostet die Kette der Vorbereitung davor: Umgebung einrichten, Kette der Werkzeuge verdrahten, einen Ort zum Hosten finden, und jeder Schritt schiebt den Einfall weiter nach hinten.
Drei Flaechen und eine Vorschau
CodePen holt den kleinsten geschlossenen Kreis der Oberflaechenarbeit in den Browser. Die Seite oeffnen und ein Pen steht da: drei Flaechen mit HTML, CSS und JavaScript, Aenderungen erscheinen sofort in der Vorschau, nichts ist zu installieren, keine Befehlszeile ist zu bewaeltigen und keine Datei mit Einstellungen zu entwirren. Die Seite sagt es schlicht: nichts zu installieren, keine Befehlszeile, die sich stellt, keine Einstellung, die sich verheddert.
Ein Pen fasst mehr als diese drei. Dateien und Ordner lassen sich ergaenzen, bis aus einer losen Probe der Aufbau einer ganzen Seite wird, und was vorbereitet werden muss wie Sass oder TypeScript erledigt ein eingebauter Uebersetzer, sodass vorher keine Kette stehen muss. Statt bei leer zu beginnen, laesst sich ein Stueck aus der Gemeinschaft oder eine eigene Vorlage anwenden und sogar als Vorgabe setzen, damit jeder neue Pen an einem vertrauten Punkt anfaengt.

Wo das Geschriebene liegt
Die Arbeit liegt im Konto. Ein oeffentliches Stueck steht auf der eigenen Seite, andere koennen es lesen, merken und in der Suche finden; ein halb fertiger Einfall laesst sich zuerst mit den Einstellungen zur Sichtbarkeit wegschliessen; und wenn es viele werden, ordnen Sammlungen sie. Abos bringen zusaetzlich Ablage fuer Mittel: Bilder, Stile, Skripte und sogar Ton oder Bild, in eine Flaeche gezogen, werden hochgeladen, und der Dienst gibt eine Adresse mit HTTPS, Zwischenspeicher und Zutritt von anderer Herkunft zurueck, die jedes Stueck ansprechen kann, was die Suche nach einem Ort fuer ruhende Dateien erspart.
Das Veroeffentlichen schrumpft auf einen Klick. Jedes Stueck wird zu einer erreichbaren Adresse, ohne Server und ohne sich mit Eintraegen der Namen zu befassen. Wer es sieht, bleibt ebenso die eigene Wahl: ganz oeffentlich, verborgen, hinter einem Kennwort oder ganz verschlossen.
Wo frei endet und das Abo beginnt
Die Grenze der freien Stufe ist klar: oeffentliche Stuecke unbegrenzt, aber jedes fasst hoechstens drei Dateien und sein Inhalt ist von Anfang an oeffentlich. Verborgene Stuecke, verborgene Sammlungen und Ablage fuer Mittel beginnen mit einem Abo, und je hoeher die Stufe, desto lockerer werden Zahl der Dateien, Groesse der Mittel und Gesamtmenge je Stueck.
Posten | Frei | Starter | Developer | Super |
|---|---|---|---|---|
Im Monat | $0 | $8 | $12 | $26 |
Oeffentliche Stuecke | unbegrenzt | unbegrenzt | unbegrenzt | unbegrenzt |
Dateien je Stueck | 3 | 50 | 150 | 300 |
Verborgene Stuecke | nein | ja | ja | ja |
Ablage fuer Mittel | - | 2 GB | 25 GB | 50 GB |
Mitarbeitende | - | 5 | 10 | 15 |
Jaehrlich zu zahlen spart gegenueber monatlich: Starter sechsundneunzig Dollar im Jahr, Developer hundertvierundvierzig, Super dreihundertzwoelf. Auch das Mass fuer die Schnittstelle steigt mit der Stufe, hundert Anfragen in der Stunde frei gegen dreitausend im Abo. In Fassung 2.0 kam eine Runde Aenderungen an Oberflaeche und Ablauf, und die Einzelheiten neuerer Zuege stehen am besten in den offiziellen Notizen.
Welche Art von Problem es loest
In der Oberflaechenarbeit gibt es immer Code, fuer den sich ein eigenes Vorhaben vor Ort nicht lohnt: pruefen, wie ein Aufbau bei einer gewissen Breite aussieht, einen gemeldeten Fehler im Stil nachstellen, einem Kollegen einen Uebergang zeigen oder einfach ein Stueck notieren, das spaeter wieder gebraucht wird. Gemeinsam ist diesen Lagen kurzer Code mit kurzem Leben, der aber sofort ein Ergebnis braucht und eine Adresse, die sich weitergeben laesst.
Die schwachen Stellen des Behaelters sind ebenso klar: er steht auf der Seite der Darstellung und faehrt keinen vollen Dienst im Hintergrund; freie Stuecke fassen je drei Dateien, eine etwas groessere Probe stoesst also an die Decke; und Inhalte sind von Anfang an oeffentlich, was zaehlt, solange etwas unfertig ist. Es als Tuer fuer schnelle Pruefungen und zum Weitergeben zu nehmen und Vorhaben mit langer Pflege im eigenen Ablageort zu lassen, ist die natuerliche Teilung.
Ein Werkzeug senkt eine Schwelle meist nicht durch mehr Zuege, sondern indem es die Schritte davor streicht. Wenn eine Adresse genuegt, um Code zu schreiben, bleibt zwischen Einfall und Bild nur noch das Tippen.
Ein Hinweis fuer die Praxis: fuer eine kurze Pruefung oder Probe gleich ein neues Stueck oeffnen statt einer Umgebung vor Ort; zum Weitergeben die Veroeffentlichung nehmen, damit drueben nur geoeffnet werden muss; und bei Stuecken mit inneren Angaben zuerst die Sichtbarkeit stellen, dann schreiben.