Of course you can use Preact on CodePen! Here’s a two minute video that’ll show you exactly how:

Main points from the video:

  • You can copy and paste code you find around the web in docs, blog post, and REPL’s into CodePen, but the ESM import statements likely need to point to cloud-hosted and built libraries. CodePen will help suggest that for you.
  • Preact still uses JSX, so you gotta flip on Babel as a preprocessor.
  • Babel + JSX assumes React.createElement, but with a JSX directive (/** @jsx h */) we can tell it to use a different function instead.
  • We have to yank in that h function from Preact additionally.
  • A REPL might not expose the HTML for you, so just make sure whereever you are telling it to render is actually there (e.g. <div id="app"></div>).