How Blocks Work on CodePen

Blocks, on CodePen, are code processors. For example:

• 

  The Vue 3/Vite Block processes your .vue files and bundles your assets for you. (See Example)

• 

  The Babel Block processes your .js files with plugins. Your .jsx files will use The Babel Block to become JavaScript and .tsx files will worth together with the TypeScript block to do that as well. (See Example)

• 

  The Sass Block processes your .scss into .css for you. (See Example)

You can combine as many Blocks as you like, and you never have to worry about how to configure them together, CodePen handles that for you. Stack 'em up! ¹

Blocks can also tell you what's wrong with your code. For example, the TypeScript block can let you know if anything is wrong with your types.

Thanks, TypeScript Block!

There is one more little trick you might find helpful with Blocks. It's called Inline Block Processing. Give this a try in an .html file

<p>Here's 5 divs:</p>
<div lang="pug">
- for (let i = 0; i < 5; i++)
  div
</div>

You can be writing regular ol' HTML, then bust into a nother language like Pug or Markdown right in the middle of it. Similarly, you can write something like <style lang="scss"> to write SCSS or <script lang="ts"> to write TypeScript as inline blocks.