Using JSX on CodePen

Jun 10, 2024

Credit where due, Chris Coyier himself made a 2 minute video about this: https://blog.codepen.io/2022/10/27/using-preact-on-codepen/

Here’s my speed run instructions:

In the JS tab, click the gear icon
Choose JavaScript Preprocessor: Babel

HTML:

<div></div>

CSS:

/* Nothing here! */

JS:

import { render, h } from "https://esm.sh/preact";
/** @jsx h */

var Card = () => {
  return (
    <h1 style={{ backgroundColor: "aqua" }}>Hello, World!</h1>
  );
};

render(<Card />,
      document.querySelector("div"));