These are all our blocks.

Babel

Babel

Use next generation JavaScript, today. Babel converts ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. CodePen's default Babel configuration adds JSX processing so you can easily write components for React, Preact and other JSX compatible libraries.

Docs GitHub Homepage

Matched Files

*.js *.jsx *.mjs *.cjs *.es *.es6 *.jst

Default Config 
{
  "compact": false,
  "comments": true,
  "highlightCode": false,
  "retainLines": true,
  "plugins": ["@babel/plugin-syntax-jsx", "@babel/plugin-transform-react-jsx"],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "defaults",
        "modules": false
      }
    ]
  ]
}
Dependencies 
"dependencies": {
    "@babel/core": "^7.28.3",
    "@babel/plugin-proposal-decorators": "^7.28.0",
    "@babel/plugin-syntax-jsx": "^7.27.1",
    "@babel/plugin-transform-react-constant-elements": "^7.27.1",
    "@babel/plugin-transform-react-display-name": "^7.28.0",
    "@babel/plugin-transform-react-jsx": "^7.27.1",
    "@babel/preset-env": "^7.28.3",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@codepen/blocks-util": "workspace:*"
}
HTMLHint

HTMLHint

Static code analysis tool for your HTML, warning you of any invalid syntax.

Docs Config Docs GitHub Homepage

Matched Files

*.html *.xhtml *.htm

Default Config 
{
  "alt-require": true,
  "attr-no-duplication": true,
  "attr-unsafe-chars": true,
  "attr-value-double-quotes": true,
  "id-unique": true,
  "space-tab-mixed-disabled": true,
  "spec-char-escape": true,
  "src-not-empty": true,
  "tag-pair": true,
  "tagname-lowercase": true
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@types/htmlhint": "^1.1.2",
    "htmlhint": "^1.6.3"
}
Less

Less

It's CSS, with just a little more. Add variables, mixins, functions and more to generate styles.

Docs GitHub Homepage

Matched Files

*.less

Default Config 
{}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@types/less": "^3.0.6",
    "less": "^4.4.1",
    "source-map": "^0.7.6"
}
Nunjucks

Nunjucks

A rich and powerful templating language for JavaScript.

Docs GitHub Homepage

Matched Files

*.njk

Default Config 
{}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "nunjucks": "^3.2.4"
}
Pug (Legacy)

Pug (Legacy)

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Docs Config Docs GitHub Homepage

Matched Files

*.pug

Default Config 
{ "compileDebug": false }
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "pug": "^2.0.3"
}
Stylelint

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Docs GitHub Homepage

Matched Files

*.css *.less *.scss *.sass

Default Config 
{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-less", "stylelint-scss"],
  "rules": {
    "at-rule-no-unknown": true,
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "declaration-block-no-duplicate-properties": true,
    "font-family-no-duplicate-names": true,
    "media-feature-name-no-unknown": true,
    "no-duplicate-selectors": true,
    "no-empty-source": false,
    "no-unknown-animations": true,
    "property-no-unknown": true,
    "scss/at-rule-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-no-unknown": true,
    "unit-no-unknown": true
  }
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "stylelint": "^16.23.1",
    "stylelint-config-standard": "^39.0.0",
    "stylelint-less": "^3.0.1",
    "stylelint-scss": "^6.12.1"
}
JS Beautify

JS Beautify

Beautify JavaScript, JSON, JSX, HTML, CSS, SCSS, and Sass.

Docs GitHub Homepage

Matched Files

*.cjs *.css *.es *.es6 *.htm *.html *.js *.json *.jst *.jsx *.mjs *.sass *.scss *.xhtml

Default Config 
{
  "brace_style": "collapse",
  "break_chained_methods": false,
  "comma_first": false,
  "e4x": false,
  "editorconfig": false,
  "end_with_newline": false,
  "eol": "\n",
  "eval_code": false,
  "indent_char": " ",
  "indent_empty_lines": false,
  "indent_inner_html": false,
  "indent_level": 0,
  "indent_scripts": "normal",
  "indent_size": 2,
  "indent_with_tabs": false,
  "jslint_happy": false,
  "keep_array_indentation": false,
  "max_preserve_newlines": 1,
  "operator_position": "before-newline",
  "preserve_newlines": true,
  "space_after_anon_function": false,
  "space_after_named_function": false,
  "space_before_conditional": true,
  "space_in_empty_paren": false,
  "space_in_paren": false,
  "templating": [
    "auto"
  ],
  "unescape_strings": false,
  "unindent_chained_methods": false,
  "wrap_line_length": 0
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@types/js-beautify": "^1.13.3",
    "js-beautify": "^1.15.4"
}
Markdown

Markdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Guide Config Docs Homepage Reference

Matched Files

*.md *.markdown

Default Config 
{
  "html": true,
  "breaks": true,
  "linkify": true,
  "typographer": true,
  "langPrefix": ""
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@types/markdown-it": "^14.1.2",
    "markdown-it": "^14.1.0"
}
Stylus

Stylus

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Docs GitHub Homepage

Matched Files

*.styl

Default Config 
{}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "jeet": "^7.2.0",
    "nib": "^1.2.0",
    "stylus": "^0.64.0"
}
Tailwind

Tailwind

A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. The Tailwind block will be automatically added if this line is found in a CSS file: @import "tailwindcss";. That is also the file where the compiled code will be placed.

Docs GitHub Homepage

Matched Files

*.css

Default Config 
{}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@tailwindcss/postcss": "^4.1.12",
    "postcss": "^8.5.6",
    "tailwindcss": "4.1.12"
}
Fingerprint

Fingerprint

CodePen creates unique file names (your file name with unique fingerprint characters within it) for your static assets, like images, CSS, and JavaScript, so that they can be served with strong caching headers. This is good for performance! This Block runs automatically when the compiler sees static files linked to that it can help with.

Docs

Matched Files

*.*

Default Config
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*"
}
Classic

Classic

Classic approach to CodePen where *.pen.html files get automatically wrapped in a complete HTML document that includes the style, script, and other necessary elements. Note that this works for the other HTML Blocks as well: *.pen.md, *.pen.njk, and *.pen.pug.

Docs

Matched Files

*.pen.html

Default Config 
{
  "head": "",
  "htmlClasses": "",
  "scripts": ["/script.js"],
  "styles": ["/style.css"]
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*"
}
JSHint

JSHint

JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.

Docs GitHub Homepage

Matched Files

*.js *.jsx *.mjs *.cjs *.es *.es6 *.jst

Default Config 
{
  "esversion": 11
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@types/jshint": "^2.12.1",
    "jshint": "^2.13.6"
}
Sass

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. Generate styles using variables, nesting, loops, mix-ins and more. Available in two syntaxes:, depending on your writing style. The SCSS syntax (.scss) is a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (.sass) uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them.

Docs Config Docs GitHub Homepage

Matched Files

*.sass *.scss

Default Config 
{
  "verbose": true
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "sass": "1.90.0"
}
Pug

Pug

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Docs Config Docs GitHub Homepage

Matched Files

*.pug

Default Config 
{}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "pug": "^3.0.3"
}
Packages

Packages

This block adds imported libraries to your Pen's package.json and import maps.

Docs

Matched Files

*.*

Default Config
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*"
}
PostCSS

PostCSS

PostCSS is a tool for transforming styles with JavaScript plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS Plugin Whitelist
Adding a PostCSS Plugin

To use a PostCSS plugin, you add the plugin name to the postcss.config.json file.

{"plugins": ["postcss-simple-vars", ... ]}

Docs GitHub Homepage

Matched Files

*.css

Default Config 
{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        }
      }
    ]
  ]
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "autoprefixer": "10.4.21",
    "lost": "^9.0.2",
    "postcss": "^8.5.6",
    "postcss-apply": "^0.12.0",
    "postcss-color-function": "^4.1.0",
    "postcss-conditionals": "^3.0.0-beta.0",
    "postcss-custom-media": "^11.0.6",
    "postcss-custom-selectors": "^8.0.5",
    "postcss-discard-comments": "^7.0.4",
    "postcss-each": "^1.1.0",
    "postcss-extend": "^1.0.5",
    "postcss-flexbox": "^1.0.3",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-for": "^2.1.1",
    "postcss-media-minmax": "^5.0.0",
    "postcss-mixins": "^12.1.2",
    "postcss-nested": "^7.0.2",
    "postcss-nested-ancestors": "^3.0.0",
    "postcss-preset-env": "^10.2.4",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-reverse-media": "^0.1.2",
    "postcss-simple-vars": "^7.0.1",
    "postcss-transform-shortcut": "^2.0.1",
    "postcss-triangle": "^2.0.0",
    "postcss-utilities": "^0.8.4"
}
Prettier

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with configurable rules.

Docs GitHub Homepage

Matched Files

*.cjs *.css *.es *.es6 *.flow *.gql *.graphql *.handlebars *.hbs *.htm *.html *.js *.json *.jst *.jsx *.less *.markdown *.md *.mdx *.mjs *.pug *.sass *.scss *.ts *.tsx *.vue *.xhtml *.yaml *.yml

Default Config 
{
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "jsxBracketSameLine": false,
  "proseWrap": "preserve",
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@prettier/plugin-pug": "^3.0.0",
    "prettier": "^3.2.5"
}
Sass (Legacy)

Sass (Legacy)

This version of Sass is locked at 1.34.0 where the old version of CodePen left off, so that all existing Sass Pens work as they did then.

Docs Config Docs GitHub Homepage

Matched Files

*.sass *.scss

Default Config 
{
  "verbose": true
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "bourbon": "npm:bourbon@4",
    "bourbon-5": "npm:bourbon@5",
    "bourbon-7": "npm:bourbon@7",
    "bourbon-neat": "npm:bourbon-neat@2",
    "bourbon-neat-4": "npm:bourbon-neat@4",
    "breakpoint-sass": "^2.7.1",
    "modularscale-sass": "npm:modularscale-sass@2",
    "modularscale-sass-3": "npm:modularscale-sass@3",
    "sass": "1.34.0",
    "susy": "npm:susy@2",
    "susy-3": "npm:susy@3"
}
TypeScript

TypeScript

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Docs GitHub Homepage

Matched Files

*.ts *.tsx *.mts *.cts

Default Config 
{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": false,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "ESNext",
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "strict": true,
    "target": "ESNext"
  }
}
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "typescript": "^5.9.2"
}
Validate

Validate

This Block performs validations such as checking Block configuration against their respective JSON schemas, checking for invalid protocols like http links, and missing script attributes like type=module.

Docs

Matched Files

*.*

Default Config
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*"
}
Vue 2 (Vite)

Vue 2 (Vite)

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. This Block uses Vite to compile templates and styles for .vue files in the classic Vue 2 syntax.

Docs GitHub Homepage

Matched Files

*.vue

Default Config 
import vue from '@vitejs/plugin-vue2';
import { readdirSync } from 'node:fs';
import { defineConfig } from 'vite';

// Build an array of entry point files. https://rollupjs.org/configuration-options/#input
const input = readdirSync(process.cwd(), { recursive: true })
  .filter((file) => file.endsWith('.html'))
  .map((file) => `./${file}`);

if (input.length === 0) {
  throw new Error('No entry point files found.');
}

export default defineConfig({
  plugins: [vue()],

  build: {
    rollupOptions: { input },
    target: 'esnext'
  },

  resolve: {
    alias: {
      '@': import.meta.dirname
    }
  }
});
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@rollup/plugin-node-resolve": "^16.0.1",
    "@vitejs/plugin-vue2": "^2.3.3",
    "esbuild": "0.25.9",
    "vite": "^5.4.19",
    "vue": "^2.7.16"
}
Vue 3 (Vite)

Vue 3 (Vite)

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. This version uses Vite to compile templates and styles in .vue files.

Docs GitHub Homepage

Matched Files

*.vue

Default Config 
import vue from '@vitejs/plugin-vue';
import { readdirSync } from 'node:fs';
import { defineConfig } from 'vite';

// Build an array of entry point files. https://rollupjs.org/configuration-options/#input
const input = readdirSync(process.cwd(), { recursive: true })
  .filter((file) => file.endsWith('.html'))
  .map((file) => `./${file}`);

if (input.length === 0) {
  throw new Error('No entry point files found.');
}

export default defineConfig({
  plugins: [vue()],

  build: {
    rollupOptions: { input },
    target: 'esnext'
  },

  resolve: {
    alias: {
      '@': import.meta.dirname
    }
  }
});
Dependencies 
"dependencies": {
    "@codepen/blocks-util": "workspace:*",
    "@rollup/plugin-node-resolve": "^16.0.1",
    "@vitejs/plugin-vue": "^6.0.1",
    "esbuild": "0.25.9",
    "vite": "^5.4.19",
    "vue": "^3.5.18"
}