--- title: The new yet familiar CodePen 2.0 | daily.dev description: CodePen 2.0 has launched after five years of development, bringing major upgrades including a full file system that breaks the old three-file constraint, ES... canonical: https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The new yet familiar CodePen 2.0 | daily.dev og:description: CodePen 2.0 has launched after five years of development, bringing major upgrades including a full file system that breaks the old three-file constraint, ES... og:url: https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl og:image: https://api.daily.dev/og/posts/TEtPMk5ZL.png og:image:alt: The new yet familiar CodePen 2.0 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The new yet familiar CodePen 2.0 **[Dave Rupert](https://daily.dev/sources/daverupert)** · 6 min read · 1 upvotes · 0 comments ## Summary CodePen 2.0 has launched after five years of development, bringing major upgrades including a full file system that breaks the old three-file constraint, ES module imports, multi-page support, version history, deployment to custom subdomains, and a visual 'Blocks' UI for build pipelines. The new editor supports Sass, TypeScript, and other preprocessors by simply using the right file extension. Despite the expanded feature set, the UI remains familiar and intuitive. The author, who co-hosts a podcast with a CodePen co-founder and participated in the beta, praises the team for balancing power-user needs with beginner accessibility while avoiding VC pressure to rush. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What new features does CodePen 2.0 add compared to the old editor? CodePen 2.0 adds a real file system supporting multi-file and multi-page projects with JS-style imports like import foo from './foo.js', a version history for rolling back pens, improved deployments with codepen.dev URLs or custom subdomains, and a feature called Blocks that visualizes the build pipeline (preprocessors, linters, config) instead of requiring manual config files. _Developers evaluating prototyping tools can follow release breakdowns like this one on daily.dev._ ### How does CodePen 2.0's Blocks feature simplify build tooling? Blocks gives a visual layer over preprocessors, linters, and build steps, letting users see and understand a stacked pipeline instead of hunting through config files. Adding a .scss or .ts file extension automatically wires up the correct Blocks with a working default configuration, removing the need to manually manage Sass or TypeScript setup. _Anyone weighing visual build tooling against traditional config files can track takes like this on daily.dev._ ## Similar posts on daily.dev - [CodePen 2.0](https://daily.dev/posts/codepen-2-0-j2meaiqv9) · Hacker News · 3 upvotes · 0 comments - [433: CodePen 2.0 is Backward Compatible with Any Classic Pen or Project](https://daily.dev/posts/433-codepen-2-0-is-backward-compatible-with-any-classic-pen-or-project-ynr9l2uu7) · CodePen · 2 upvotes · 0 comments - [421: View Control of the 2.0 Editor](https://daily.dev/posts/421-view-control-of-the-2-0-editor-y1b7c4rg8) · CodePen · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The new yet familiar CodePen 2.0","url":"https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl"},"datePublished":"2026-07-27T04:52:34.241Z","dateModified":"2026-09-14T08:42:20.056Z","description":"CodePen 2.0 has launched after five years of development, bringing major upgrades including a full file system that breaks the old three-file constraint, ES...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9271fb1afb700eda470e183c2c19513e?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9271fb1afb700eda470e183c2c19513e?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Dave Rupert","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Dave Rupert","logo":"https://media.daily.dev/image/upload/s--Ewp37ILO--/f_auto,q_auto/v1777801532/logos/daverupert","url":"https://daily.dev/sources/daverupert"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dave Rupert","item":"https://daily.dev/sources/daverupert"},{"@type":"ListItem","position":3,"name":"The new yet familiar CodePen 2.0"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-new-yet-familiar-codepen-2-0-tetpmk5zl#faq","mainEntity":[{"@type":"Question","name":"What new features does CodePen 2.0 add compared to the old editor?","acceptedAnswer":{"@type":"Answer","text":"CodePen 2.0 adds a real file system supporting multi-file and multi-page projects with JS-style imports like import foo from './foo.js', a version history for rolling back pens, improved deployments with codepen.dev URLs or custom subdomains, and a feature called Blocks that visualizes the build pipeline (preprocessors, linters, config) instead of requiring manual config files. Developers evaluating prototyping tools can follow release breakdowns like this one on daily.dev."}},{"@type":"Question","name":"How does CodePen 2.0's Blocks feature simplify build tooling?","acceptedAnswer":{"@type":"Answer","text":"Blocks gives a visual layer over preprocessors, linters, and build steps, letting users see and understand a stacked pipeline instead of hunting through config files. Adding a .scss or .ts file extension automatically wires up the correct Blocks with a working default configuration, removing the need to manually manage Sass or TypeScript setup. Anyone weighing visual build tooling against traditional config files can track takes like this on daily.dev."}}]} ```