From 953c98684d222d98d93b951805c7fb9bfec12347 Mon Sep 17 00:00:00 2001
From: Neel Bansal <neelbansalx@gmail.com>
Date: Mon, 19 Jan 2026 15:52:30 -0800
Subject: [PATCH 01/18] feat(theme-live-codeblock): add reset button to live
 code playground

Adds a reset button to live code playgrounds that restores edited code
to its original state. The button appears in the playground header
alongside the Live Editor label.

Closes #10711
---
 .../src/theme-live-codeblock.d.ts             | 19 ++++++-
 .../Playground/Buttons/ResetButton/index.tsx  | 41 +++++++++++++
 .../Buttons/ResetButton/styles.module.css     | 36 ++++++++++++
 .../src/theme/Playground/Editor/index.tsx     | 27 ++++-----
 .../src/theme/Playground/Header/index.tsx     | 21 ++++---
 .../theme/Playground/Header/styles.module.css | 24 ++++----
 .../src/theme/Playground/Preview/index.tsx    | 16 +++---
 .../src/theme/Playground/Provider/index.tsx   | 57 +++++++++++++++----
 .../_pages tests/live-playground-test.tsx     | 37 ++++++++++++
 9 files changed, 227 insertions(+), 51 deletions(-)
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/index.tsx
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/styles.module.css
 create mode 100644 website/_dogfooding/_pages tests/live-playground-test.tsx

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..0e5f762098ba 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
@@ -48,6 +48,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;
 }
 
@@ -91,8 +98,10 @@ 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 {
+    label: ReactNode;
+    buttons?: ReactNode;
+  }
 
   export default function PlaygroundHeader(props: Props): ReactNode;
 }
@@ -105,3 +114,9 @@ declare module '@theme/ReactLiveScope' {
   const ReactLiveScope: Scope;
   export default ReactLiveScope;
 }
+
+declare module '@theme/Playground/Buttons/ResetButton' {
+  import type {Props} from '@theme/Playground/Buttons/ResetButton';
+
+  export default function ResetButton(props: Props): JSX.Element;
+}
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..25c5006ca685
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Buttons/ResetButton/index.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import styles from './styles.module.css';
+
+interface Props {
+  className?: string;
+  onClick: () => void;
+}
+
+export default function ResetButton({className, onClick}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      aria-label="Reset code to original"
+      title="Reset"
+      className={clsx('clean-btn', className, styles.resetButton)}
+      onClick={onClick}>
+      <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>
+      <Translate
+        id="theme.Playground.resetButton"
+        description="The reset button label for live code blocks">
+        Reset
+      </Translate>
+    </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..cb808af60c55 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,26 +10,27 @@ 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 {usePlaygroundReset} from '@theme/Playground/Provider';
 import styles from './styles.module.css';
 
 export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
+  const {reset} = usePlaygroundReset();
+
   return (
     <>
-      <PlaygroundHeader>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </PlaygroundHeader>
-      <LiveEditor
-        // We force remount the editor on hydration,
-        // otherwise dark prism theme is not applied
-        key={String(isBrowser)}
-        className={styles.playgroundEditor}
+      <PlaygroundHeader
+        label={
+          <Translate
+            id="theme.Playground.liveEditor"
+            description="The live editor label of the live codeblocks">
+            Live Editor
+          </Translate>
+        }
+        buttons={<ResetButton onClick={reset} />}
       />
+      <LiveEditor key={String(isBrowser)} className={styles.playgroundEditor} />
     </>
   );
 }
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..da43e7f45675 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 styles from './styles.module.css';
 
-export default function PlaygroundHeader({
-  children,
-}: {
-  children: ReactNode;
-}): ReactNode {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+interface Props {
+  label: ReactNode;
+  buttons?: ReactNode;
+}
+
+export default function PlaygroundHeader({label, buttons}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.playgroundHeader)}>
+      <div className={styles.playgroundHeaderLabel}>{label}</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..1a5eb82964dc 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,16 +6,20 @@
  */
 
 .playgroundHeader {
-  letter-spacing: 0.08rem;
-  padding: 0.75rem;
-  text-transform: uppercase;
-  font-weight: bold;
-  background: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-content);
-  font-size: var(--ifm-code-font-size);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
 }
 
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-700);
-  color: var(--ifm-color-content-inverse);
+.playgroundHeaderLabel {
+  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/Preview/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
index b4f6e1ef887e..595f91e73068 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
@@ -44,13 +44,15 @@ function PlaygroundLivePreview(): ReactNode {
 export default function PlaygroundPreview(): ReactNode {
   return (
     <>
-      <PlaygroundHeader>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </PlaygroundHeader>
+      <PlaygroundHeader
+        label={
+          <Translate
+            id="theme.Playground.result"
+            description="The result label of the live codeblocks">
+            Result
+          </Translate>
+        }
+      />
       <div className={styles.playgroundPreview}>
         <PlaygroundLivePreview />
       </div>
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..f8b51aaff6fc 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,16 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import {LiveProvider} from 'react-live';
 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};`;
 
+interface ResetContextValue {
+  resetKey: number;
+  reset: () => void;
+}
+
+// eslint-disable-next-line import/no-named-export
+export const PlaygroundResetContext = createContext<ResetContextValue | null>(
+  null,
+);
+
+// eslint-disable-next-line import/no-named-export
+export function usePlaygroundReset(): ResetContextValue {
+  const context = useContext(PlaygroundResetContext);
+  if (!context) {
+    throw new Error(
+      'usePlaygroundReset must be used within PlaygroundProvider',
+    );
+  }
+  return context;
+}
+
 export default function PlaygroundProvider({
   code,
   children,
@@ -22,14 +46,23 @@ export default function PlaygroundProvider({
 }: Props): ReactNode {
   const prismTheme = usePrismTheme();
   const noInline = props.metastring?.includes('noInline') ?? false;
+  const [resetKey, setResetKey] = useState(0);
+
+  const reset = () => setResetKey((prev) => prev + 1);
+
+  const contextValue = useMemo(() => ({resetKey, reset}), [resetKey]);
+
   return (
-    <LiveProvider
-      noInline={noInline}
-      theme={prismTheme}
-      {...props}
-      code={code?.replace(/\n$/, '')}
-      transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
-      {children}
-    </LiveProvider>
+    <PlaygroundResetContext.Provider value={contextValue}>
+      <LiveProvider
+        key={resetKey}
+        noInline={noInline}
+        theme={prismTheme}
+        {...props}
+        code={code?.replace(/\n$/, '')}
+        transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
+        {children}
+      </LiveProvider>
+    </PlaygroundResetContext.Provider>
   );
 }
diff --git a/website/_dogfooding/_pages tests/live-playground-test.tsx b/website/_dogfooding/_pages tests/live-playground-test.tsx
new file mode 100644
index 000000000000..fd545fdfa778
--- /dev/null
+++ b/website/_dogfooding/_pages tests/live-playground-test.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';
+
+export default function LivePlaygroundTest(): JSX.Element {
+  return (
+    <Layout title="Test Reset Button">
+      <div style={{padding: '2rem'}}>
+        <Heading as="h1">Reset Button Feature</Heading>
+        <p>Edit the code below and use the Reset button to restore it!</p>
+
+        <Playground>
+          {`function Counter() {
+  const [count, setCount] = React.useState(0);
+  
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}`}
+        </Playground>
+      </div>
+    </Layout>
+  );
+}

From 730a52b7b8a18b49191a921c6a4b11a8141a866a Mon Sep 17 00:00:00 2001
From: Neel Bansal <neelbansalx@gmail.com>
Date: Fri, 23 Jan 2026 09:05:24 -0800
Subject: [PATCH 02/18] chore: update theme translations for reset button

---
 .../locales/ar/theme-live-codeblock.json                        | 1 +
 .../locales/base/theme-live-codeblock.json                      | 2 ++
 .../locales/bg/theme-live-codeblock.json                        | 1 +
 .../locales/bn/theme-live-codeblock.json                        | 1 +
 .../locales/cs/theme-live-codeblock.json                        | 1 +
 .../locales/da/theme-live-codeblock.json                        | 1 +
 .../locales/de/theme-live-codeblock.json                        | 1 +
 .../locales/es/theme-live-codeblock.json                        | 1 +
 .../locales/et/theme-live-codeblock.json                        | 1 +
 .../locales/fa/theme-live-codeblock.json                        | 1 +
 .../locales/fil/theme-live-codeblock.json                       | 1 +
 .../locales/fr/theme-live-codeblock.json                        | 1 +
 .../locales/he/theme-live-codeblock.json                        | 1 +
 .../locales/hi/theme-live-codeblock.json                        | 1 +
 .../locales/hu/theme-live-codeblock.json                        | 1 +
 .../locales/id/theme-live-codeblock.json                        | 1 +
 .../locales/is/theme-live-codeblock.json                        | 1 +
 .../locales/it/theme-live-codeblock.json                        | 1 +
 .../locales/ja/theme-live-codeblock.json                        | 1 +
 .../locales/ko/theme-live-codeblock.json                        | 1 +
 .../locales/nb/theme-live-codeblock.json                        | 1 +
 .../locales/nl/theme-live-codeblock.json                        | 1 +
 .../locales/pl/theme-live-codeblock.json                        | 1 +
 .../locales/pt-BR/theme-live-codeblock.json                     | 1 +
 .../locales/pt-PT/theme-live-codeblock.json                     | 1 +
 .../locales/ru/theme-live-codeblock.json                        | 1 +
 .../locales/sl/theme-live-codeblock.json                        | 1 +
 .../locales/sr/theme-live-codeblock.json                        | 1 +
 .../locales/sv/theme-live-codeblock.json                        | 1 +
 .../locales/tk/theme-live-codeblock.json                        | 1 +
 .../locales/tr/theme-live-codeblock.json                        | 1 +
 .../locales/uk/theme-live-codeblock.json                        | 1 +
 .../locales/ur/theme-live-codeblock.json                        | 1 +
 .../locales/vi/theme-live-codeblock.json                        | 1 +
 .../locales/zh-Hans/theme-live-codeblock.json                   | 1 +
 .../locales/zh-Hant/theme-live-codeblock.json                   | 1 +
 36 files changed, 37 insertions(+)

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..6dd4277d249a 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.resetButton": "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..6aa491030e87 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.resetButton": "Reset",
+  "theme.Playground.resetButton___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..f9cc6c506775 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.resetButton": "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..52532bb6878c 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.resetButton": "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..85e0af07661a 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.resetButton": "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..dda34da9be87 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.resetButton": "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..0f0a34a9dae4 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.resetButton": "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..bd5b62c2a263 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.resetButton": "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..e97d61354101 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.resetButton": "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..eae72bf3a396 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.resetButton": "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..c9e9b1698412 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.resetButton": "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..dd7c6134851e 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.resetButton": "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..ecdc22d7a5d2 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.resetButton": "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..12636af7c6ad 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.resetButton": "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..af358a2cb3e8 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.resetButton": "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..f06aaefe2973 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.resetButton": "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..c543d45d5fb0 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.resetButton": "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..482107541bf0 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.resetButton": "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..e13614016acc 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.resetButton": "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..bd7eaf251122 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.resetButton": "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..42ccc319e704 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.resetButton": "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..55b725f30656 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.resetButton": "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..f487d887e698 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.resetButton": "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..a78e472bb486 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.resetButton": "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..a78e472bb486 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.resetButton": "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..11273933905c 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.resetButton": "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..4e272ec0b317 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.resetButton": "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..c146a9921daa 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.resetButton": "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..42ccc319e704 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.resetButton": "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..9556a85f416a 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.resetButton": "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..377feaab8d19 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.resetButton": "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..925b2e6c7bf1 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.resetButton": "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..c170f0fb73d9 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.resetButton": "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..c3e2efa274e9 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.resetButton": "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..12ef7477a037 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.resetButton": "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..19fab66faa67 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.resetButton": "Reset",
   "theme.Playground.result": "結果"
 }

From 3be0df878159fb053f5dfba63decd54dc8e479b0 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 15:24:02 +0100
Subject: [PATCH 03/18] add mising LiveCodeBlockThemeConfig type import to
 website

---
 website/docusaurus.config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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;
 }

From 75eac25bf10f4776ef643fd4b43da2489e45b644 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 15:28:11 +0100
Subject: [PATCH 04/18] some fixes

---
 .../src/theme-live-codeblock.d.ts                      | 10 ++++++++--
 .../src/theme/Playground/Buttons/ResetButton/index.tsx | 10 +++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

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 0e5f762098ba..8db9eb1144dd 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
@@ -17,6 +17,7 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/LiveCodeBlock' {
+  import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
 
   export interface Props extends BaseProps {}
@@ -116,7 +117,12 @@ declare module '@theme/ReactLiveScope' {
 }
 
 declare module '@theme/Playground/Buttons/ResetButton' {
-  import type {Props} from '@theme/Playground/Buttons/ResetButton';
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    className?: string;
+    onClick: () => void;
+  }
 
-  export default function ResetButton(props: Props): JSX.Element;
+  export default function ResetButton(props: Props): 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
index 25c5006ca685..0d6daaefedf4 100644
--- 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
@@ -5,17 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
+import type {Props} from '@theme/Playground/Buttons/ResetButton';
 import styles from './styles.module.css';
 
-interface Props {
-  className?: string;
-  onClick: () => void;
-}
-
-export default function ResetButton({className, onClick}: Props): JSX.Element {
+export default function ResetButton({className, onClick}: Props): ReactNode {
   return (
     <button
       type="button"

From d1e2f4a9bd57d83aa8efcba24a53272de058d67d Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 15:29:11 +0100
Subject: [PATCH 05/18] change type order

---
 .../src/theme-live-codeblock.d.ts              | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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 8db9eb1144dd..7ec98d986fc8 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
@@ -107,15 +107,6 @@ declare module '@theme/Playground/Header' {
   export default function PlaygroundHeader(props: Props): ReactNode;
 }
 
-declare module '@theme/ReactLiveScope' {
-  type Scope = {
-    [key: string]: unknown;
-  };
-
-  const ReactLiveScope: Scope;
-  export default ReactLiveScope;
-}
-
 declare module '@theme/Playground/Buttons/ResetButton' {
   import type {ReactNode} from 'react';
 
@@ -126,3 +117,12 @@ declare module '@theme/Playground/Buttons/ResetButton' {
 
   export default function ResetButton(props: Props): ReactNode;
 }
+
+declare module '@theme/ReactLiveScope' {
+  type Scope = {
+    [key: string]: unknown;
+  };
+
+  const ReactLiveScope: Scope;
+  export default ReactLiveScope;
+}

From 1150547dc598f97c3064fd94847cdd0050e49f9b Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 15:29:37 +0100
Subject: [PATCH 06/18] remove useless dogfood page

---
 .../_pages tests/live-playground-test.tsx     | 37 -------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 website/_dogfooding/_pages tests/live-playground-test.tsx

diff --git a/website/_dogfooding/_pages tests/live-playground-test.tsx b/website/_dogfooding/_pages tests/live-playground-test.tsx
deleted file mode 100644
index fd545fdfa778..000000000000
--- a/website/_dogfooding/_pages tests/live-playground-test.tsx	
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * 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';
-
-export default function LivePlaygroundTest(): JSX.Element {
-  return (
-    <Layout title="Test Reset Button">
-      <div style={{padding: '2rem'}}>
-        <Heading as="h1">Reset Button Feature</Heading>
-        <p>Edit the code below and use the Reset button to restore it!</p>
-
-        <Playground>
-          {`function Counter() {
-  const [count, setCount] = React.useState(0);
-  
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-}`}
-        </Playground>
-      </div>
-    </Layout>
-  );
-}

From 09ea496e760cab570474c8842ffe3a3eb751b14c Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 15:31:13 +0100
Subject: [PATCH 07/18] rename i18n key

---
 .../src/theme/Playground/Buttons/ResetButton/index.tsx        | 2 +-
 .../locales/ar/theme-live-codeblock.json                      | 2 +-
 .../locales/base/theme-live-codeblock.json                    | 4 ++--
 .../locales/bg/theme-live-codeblock.json                      | 2 +-
 .../locales/bn/theme-live-codeblock.json                      | 2 +-
 .../locales/cs/theme-live-codeblock.json                      | 2 +-
 .../locales/da/theme-live-codeblock.json                      | 2 +-
 .../locales/de/theme-live-codeblock.json                      | 2 +-
 .../locales/es/theme-live-codeblock.json                      | 2 +-
 .../locales/et/theme-live-codeblock.json                      | 2 +-
 .../locales/fa/theme-live-codeblock.json                      | 2 +-
 .../locales/fil/theme-live-codeblock.json                     | 2 +-
 .../locales/fr/theme-live-codeblock.json                      | 2 +-
 .../locales/he/theme-live-codeblock.json                      | 2 +-
 .../locales/hi/theme-live-codeblock.json                      | 2 +-
 .../locales/hu/theme-live-codeblock.json                      | 2 +-
 .../locales/id/theme-live-codeblock.json                      | 2 +-
 .../locales/is/theme-live-codeblock.json                      | 2 +-
 .../locales/it/theme-live-codeblock.json                      | 2 +-
 .../locales/ja/theme-live-codeblock.json                      | 2 +-
 .../locales/ko/theme-live-codeblock.json                      | 2 +-
 .../locales/nb/theme-live-codeblock.json                      | 2 +-
 .../locales/nl/theme-live-codeblock.json                      | 2 +-
 .../locales/pl/theme-live-codeblock.json                      | 2 +-
 .../locales/pt-BR/theme-live-codeblock.json                   | 2 +-
 .../locales/pt-PT/theme-live-codeblock.json                   | 2 +-
 .../locales/ru/theme-live-codeblock.json                      | 2 +-
 .../locales/sl/theme-live-codeblock.json                      | 2 +-
 .../locales/sr/theme-live-codeblock.json                      | 2 +-
 .../locales/sv/theme-live-codeblock.json                      | 2 +-
 .../locales/tk/theme-live-codeblock.json                      | 2 +-
 .../locales/tr/theme-live-codeblock.json                      | 2 +-
 .../locales/uk/theme-live-codeblock.json                      | 2 +-
 .../locales/ur/theme-live-codeblock.json                      | 2 +-
 .../locales/vi/theme-live-codeblock.json                      | 2 +-
 .../locales/zh-Hans/theme-live-codeblock.json                 | 2 +-
 .../locales/zh-Hant/theme-live-codeblock.json                 | 2 +-
 37 files changed, 38 insertions(+), 38 deletions(-)

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
index 0d6daaefedf4..33f53f93b734 100644
--- 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
@@ -28,7 +28,7 @@ export default function ResetButton({className, onClick}: Props): ReactNode {
         <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>
       <Translate
-        id="theme.Playground.resetButton"
+        id="theme.Playground.buttons.reset"
         description="The reset button label for live code blocks">
         Reset
       </Translate>
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 6dd4277d249a..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "مُحـرر مُبـاشر",
-  "theme.Playground.resetButton": "Reset",
+  "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 6aa491030e87..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,8 +1,8 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
   "theme.Playground.liveEditor___DESCRIPTION": "The live editor label of the live codeblocks",
-  "theme.Playground.resetButton": "Reset",
-  "theme.Playground.resetButton___DESCRIPTION": "The reset button label for live code blocks",
+  "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 f9cc6c506775..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 52532bb6878c..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "লাইভ এডিটর",
-  "theme.Playground.resetButton": "Reset",
+  "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 85e0af07661a..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 dda34da9be87..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 0f0a34a9dae4..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 bd5b62c2a263..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor en vivo",
-  "theme.Playground.resetButton": "Reset",
+  "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 e97d61354101..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Redaktor",
-  "theme.Playground.resetButton": "Reset",
+  "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 eae72bf3a396..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "ویرایشگر زنده",
-  "theme.Playground.resetButton": "Reset",
+  "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 c9e9b1698412..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live na Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 dd7c6134851e..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Éditeur en direct",
-  "theme.Playground.resetButton": "Reset",
+  "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 ecdc22d7a5d2..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 12636af7c6ad..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "लाइव एडिटर",
-  "theme.Playground.resetButton": "Reset",
+  "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 af358a2cb3e8..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Interaktív szerkesztő",
-  "theme.Playground.resetButton": "Reset",
+  "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 f06aaefe2973..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Penyunting Langung",
-  "theme.Playground.resetButton": "Reset",
+  "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 c543d45d5fb0..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Lifandi Ritill",
-  "theme.Playground.resetButton": "Reset",
+  "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 482107541bf0..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor dal vivo",
-  "theme.Playground.resetButton": "Reset",
+  "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 e13614016acc..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "ライブエディター",
-  "theme.Playground.resetButton": "Reset",
+  "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 bd7eaf251122..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "라이브 에디터",
-  "theme.Playground.resetButton": "Reset",
+  "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 42ccc319e704..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 55b725f30656..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live bewerken",
-  "theme.Playground.resetButton": "Reset",
+  "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 f487d887e698..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Edytor live",
-  "theme.Playground.resetButton": "Reset",
+  "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 a78e472bb486..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor em tempo real",
-  "theme.Playground.resetButton": "Reset",
+  "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 a78e472bb486..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor em tempo real",
-  "theme.Playground.resetButton": "Reset",
+  "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 11273933905c..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Интерактивный редактор",
-  "theme.Playground.resetButton": "Reset",
+  "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 4e272ec0b317..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Urejanje kode v živo",
-  "theme.Playground.resetButton": "Reset",
+  "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 c146a9921daa..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Уређивач",
-  "theme.Playground.resetButton": "Reset",
+  "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 42ccc319e704..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
-  "theme.Playground.resetButton": "Reset",
+  "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 9556a85f416a..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Göni Redaktor",
-  "theme.Playground.resetButton": "Reset",
+  "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 377feaab8d19..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Canlı Düzenleyici",
-  "theme.Playground.resetButton": "Reset",
+  "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 925b2e6c7bf1..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Інтерактивний редактор",
-  "theme.Playground.resetButton": "Reset",
+  "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 c170f0fb73d9..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "لائیو ایڈیٹر",
-  "theme.Playground.resetButton": "Reset",
+  "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 c3e2efa274e9..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "Trình soạn thảo trực tuyến",
-  "theme.Playground.resetButton": "Reset",
+  "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 12ef7477a037..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "实时编辑器",
-  "theme.Playground.resetButton": "Reset",
+  "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 19fab66faa67..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,5 +1,5 @@
 {
   "theme.Playground.liveEditor": "即時編輯器",
-  "theme.Playground.resetButton": "Reset",
+  "theme.Playground.buttons.reset": "Reset",
   "theme.Playground.result": "結果"
 }

From 901250f80d84721f6aa812c8f8ef5731aec5e5ef Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:07:13 +0100
Subject: [PATCH 08/18] extract context to a client api export

---
 .../package.json                              | 12 ++++
 .../src/client/context.tsx                    | 36 ++++++++++
 .../src/client/index.ts                       |  8 +++
 .../src/theme-live-codeblock.d.ts             |  1 -
 .../Playground/Buttons/ResetButton/index.tsx  |  6 +-
 .../src/theme/Playground/Editor/index.tsx     |  5 +-
 .../src/theme/Playground/Provider/index.tsx   | 69 ++++++-------------
 .../tsconfig.client.json                      |  2 +-
 .../tsconfig.json                             |  7 +-
 9 files changed, 89 insertions(+), 57 deletions(-)
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/client/context.tsx
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/client/index.ts

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 7ec98d986fc8..7ebc350912b2 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
@@ -112,7 +112,6 @@ declare module '@theme/Playground/Buttons/ResetButton' {
 
   export interface Props {
     className?: string;
-    onClick: () => void;
   }
 
   export default function ResetButton(props: Props): 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
index 33f53f93b734..feb2d4a1bc7c 100644
--- 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
@@ -8,17 +8,19 @@
 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';
 
-export default function ResetButton({className, onClick}: Props): ReactNode {
+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={onClick}>
+      onClick={() => reset()}>
       <svg
         className={styles.resetButtonIcon}
         viewBox="0 0 16 16"
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 cb808af60c55..721dccf5104e 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
@@ -11,13 +11,10 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import Translate from '@docusaurus/Translate';
 import PlaygroundHeader from '@theme/Playground/Header';
 import ResetButton from '@theme/Playground/Buttons/ResetButton';
-import {usePlaygroundReset} from '@theme/Playground/Provider';
 import styles from './styles.module.css';
 
 export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
-  const {reset} = usePlaygroundReset();
-
   return (
     <>
       <PlaygroundHeader
@@ -28,7 +25,7 @@ export default function PlaygroundEditor(): ReactNode {
             Live Editor
           </Translate>
         }
-        buttons={<ResetButton onClick={reset} />}
+        buttons={<ResetButton />}
       />
       <LiveEditor key={String(isBrowser)} className={styles.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 f8b51aaff6fc..85febf3ac9d3 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,64 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {
-  createContext,
-  useContext,
-  useMemo,
-  useState,
-  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';
 
 const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
 
-interface ResetContextValue {
-  resetKey: number;
-  reset: () => void;
-}
-
-// eslint-disable-next-line import/no-named-export
-export const PlaygroundResetContext = createContext<ResetContextValue | null>(
-  null,
-);
-
-// eslint-disable-next-line import/no-named-export
-export function usePlaygroundReset(): ResetContextValue {
-  const context = useContext(PlaygroundResetContext);
-  if (!context) {
-    throw new Error(
-      'usePlaygroundReset must be used within PlaygroundProvider',
-    );
-  }
-  return context;
-}
-
-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;
-  const [resetKey, setResetKey] = useState(0);
-
-  const reset = () => setResetKey((prev) => prev + 1);
+  return (
+    <LiveProvider
+      noInline={noInline}
+      theme={prismTheme}
+      {...props}
+      code={code?.replace(/\n$/, '')}
+      transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
+      {children}
+    </LiveProvider>
+  );
+}
 
-  const contextValue = useMemo(() => ({resetKey, reset}), [resetKey]);
+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 (
-    <PlaygroundResetContext.Provider value={contextValue}>
-      <LiveProvider
-        key={resetKey}
-        noInline={noInline}
-        theme={prismTheme}
-        {...props}
-        code={code?.replace(/\n$/, '')}
-        transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
-        {children}
-      </LiveProvider>
-    </PlaygroundResetContext.Provider>
+    <PlaygroundProviderComponent key={resetKey} value={value}>
+      <LiveProviderComponent {...props} />
+    </PlaygroundProviderComponent>
   );
 }
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__/**"
+  ]
 }

From ad021cbfc139c42c84ed7c00e74b8b3a9a34622d Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:08:41 +0100
Subject: [PATCH 09/18] fix prop types import

---
 .../src/theme/Playground/Header/index.tsx                  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

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 da43e7f45675..566a30f210c8 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,12 +7,9 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
-import styles from './styles.module.css';
+import type {Props} from '@theme/Playground/Header';
 
-interface Props {
-  label: ReactNode;
-  buttons?: ReactNode;
-}
+import styles from './styles.module.css';
 
 export default function PlaygroundHeader({label, buttons}: Props): ReactNode {
   return (

From 41ea8bb9c1b18d6bdb7f3ac2f9a0674957cac027 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:12:25 +0100
Subject: [PATCH 10/18] restore former comment

---
 .../src/theme/Playground/Editor/index.tsx                  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 721dccf5104e..66e8293abbb0 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
@@ -27,7 +27,12 @@ export default function PlaygroundEditor(): ReactNode {
         }
         buttons={<ResetButton />}
       />
-      <LiveEditor key={String(isBrowser)} className={styles.playgroundEditor} />
+      <LiveEditor
+        // We force remount the editor on hydration,
+        // otherwise dark prism theme is not applied
+        key={String(isBrowser)}
+        className={styles.playgroundEditor}
+      />
     </>
   );
 }

From 7c318e7f0428312b9d7a2f1aa5ec429b36c3b437 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:21:02 +0100
Subject: [PATCH 11/18] refactor a bit, extract playground position prop

---
 .../src/theme-live-codeblock.d.ts               |  9 +++++++--
 .../src/theme/Playground/Editor/index.tsx       | 17 +++++++----------
 .../src/theme/Playground/Header/index.tsx       |  7 +++++--
 .../theme/Playground/Header/styles.module.css   |  2 +-
 .../src/theme/Playground/Layout/index.tsx       |  7 ++++++-
 .../src/theme/Playground/Preview/index.tsx      | 16 +++++++---------
 6 files changed, 33 insertions(+), 25 deletions(-)

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 7ebc350912b2..4d2d2847aa8f 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,9 +9,11 @@
 /// <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;
     };
   };
 }
@@ -33,9 +35,12 @@ declare module '@theme/Playground' {
   type CodeBlockProps = Omit<BaseProps, '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;
 }
@@ -100,7 +105,7 @@ declare module '@theme/Playground/Header' {
   import type {ReactNode} from 'react';
 
   export interface Props {
-    label: ReactNode;
+    children: ReactNode;
     buttons?: ReactNode;
   }
 
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 66e8293abbb0..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
@@ -17,16 +17,13 @@ export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
   return (
     <>
-      <PlaygroundHeader
-        label={
-          <Translate
-            id="theme.Playground.liveEditor"
-            description="The live editor label of the live codeblocks">
-            Live Editor
-          </Translate>
-        }
-        buttons={<ResetButton />}
-      />
+      <PlaygroundHeader buttons={<ResetButton />}>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </PlaygroundHeader>
       <LiveEditor
         // We force remount the editor on hydration,
         // otherwise dark prism theme is not applied
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 566a30f210c8..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
@@ -11,10 +11,13 @@ import type {Props} from '@theme/Playground/Header';
 
 import styles from './styles.module.css';
 
-export default function PlaygroundHeader({label, buttons}: Props): ReactNode {
+export default function PlaygroundHeader({
+  children,
+  buttons,
+}: Props): ReactNode {
   return (
     <div className={clsx(styles.playgroundHeader)}>
-      <div className={styles.playgroundHeaderLabel}>{label}</div>
+      <div className={styles.playgroundHeaderContent}>{children}</div>
       {buttons && (
         <div className={styles.playgroundHeaderButtons}>{buttons}</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 1a5eb82964dc..d11c5bab6af2 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
@@ -14,7 +14,7 @@
   border-bottom: 1px solid var(--ifm-color-emphasis-300);
 }
 
-.playgroundHeaderLabel {
+.playgroundHeaderContent {
   font-weight: var(--ifm-font-weight-bold);
   font-size: 0.875rem;
 }
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..a752371a7c1e 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
@@ -17,8 +17,13 @@ function useLiveCodeBlockThemeConfig() {
   return themeConfig.liveCodeBlock;
 }
 
+function usePlaygroundPosition() {
+  const themeConfig = useLiveCodeBlockThemeConfig();
+  return themeConfig.playgroundPosition;
+}
+
 export default function PlaygroundLayout(): ReactNode {
-  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+  const playgroundPosition = usePlaygroundPosition();
   return (
     <>
       {playgroundPosition === 'top' ? (
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
index 595f91e73068..b4f6e1ef887e 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Preview/index.tsx
@@ -44,15 +44,13 @@ function PlaygroundLivePreview(): ReactNode {
 export default function PlaygroundPreview(): ReactNode {
   return (
     <>
-      <PlaygroundHeader
-        label={
-          <Translate
-            id="theme.Playground.result"
-            description="The result label of the live codeblocks">
-            Result
-          </Translate>
-        }
-      />
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </PlaygroundHeader>
       <div className={styles.playgroundPreview}>
         <PlaygroundLivePreview />
       </div>

From 282582ea3d3f3ec4480bc7757314e9a77dad1d6b Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:32:43 +0100
Subject: [PATCH 12/18] expose position prop + dogfood

---
 .../src/theme-live-codeblock.d.ts             |  7 +++-
 .../src/theme/CodeBlock/index.tsx             |  6 ++-
 website/_dogfooding/_pages tests/index.mdx    |  1 +
 .../_pages tests/live-playground-tests.tsx    | 37 +++++++++++++++++++
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 website/_dogfooding/_pages tests/live-playground-tests.tsx

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 4d2d2847aa8f..180d3437a389 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
@@ -22,7 +22,9 @@ declare module '@theme/LiveCodeBlock' {
   import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
 
-  export interface Props extends BaseProps {}
+  export interface Props extends BaseProps {
+    children?: string;
+  }
 
   export default function LiveCodeBlock(props: Props): ReactNode;
 }
@@ -42,7 +44,8 @@ declare module '@theme/Playground' {
     children?: string;
     position?: PlaygroundPosition;
   }
-  export default function Playground(props: LiveProviderProps): ReactNode;
+
+  export default function Playground(props: Props): ReactNode;
 }
 
 declare module '@theme/Playground/Provider' {
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..65ae8a6c5d0a 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,10 @@ declare module '@theme/CodeBlock' {
   }
 }
 
-function isLiveCodeBlock(props: CodeBlockProps): boolean {
-  return !!props.live;
+function isLiveCodeBlock(
+  props: CodeBlockProps,
+): props is {live: true; children: string} {
+  return !!props.live && typeof props.children === 'string';
 }
 
 export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode {
diff --git a/website/_dogfooding/_pages tests/index.mdx b/website/_dogfooding/_pages tests/index.mdx
index 25da1e93a597..87ad55b95641 100644
--- a/website/_dogfooding/_pages tests/index.mdx	
+++ b/website/_dogfooding/_pages tests/index.mdx	
@@ -43,3 +43,4 @@ 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)
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..7b43ba0b2d0e
--- /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>
+      <p>Count: {count}</p>
+      <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 top</Heading>
+        <Playground position="top">{TestCode}</Playground>
+
+        <Heading as="h2">Position bottom</Heading>
+        <Playground position="bottom">{TestCode}</Playground>
+      </div>
+    </Layout>
+  );
+}

From ed78bb3247a1457e35a9b0f62789d231d3757c4b Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:36:59 +0100
Subject: [PATCH 13/18] wire position prop

---
 .../src/theme-live-codeblock.d.ts                     |  6 ++++--
 .../src/theme/Playground/Layout/index.tsx             | 11 ++++-------
 .../src/theme/Playground/index.tsx                    |  3 ++-
 .../_pages tests/live-playground-tests.tsx            |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

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 180d3437a389..db33cd038386 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
@@ -79,9 +79,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;
 }
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 a752371a7c1e..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,16 +18,12 @@ function useLiveCodeBlockThemeConfig() {
   return themeConfig.liveCodeBlock;
 }
 
-function usePlaygroundPosition() {
+export default function PlaygroundLayout(props: Props): ReactNode {
   const themeConfig = useLiveCodeBlockThemeConfig();
-  return themeConfig.playgroundPosition;
-}
-
-export default function PlaygroundLayout(): ReactNode {
-  const playgroundPosition = usePlaygroundPosition();
+  const position = props.position ?? themeConfig.playgroundPosition;
   return (
     <>
-      {playgroundPosition === 'top' ? (
+      {position === 'top' ? (
         <>
           <PlaygroundPreview />
           <PlaygroundEditor />
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/website/_dogfooding/_pages tests/live-playground-tests.tsx b/website/_dogfooding/_pages tests/live-playground-tests.tsx
index 7b43ba0b2d0e..01ebb05312da 100644
--- a/website/_dogfooding/_pages tests/live-playground-tests.tsx	
+++ b/website/_dogfooding/_pages tests/live-playground-tests.tsx	
@@ -26,11 +26,11 @@ export default function LivePlaygroundTests(): JSX.Element {
       <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>
-
-        <Heading as="h2">Position bottom</Heading>
-        <Playground position="bottom">{TestCode}</Playground>
       </div>
     </Layout>
   );

From c3075f61cb4d01a05ad6a818ef3d519bbeaccef5 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 16:52:37 +0100
Subject: [PATCH 14/18] fix type issues

---
 .../src/theme-live-codeblock.d.ts                        | 9 +++++++--
 .../src/theme/CodeBlock/index.tsx                        | 8 ++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

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 db33cd038386..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
@@ -22,7 +22,9 @@ 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;
   }
 
@@ -34,7 +36,10 @@ 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';
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 65ae8a6c5d0a..00d1a22adad2 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
@@ -21,8 +21,12 @@ declare module '@theme/CodeBlock' {
 
 function isLiveCodeBlock(
   props: CodeBlockProps,
-): props is {live: true; children: string} {
-  return !!props.live && typeof props.children === 'string';
+): 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 {

From f4742c43d5e5c24dc87c9909571f9ea2af08198d Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 17:10:54 +0100
Subject: [PATCH 15/18] subcomponents

---
 .../Playground/Buttons/ResetButton/index.tsx  | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

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
index feb2d4a1bc7c..63157570b3f3 100644
--- 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
@@ -12,6 +12,29 @@ 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 (
@@ -21,19 +44,8 @@ export default function ResetButton({className}: Props): ReactNode {
       title="Reset"
       className={clsx('clean-btn', className, styles.resetButton)}
       onClick={() => reset()}>
-      <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>
-      <Translate
-        id="theme.Playground.buttons.reset"
-        description="The reset button label for live code blocks">
-        Reset
-      </Translate>
+      <Icon />
+      <Label />
     </button>
   );
 }

From 37454958c8c93829ba22b86afb4494847a51936d Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 17:11:01 +0100
Subject: [PATCH 16/18] restore some former CSS

---
 .../src/theme/Playground/Header/styles.module.css      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

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 d11c5bab6af2..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
@@ -9,9 +9,13 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background: var(--ifm-color-emphasis-100);
-  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-content);
+  font-size: var(--ifm-code-font-size);
 }
 
 .playgroundHeaderContent {

From 4a2c9c500636eee01979d966fb6c334fccf26e09 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 17:16:21 +0100
Subject: [PATCH 17/18] fix React playground examples

---
 .../_pages tests/live-playground-tests.tsx    |  2 +-
 .../markdown-features-code-blocks.mdx         | 44 ++++++-------------
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/website/_dogfooding/_pages tests/live-playground-tests.tsx b/website/_dogfooding/_pages tests/live-playground-tests.tsx
index 01ebb05312da..a544bbe841dc 100644
--- a/website/_dogfooding/_pages tests/live-playground-tests.tsx	
+++ b/website/_dogfooding/_pages tests/live-playground-tests.tsx	
@@ -14,7 +14,7 @@ const TestCode = `function Counter() {
   const [count, setCount] = React.useState(0);
   return (
     <div>
-      <p>Count: {count}</p>
+      <div>Count: {count}</div>
       <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
   );
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>;
 }
 ```
 

From 9b52366fedfd348472865e4c7227f48c13396bee Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 19 Feb 2026 17:21:42 +0100
Subject: [PATCH 18/18] restore comment

---
 .../src/theme/Playground/Provider/index.tsx                     | 2 ++
 1 file changed, 2 insertions(+)

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 85febf3ac9d3..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
@@ -11,6 +11,8 @@ import {PlaygroundProvider as PlaygroundProviderComponent} from '@docusaurus/the
 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};`;
 
 function LiveProviderComponent({code, children, ...props}: Props): ReactNode {