diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
index fdc692f93ec4..8cc186f2d594 100644
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@@ -7,6 +7,18 @@
   "sideEffects": [
     "lib/theme/Playground/*"
   ],
+  "exports": {
+    "./lib/*": "./lib/*",
+    "./src/*": "./src/*",
+    "./client": {
+      "type": "./lib/client/index.d.ts",
+      "default": "./lib/client/index.js"
+    },
+    ".": {
+      "types": "./src/theme-live-codeblock.d.ts",
+      "default": "./lib/index.js"
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/docusaurus-theme-live-codeblock/src/client/context.tsx b/packages/docusaurus-theme-live-codeblock/src/client/context.tsx
new file mode 100644
index 000000000000..25ddfa123371
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/client/context.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {createContext, useContext, type ReactNode} from 'react';
+
+type PlaygroundContextValue = {
+  reset: () => void;
+};
+
+const PlaygroundContext = createContext<PlaygroundContextValue | null>(null);
+
+export function PlaygroundProvider({
+  value,
+  children,
+}: {
+  value: PlaygroundContextValue;
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <PlaygroundContext.Provider value={value}>
+      {children}
+    </PlaygroundContext.Provider>
+  );
+}
+
+export function usePlayground(): PlaygroundContextValue {
+  const context = useContext(PlaygroundContext);
+  if (!context) {
+    throw new Error('usePlayground must be used within PlaygroundProvider');
+  }
+  return context;
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/client/index.ts b/packages/docusaurus-theme-live-codeblock/src/client/index.ts
new file mode 100644
index 000000000000..29a46c681b7c
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/client/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {usePlayground, PlaygroundProvider} from './context';
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
index 3e6c8e971cd2..550623f1fa31 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -9,17 +9,24 @@
 /// <reference types="@docusaurus/module-type-aliases" />
 
 declare module '@docusaurus/theme-live-codeblock' {
+  import type {PlaygroundPosition} from '@theme/Playground';
+
   export type ThemeConfig = {
     liveCodeBlock: {
-      playgroundPosition: 'top' | 'bottom';
+      playgroundPosition: PlaygroundPosition;
     };
   };
 }
 
 declare module '@theme/LiveCodeBlock' {
+  import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
 
-  export interface Props extends BaseProps {}
+  type CodeBlockProps = Omit<BaseProps, 'children'>;
+
+  export interface Props extends CodeBlockProps {
+    children?: string;
+  }
 
   export default function LiveCodeBlock(props: Props): ReactNode;
 }
@@ -29,14 +36,21 @@ declare module '@theme/Playground' {
   import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProvider} from 'react-live';
 
-  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+  type CodeBlockProps = Omit<
+    BaseProps,
+    'children' | 'className' | 'language' | 'title'
+  >;
   type LiveProviderProps = React.ComponentProps<typeof LiveProvider>;
 
+  export type PlaygroundPosition = 'top' | 'bottom';
+
   export interface Props extends CodeBlockProps, LiveProviderProps {
     // Allow empty live playgrounds
     children?: string;
+    position?: PlaygroundPosition;
   }
-  export default function Playground(props: LiveProviderProps): ReactNode;
+
+  export default function Playground(props: Props): ReactNode;
 }
 
 declare module '@theme/Playground/Provider' {
@@ -48,6 +62,13 @@ declare module '@theme/Playground/Provider' {
     children: ReactNode;
   }
 
+  export interface ResetContextValue {
+    resetKey: number;
+    reset: () => void;
+  }
+
+  export const PlaygroundResetContext: React.Context<ResetContextValue | null>;
+  export function usePlaygroundReset(): ResetContextValue;
   export default function PlaygroundProvider(props: Props): ReactNode;
 }
 
@@ -63,9 +84,11 @@ declare module '@theme/Playground/Container' {
 
 declare module '@theme/Playground/Layout' {
   import type {ReactNode} from 'react';
+  import type {PlaygroundPosition} from '@theme/Playground';
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Props {}
+  export interface Props {
+    position?: PlaygroundPosition;
+  }
 
   export default function PlaygroundLayout(props: Props): ReactNode;
 }
@@ -91,12 +114,24 @@ declare module '@theme/Playground/Editor' {
 declare module '@theme/Playground/Header' {
   import type {ReactNode} from 'react';
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Props {}
+  export interface Props {
+    children: ReactNode;
+    buttons?: ReactNode;
+  }
 
   export default function PlaygroundHeader(props: Props): ReactNode;
 }
 
+declare module '@theme/Playground/Buttons/ResetButton' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    className?: string;
+  }
+
+  export default function ResetButton(props: Props): ReactNode;
+}
+
 declare module '@theme/ReactLiveScope' {
   type Scope = {
     [key: string]: unknown;
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
index a7290ad7682b..00d1a22adad2 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
@@ -19,8 +19,14 @@ declare module '@theme/CodeBlock' {
   }
 }
 
-function isLiveCodeBlock(props: CodeBlockProps): boolean {
-  return !!props.live;
+function isLiveCodeBlock(
+  props: CodeBlockProps,
+): props is {live: true; children: string | undefined} {
+  return (
+    !!props.live &&
+    (typeof props.children === 'undefined' ||
+      typeof props.children === 'string')
+  );
 }
 
 export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode {
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/index.tsx
new file mode 100644
index 000000000000..63157570b3f3
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/index.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import {usePlayground} from '@docusaurus/theme-live-codeblock/client';
+import type {Props} from '@theme/Playground/Buttons/ResetButton';
+import styles from './styles.module.css';
+
+function Icon() {
+  return (
+    <svg
+      className={styles.resetButtonIcon}
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+    </svg>
+  );
+}
+
+function Label() {
+  return (
+    <Translate
+      id="theme.Playground.buttons.reset"
+      description="The reset button label for live code blocks">
+      Reset
+    </Translate>
+  );
+}
+
+export default function ResetButton({className}: Props): ReactNode {
+  const {reset} = usePlayground();
+  return (
+    <button
+      type="button"
+      aria-label="Reset code to original"
+      title="Reset"
+      className={clsx('clean-btn', className, styles.resetButton)}
+      onClick={() => reset()}>
+      <Icon />
+      <Label />
+    </button>
+  );
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/styles.module.css
new file mode 100644
index 000000000000..2ae1008717cd
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/styles.module.css
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.resetButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-button-background-color);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+  transition: all var(--ifm-transition-fast);
+}
+
+.resetButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+.resetButton:active {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.resetButtonIcon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
index e807f857067f..03ba4e1176a1 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
@@ -10,14 +10,14 @@ import {LiveEditor} from 'react-live';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import Translate from '@docusaurus/Translate';
 import PlaygroundHeader from '@theme/Playground/Header';
-
+import ResetButton from '@theme/Playground/Buttons/ResetButton';
 import styles from './styles.module.css';
 
 export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
   return (
     <>
-      <PlaygroundHeader>
+      <PlaygroundHeader buttons={<ResetButton />}>
         <Translate
           id="theme.Playground.liveEditor"
           description="The live editor label of the live codeblocks">
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/index.tsx
index 5d1e4d249968..32d748cd97a0 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/index.tsx
@@ -7,13 +7,20 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import type {Props} from '@theme/Playground/Header';
 
 import styles from './styles.module.css';
 
 export default function PlaygroundHeader({
   children,
-}: {
-  children: ReactNode;
-}): ReactNode {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+  buttons,
+}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.playgroundHeader)}>
+      <div className={styles.playgroundHeaderContent}>{children}</div>
+      {buttons && (
+        <div className={styles.playgroundHeaderButtons}>{buttons}</div>
+      )}
+    </div>
+  );
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/styles.module.css
index 39214d88e9b5..5898fa07663b 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Header/styles.module.css
@@ -6,6 +6,9 @@
  */
 
 .playgroundHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   letter-spacing: 0.08rem;
   padding: 0.75rem;
   text-transform: uppercase;
@@ -15,7 +18,12 @@
   font-size: var(--ifm-code-font-size);
 }
 
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-700);
-  color: var(--ifm-color-content-inverse);
+.playgroundHeaderContent {
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 0.875rem;
+}
+
+.playgroundHeaderButtons {
+  display: flex;
+  gap: 0.5rem;
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Layout/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Layout/index.tsx
index 63b209ace8a4..9799f45e3fe9 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Layout/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Layout/index.tsx
@@ -9,6 +9,7 @@ import React, {type ReactNode} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import PlaygroundPreview from '@theme/Playground/Preview';
 import PlaygroundEditor from '@theme/Playground/Editor';
+import type {Props} from '@theme/Playground/Layout';
 
 import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
@@ -17,11 +18,12 @@ function useLiveCodeBlockThemeConfig() {
   return themeConfig.liveCodeBlock;
 }
 
-export default function PlaygroundLayout(): ReactNode {
-  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+export default function PlaygroundLayout(props: Props): ReactNode {
+  const themeConfig = useLiveCodeBlockThemeConfig();
+  const position = props.position ?? themeConfig.playgroundPosition;
   return (
     <>
-      {playgroundPosition === 'top' ? (
+      {position === 'top' ? (
         <>
           <PlaygroundPreview />
           <PlaygroundEditor />
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Provider/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Provider/index.tsx
index 6664b59d2334..7bc37c3308c2 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Provider/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Provider/index.tsx
@@ -5,21 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type ReactNode, useCallback, useMemo, useState} from 'react';
 import {LiveProvider} from 'react-live';
+import {PlaygroundProvider as PlaygroundProviderComponent} from '@docusaurus/theme-live-codeblock/client';
 import {usePrismTheme} from '@docusaurus/theme-common';
-
 import type {Props} from '@theme/Playground/Provider';
 
 // this should rather be a stable function
 // see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
 const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
 
-export default function PlaygroundProvider({
-  code,
-  children,
-  ...props
-}: Props): ReactNode {
+function LiveProviderComponent({code, children, ...props}: Props): ReactNode {
   const prismTheme = usePrismTheme();
   const noInline = props.metastring?.includes('noInline') ?? false;
   return (
@@ -33,3 +29,15 @@ export default function PlaygroundProvider({
     </LiveProvider>
   );
 }
+
+export default function PlaygroundProvider(props: Props): ReactNode {
+  const [resetKey, setResetKey] = useState(0);
+  const reset = useCallback(() => setResetKey((prev) => prev + 1), []);
+  const value = useMemo(() => ({reset}), [reset]);
+
+  return (
+    <PlaygroundProviderComponent key={resetKey} value={value}>
+      <LiveProviderComponent {...props} />
+    </PlaygroundProviderComponent>
+  );
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 61463314d4dc..c7cdc8824c32 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -15,12 +15,13 @@ import type {Props} from '@theme/Playground';
 export default function Playground({
   children,
   transformCode,
+  position,
   ...props
 }: Props): ReactNode {
   return (
     <PlaygroundContainer>
       <PlaygroundProvider code={children} {...props}>
-        <PlaygroundLayout />
+        <PlaygroundLayout position={position} />
       </PlaygroundProvider>
     </PlaygroundContainer>
   );
diff --git a/packages/docusaurus-theme-live-codeblock/tsconfig.client.json b/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
index 03497a2dfad6..825ce67878a0 100644
--- a/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
+++ b/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.base.client.json",
-  "include": ["src/theme", "src/*.d.ts", "src/custom-buble.ts"],
+  "include": ["src/theme", "src/client", "src/*.d.ts", "src/custom-buble.ts"],
   "exclude": ["**/__tests__/**"]
 }
diff --git a/packages/docusaurus-theme-live-codeblock/tsconfig.json b/packages/docusaurus-theme-live-codeblock/tsconfig.json
index d7d211e4c0de..e9710fa5b856 100644
--- a/packages/docusaurus-theme-live-codeblock/tsconfig.json
+++ b/packages/docusaurus-theme-live-codeblock/tsconfig.json
@@ -5,5 +5,10 @@
     "noEmit": false
   },
   "include": ["src"],
-  "exclude": ["src/custom-buble.ts", "src/theme", "**/__tests__/**"]
+  "exclude": [
+    "src/custom-buble.ts",
+    "src/theme",
+    "src/client",
+    "**/__tests__/**"
+  ]
 }
diff --git a/packages/docusaurus-theme-translations/locales/ar/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/ar/theme-live-codeblock.json
index a63dcf38ac77..d431f23b2132 100644
--- a/packages/docusaurus-theme-translations/locales/ar/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/ar/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "مُحـرر مُبـاشر",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "النتيجة"
 }
diff --git a/packages/docusaurus-theme-translations/locales/base/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/base/theme-live-codeblock.json
index c441cd3e1d2c..c239640f0a41 100644
--- a/packages/docusaurus-theme-translations/locales/base/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/base/theme-live-codeblock.json
@@ -1,6 +1,8 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
   "theme.Playground.liveEditor___DESCRIPTION": "The live editor label of the live codeblocks",
+  "theme.Playground.buttons.reset": "Reset",
+  "theme.Playground.buttons.reset___DESCRIPTION": "The reset button label for live code blocks",
   "theme.Playground.result": "Result",
   "theme.Playground.result___DESCRIPTION": "The result label of the live codeblocks"
 }
diff --git a/packages/docusaurus-theme-translations/locales/bg/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/bg/theme-live-codeblock.json
index 4f4a503fe0e4..eb3bac886e11 100644
--- a/packages/docusaurus-theme-translations/locales/bg/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/bg/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Result"
 }
diff --git a/packages/docusaurus-theme-translations/locales/bn/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/bn/theme-live-codeblock.json
index 494dfb7199d8..e9c5e1c10d1c 100644
--- a/packages/docusaurus-theme-translations/locales/bn/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/bn/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "লাইভ এডিটর",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "ফলাফল"
 }
diff --git a/packages/docusaurus-theme-translations/locales/cs/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/cs/theme-live-codeblock.json
index c39266697a9a..61372e9dad07 100644
--- a/packages/docusaurus-theme-translations/locales/cs/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/cs/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Výsledek"
 }
diff --git a/packages/docusaurus-theme-translations/locales/da/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/da/theme-live-codeblock.json
index 44b092222c65..353c8b5e0fd2 100644
--- a/packages/docusaurus-theme-translations/locales/da/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/da/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/de/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/de/theme-live-codeblock.json
index 2b888e17d330..9a8dc04513a0 100644
--- a/packages/docusaurus-theme-translations/locales/de/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/de/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Ergebnisse"
 }
diff --git a/packages/docusaurus-theme-translations/locales/es/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/es/theme-live-codeblock.json
index b676360a4722..c3475c655cfc 100644
--- a/packages/docusaurus-theme-translations/locales/es/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/es/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor en vivo",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultado"
 }
diff --git a/packages/docusaurus-theme-translations/locales/et/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/et/theme-live-codeblock.json
index 3126ab250fe7..942271905aa4 100644
--- a/packages/docusaurus-theme-translations/locales/et/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/et/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Redaktor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Tulemus"
 }
diff --git a/packages/docusaurus-theme-translations/locales/fa/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/fa/theme-live-codeblock.json
index b13c7da77f2f..6b8da9dbeef7 100644
--- a/packages/docusaurus-theme-translations/locales/fa/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/fa/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "ویرایشگر زنده",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "خروجی"
 }
diff --git a/packages/docusaurus-theme-translations/locales/fil/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/fil/theme-live-codeblock.json
index a5682c688881..f2bbc1ba892c 100644
--- a/packages/docusaurus-theme-translations/locales/fil/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/fil/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live na Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resulta"
 }
diff --git a/packages/docusaurus-theme-translations/locales/fr/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/fr/theme-live-codeblock.json
index d9b50676f5e5..ffaaab099a00 100644
--- a/packages/docusaurus-theme-translations/locales/fr/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/fr/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Éditeur en direct",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Résultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/he/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/he/theme-live-codeblock.json
index 14c9a96ddca8..f78f27fbe8ba 100644
--- a/packages/docusaurus-theme-translations/locales/he/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/he/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "תוצאה"
 }
diff --git a/packages/docusaurus-theme-translations/locales/hi/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/hi/theme-live-codeblock.json
index 3f90304a1665..ec2d72565b82 100644
--- a/packages/docusaurus-theme-translations/locales/hi/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/hi/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "लाइव एडिटर",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "परिणाम"
 }
diff --git a/packages/docusaurus-theme-translations/locales/hu/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/hu/theme-live-codeblock.json
index 221baebd3867..f44559587330 100644
--- a/packages/docusaurus-theme-translations/locales/hu/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/hu/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Interaktív szerkesztő",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Eredmény"
 }
diff --git a/packages/docusaurus-theme-translations/locales/id/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/id/theme-live-codeblock.json
index 122a23b015a8..de8e2a5b6293 100644
--- a/packages/docusaurus-theme-translations/locales/id/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/id/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Penyunting Langung",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Hasil"
 }
diff --git a/packages/docusaurus-theme-translations/locales/is/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/is/theme-live-codeblock.json
index 0d468d7562b6..ae081a58c8c3 100644
--- a/packages/docusaurus-theme-translations/locales/is/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/is/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Lifandi Ritill",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Niðurstaða"
 }
diff --git a/packages/docusaurus-theme-translations/locales/it/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/it/theme-live-codeblock.json
index 84236e9c6f07..3b7040b25559 100644
--- a/packages/docusaurus-theme-translations/locales/it/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/it/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor dal vivo",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Risultato"
 }
diff --git a/packages/docusaurus-theme-translations/locales/ja/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/ja/theme-live-codeblock.json
index 76a431d0c602..212c4fe48ef1 100644
--- a/packages/docusaurus-theme-translations/locales/ja/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/ja/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "ライブエディター",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "結果"
 }
diff --git a/packages/docusaurus-theme-translations/locales/ko/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/ko/theme-live-codeblock.json
index 1111a00dd4bf..4fd19639fb30 100644
--- a/packages/docusaurus-theme-translations/locales/ko/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/ko/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "라이브 에디터",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "결과"
 }
diff --git a/packages/docusaurus-theme-translations/locales/nb/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/nb/theme-live-codeblock.json
index f8e1c7034239..51f860ce6287 100644
--- a/packages/docusaurus-theme-translations/locales/nb/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/nb/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/nl/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/nl/theme-live-codeblock.json
index 31a4850d00c0..c411f8cc7ac2 100644
--- a/packages/docusaurus-theme-translations/locales/nl/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/nl/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live bewerken",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultaat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/pl/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/pl/theme-live-codeblock.json
index 889e7e027f8d..56cabe42bf7c 100644
--- a/packages/docusaurus-theme-translations/locales/pl/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/pl/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Edytor live",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Rezultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/pt-BR/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/pt-BR/theme-live-codeblock.json
index a54f8c268b53..5154c19c24b9 100644
--- a/packages/docusaurus-theme-translations/locales/pt-BR/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/pt-BR/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor em tempo real",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultado"
 }
diff --git a/packages/docusaurus-theme-translations/locales/pt-PT/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/pt-PT/theme-live-codeblock.json
index a54f8c268b53..5154c19c24b9 100644
--- a/packages/docusaurus-theme-translations/locales/pt-PT/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/pt-PT/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor em tempo real",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultado"
 }
diff --git a/packages/docusaurus-theme-translations/locales/ru/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/ru/theme-live-codeblock.json
index 36253bb83d6f..42fac3c23694 100644
--- a/packages/docusaurus-theme-translations/locales/ru/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/ru/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Интерактивный редактор",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Результат"
 }
diff --git a/packages/docusaurus-theme-translations/locales/sl/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/sl/theme-live-codeblock.json
index 5b56e53cbac0..956f319c97db 100644
--- a/packages/docusaurus-theme-translations/locales/sl/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/sl/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Urejanje kode v živo",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Rezultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/sr/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/sr/theme-live-codeblock.json
index f12b6476416e..077c8ba43d0d 100644
--- a/packages/docusaurus-theme-translations/locales/sr/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/sr/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Уређивач",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Резултат"
 }
diff --git a/packages/docusaurus-theme-translations/locales/sv/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/sv/theme-live-codeblock.json
index f8e1c7034239..51f860ce6287 100644
--- a/packages/docusaurus-theme-translations/locales/sv/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/sv/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Resultat"
 }
diff --git a/packages/docusaurus-theme-translations/locales/tk/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/tk/theme-live-codeblock.json
index 30a75c2ffb63..8c01ce116acc 100644
--- a/packages/docusaurus-theme-translations/locales/tk/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/tk/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Göni Redaktor",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Netije"
 }
diff --git a/packages/docusaurus-theme-translations/locales/tr/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/tr/theme-live-codeblock.json
index c8f5ee338919..a75f8c44d671 100644
--- a/packages/docusaurus-theme-translations/locales/tr/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/tr/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Canlı Düzenleyici",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Sonuç"
 }
diff --git a/packages/docusaurus-theme-translations/locales/uk/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/uk/theme-live-codeblock.json
index 8eafd4d4274b..e595c15a4b9e 100644
--- a/packages/docusaurus-theme-translations/locales/uk/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/uk/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Інтерактивний редактор",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Результат"
 }
diff --git a/packages/docusaurus-theme-translations/locales/ur/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/ur/theme-live-codeblock.json
index 07f998c9357d..211df747a4b0 100644
--- a/packages/docusaurus-theme-translations/locales/ur/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/ur/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "لائیو ایڈیٹر",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "نتیجہ"
 }
diff --git a/packages/docusaurus-theme-translations/locales/vi/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/vi/theme-live-codeblock.json
index ca314fb3fc10..a34fb7b495e1 100644
--- a/packages/docusaurus-theme-translations/locales/vi/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/vi/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Trình soạn thảo trực tuyến",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "Kết quả"
 }
diff --git a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-live-codeblock.json
index a0f8457b2230..f0830ac7c6cf 100644
--- a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "实时编辑器",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "结果"
 }
diff --git a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-live-codeblock.json b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-live-codeblock.json
index a20739c1cffd..9f4fd4cef12d 100644
--- a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-live-codeblock.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-live-codeblock.json
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "即時編輯器",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "結果"
 }
diff --git a/website/_dogfooding/_pages tests/index.mdx b/website/_dogfooding/_pages tests/index.mdx
index 8cf447fec7d0..1d63e6f4772c 100644
--- a/website/_dogfooding/_pages tests/index.mdx	
+++ b/website/_dogfooding/_pages tests/index.mdx	
@@ -43,4 +43,5 @@ import Readme from "../README.mdx"
 - [Embeds](/tests/pages/embeds)
 - [Style Isolation tests](/tests/pages/style-isolation)
 - [IdealImage tests](/tests/pages/ideal-image)
+- [Live Playground tests](/tests/pages/live-playground-tests)
 - [Linking tests](./linking/index.md)
diff --git a/website/_dogfooding/_pages tests/live-playground-tests.tsx b/website/_dogfooding/_pages tests/live-playground-tests.tsx
new file mode 100644
index 000000000000..a544bbe841dc
--- /dev/null
+++ b/website/_dogfooding/_pages tests/live-playground-tests.tsx	
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+import Playground from '@theme/Playground';
+
+const TestCode = `function Counter() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <div>
+      <div>Count: {count}</div>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}`;
+
+export default function LivePlaygroundTests(): JSX.Element {
+  return (
+    <Layout title="Test Reset Button">
+      <div style={{padding: '2rem'}}>
+        <Heading as="h1">Live Playground tests</Heading>
+
+        <Heading as="h2">Position bottom (default)</Heading>
+        <Playground position="bottom">{TestCode}</Playground>
+
+        <Heading as="h2">Position top</Heading>
+        <Playground position="top">{TestCode}</Playground>
+      </div>
+    </Layout>
+  );
+}
diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
index f55442b973bc..95c00a57b100 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -470,23 +470,15 @@ To use the plugin, create a code block with `live` attached to the language meta
 ```jsx live
 function Clock(props) {
   const [date, setDate] = useState(new Date());
-  useEffect(() => {
-    const timerID = setInterval(() => tick(), 1000);
-
-    return function cleanup() {
-      clearInterval(timerID);
-    };
-  });
 
-  function tick() {
-    setDate(new Date());
-  }
+  useEffect(() => {
+    const id = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
 
-  return (
-    <div>
-      <h2>It is {date.toLocaleTimeString()}.</h2>
-    </div>
-  );
+  return <h2>It is {date.toLocaleTimeString()}.</h2>;
 }
 ```
 ````
@@ -500,23 +492,15 @@ The code block will be rendered as an interactive editor. Changes to the code wi
 ```jsx live
 function Clock(props) {
   const [date, setDate] = useState(new Date());
-  useEffect(() => {
-    const timerID = setInterval(() => tick(), 1000);
-
-    return function cleanup() {
-      clearInterval(timerID);
-    };
-  });
 
-  function tick() {
-    setDate(new Date());
-  }
+  useEffect(() => {
+    const id = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
 
-  return (
-    <div>
-      <h2>It is {date.toLocaleTimeString()}.</h2>
-    </div>
-  );
+  return <h2>It is {date.toLocaleTimeString()}.</h2>;
 }
 ```
 
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index a2639973cadc..f81d1c5172eb 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -33,6 +33,9 @@ import type {Options as BlogOptions} from '@docusaurus/plugin-content-blog';
 import type {Options as PageOptions} from '@docusaurus/plugin-content-pages';
 import type {Options as IdealImageOptions} from '@docusaurus/plugin-ideal-image';
 import type {Options as ClientRedirectsOptions} from '@docusaurus/plugin-client-redirects';
+import type {ThemeConfig as LiveCodeBlockThemeConfig} from '@docusaurus/theme-live-codeblock';
+
+type ThemeConfig = Preset.ThemeConfig & LiveCodeBlockThemeConfig;
 
 const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
   0,
@@ -901,6 +904,6 @@ export default async function createConfigAsync() {
         },
         copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`,
       },
-    } satisfies Preset.ThemeConfig,
+    } satisfies ThemeConfig,
   } satisfies Config;
 }