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:

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?