MDX

Frontmatter

handle

{JSON.stringify(handle)}

{"title":"MDX","description":"Explaining what you can do with MDX"}

Component

export function MyCounter() {
  const [count, setCount] = useState(0);
  return (
    <button
      className="min-w-20 rounded-md bg-gray-900 p-2 text-gray-50 dark:bg-gray-50 dark:text-gray-900"
      onClick={() => {
        setCount((prev) => prev + 1);
      }}
    >
      count:{count}
    </button>
  );
}

MyCounter👉 <MyCounter />

MyCounter👉 count:0