CodePen 2.0
The new CodePen beta brings files and folders, Blocks, custom defaults, visual configuration, collaboration, Omnibar, and privacy controls.
The CodePen team has introduced a beta version of the editor. Under the hood, the engine has been completely rewritten and there are lots of new capabilities, but the editor remains just as lightweight and fast, keeping CodePen’s defining feature: instant preview. ⚡️
What’s new:
📁 File system: Pens now have files and folders, so you can build more complex project structures instead of being limited to HTML/CSS/JS.
🧩 Custom defaults: you can create your own template so new Pens start with the stack and settings you need.
🧱 Blocks: a new build system. Blocks are modules that process code, such as Sass, Babel, PostCSS, Prettier, and so on. You can combine them, and CodePen assembles the configuration and makes sure everything works together.
⚙️ Simple configuration: each Block has its own configuration (for example, tsconfig or Prettier settings), which you can manage through a visual editor.
🤝 Real-time collaboration: you can invite other developers and work on a Pen together, just like in Google Docs.
⌘ Omnibar: a command palette for quickly finding files, settings, and commands.
🔒 Expanded privacy settings: private Pens, invitation-only access, and even password protection.
It looks like CodePen is gradually turning from a simple playground into a fully fledged, lightweight frontend development environment.
Which tool do you use when you need to open a sandbox quickly?