Sandpack Integration - For an interactive blog

Here’s a demonstration of the live preview of a react code with the package framer-motion included:

import {useState} from "react";
import Test from "./Test";
import { AnimatePresence } from "framer-motion";


export default function MyPage(){
  const [show, setShow] = useState(false);
	return <AnimatePresence>
     {show && <Test />}
      <button onClick={() => setShow(!show)}>Show</button>
    </AnimatePresence>;
}

The above code is completely maintained on my notion blog. Here’s how it looks on my notion codeblock:

// special comment

// file: App.js

import {useState} from "react";
import Test from "./Test";
import { AnimatePresence } from "framer-motion";


export default function MyPage(){
  const [show, setShow] = useState(false);
	return <AnimatePresence>
     {show && <Test />}
      <button onClick={() => setShow(!show)}>Show</button>
    </AnimatePresence>;
}

// file: Test.js

import { motion, AnimatePresence } from "framer-motion";


export default function TestComponent() {
	return <motion.div layout initial={{opacity: 0, y: -20}} animate={{opacity: 1, y: 0}} exit={{opacity: 0, y: -20}}>Hello world</motion.div>;
}

Do you see the pattern? It’s actually really simple. I detect if the code is for live preview by a simple logic.

Look closely on that “special comment” comment on the top of the codeblock. If the codeblock starts with // editor then we render the live preview with sandpack. If not we just render the codeblock.

Quite interesting, right?

Arb.

Arb.

Sandpack Integration - For an interactive blog