facebook · NPX2218 · Jan 19, 2026 · Jan 23, 2026
@@ -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;
+}
@@ -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>
+  );
+}
@@ -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;
+}
@@ -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} />
     </>
   );
 }
@@ -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>
+  );
 }
@@ -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;
 }
@@ -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>

@@ -5,31 +5,64 @@
  * 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,
   ...props
 }: 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>
   );
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "مُحـرر مُبـاشر",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "النتيجة"
 }
@@ -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"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Result"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "লাইভ এডিটর",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "ফলাফল"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Výsledek"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Resultat"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Ergebnisse"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Editor en vivo",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Resultado"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Redaktor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Tulemus"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "ویرایشگر زنده",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "خروجی"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live na Editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Resulta"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Éditeur en direct",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "Résultat"
 }
@@ -1,4 +1,5 @@
 {
   "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.resetButton": "Reset",
   "theme.Playground.result": "תוצאה"
 }