🧪 Bye CodeSandbox, hello react-live

Quick one! The CodeSandbox embeds in a few of my articles started throwing Failed to execute 'importScripts' network errors, so instead of a demo you got a broken box, and since it was CodeSandbox's own servers failing there wasn't much I could do about it. react-live to the rescue!

What is it?

• An open source library that takes a string of React code and renders it live on the page
• It runs the code right there in your browser, so there's no server sitting in the middle
• The editor is just the code with colours on, and you can type straight into it

It looks so slick now! Check it out below 😄

TSX
1import { useState } from 'react';
2import './styles.css';
3
4export default function App() {
5  const [ollies, setOllies] = useState(0);
6  const [inTheAir, setInTheAir] = useState(false);
7
8  const ollie = () => {
9    if (inTheAir) return;
10    setInTheAir(true);
11    setOllies((count) => count + 1);
12  };
13
14  return (
15    <div className="park">
16      <span
17        className={inTheAir ? 'board pop' : 'board'}
18        onAnimationEnd={() => setInTheAir(false)}
19        aria-hidden="true"
20      >
21        <span className="level">🛹</span>
22      </span>
23      <div className="ground" />
24      <button onClick={ollie}>Ollie!</button>
25      <p>Ollies landed: {ollies}</p>
26    </div>
27  );
28}

The benefits

• Slicker than an iframe 🔥 it matches the rest of my site, with no CodeSandbox branding, double scrollbars or a whole second app loading inside the page
• Faster, it only loads when you scroll near it
• More accessible, with proper tabs and labels
• Runs on my own site, no third party

These articles are using it now:

• Building 'Simple' React Games
• React Component Composition

Peace! ✌️