Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable) package.json file, then turn that into a <script type="importmap"> in your HTML files that import those packages from…

CodePen's platform is a social development environment, offering insights into front-end web development, creative coding, and web design. Through articles, demos, and community projects, CodePen offers insights into HTML, CSS, and JavaScript techniques. Developers and designers can learn about CSS animations, responsive design patterns, and front-end frameworks to experiment and collaborate on web projects.

CodePen

CodePen's 2.0 Editor introduces npm package support by auto-detecting used packages, generating a package.json, and converting it into an importmap script tag that loads modules from esm.sh. The CodePen Compiler handles this pipeline quickly and handles edge cases behind the scenes.

422: Supporting Packages