recharts · PavelVanecek · Apr 27, 2026 · Apr 26, 2026 · Apr 27, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.35.0",
     "@playwright/experimental-ct-react": "1.59.1",
-    "@recharts/devtools": "^0.0.11",
+    "@recharts/devtools": "^0.0.12",
     "@reduxjs/toolkit": "^1.9.7",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",

diff --git a/www/src/components/CodeEditorWithPreview.tsx b/www/src/components/CodeEditorWithPreview.tsx
@@ -4,6 +4,7 @@ import * as D3ShapeScope from 'd3-shape';
 import * as RechartsDevtoolsScope from '@recharts/devtools';
 import { RechartsDevtoolsContext } from '@recharts/devtools';
 import { LuPencil, LuPlay, LuShare2 } from 'react-icons/lu';
+import { useSessionStorageState } from '@recharts/devtools/dist/hooks/useSessionStorageState';
 import { StackBlitzLink } from './Shared/StackBlitzLink';
 import { sendEvent } from './analytics';
 import { ToolFrame, ToolType, ToolItem } from './Playground/ToolFrame';
@@ -23,7 +24,7 @@ type CodeEditorWithPreviewProps<ControlsType> = {
   /**
    * This component renders knobs, controls, and various other activities that change the chart
    */
-  Controls?: ComponentType<{ onChange: (values: ControlsType) => void }>;
+  Controls?: ComponentType<{ onChange: (values: ControlsType) => void; sessionStoreValues: ControlsType | null }>;
   /**
    * The source code of the component.
    */
@@ -91,7 +92,7 @@ export function CodeEditorWithPreview<T>({
   const [codeToRun, setCodeToRun] = useState<string | null>(null);
   const [Runner, setRunner] = useState<any>(null);
   const [activeTool, setActiveTool] = useState<ToolType>(defaultTool);
-  const [controlsState, setControlsState] = useState<T | null>(null);
+  const [controlsState, setControlsState] = useSessionStorageState<T | null>(encodeURIComponent(stackBlitzTitle), null);
 
   // Lazy load react-runner when entering edit mode
   useEffect(() => {
@@ -197,7 +198,7 @@ export function CodeEditorWithPreview<T>({
       label: 'Controls',
       component: (
         <div style={{ padding: '10px', height: '100%', overflow: 'auto' }}>
-          <Controls onChange={setControlsState} />
+          <Controls onChange={setControlsState} sessionStoreValues={controlsState} />
         </div>
       ),
     });

diff --git a/www/src/components/GuideView/Animations/AnimationsExample.tsx b/www/src/components/GuideView/Animations/AnimationsExample.tsx
@@ -74,8 +74,14 @@ const defaultState: ControlsType = {
   replayKey: 0,
 };
 
-export function AnimationsControls({ onChange }: { onChange: (values: ControlsType) => void }) {
-  const [state, setState] = React.useState<ControlsType>(defaultState);
+export function AnimationsControls({
+  onChange,
+  sessionStoreValues,
+}: {
+  onChange: (values: ControlsType) => void;
+  sessionStoreValues: ControlsType | null;
+}) {
+  const [state, setState] = React.useState<ControlsType>(sessionStoreValues ?? defaultState);
 
   const handleChange = (nextValues: Partial<ControlsType>) => {
     const newState = { ...state, ...nextValues };

diff --git a/www/src/components/GuideView/AxisTicks/CustomAxisTicks.tsx b/www/src/components/GuideView/AxisTicks/CustomAxisTicks.tsx
@@ -36,8 +36,14 @@ export default function CustomAxisTicks(props: Partial<AxisTicksControlsType>) {
   );
 }
 
-export function CustomAxisTicksControls({ onChange }: { onChange: (values: AxisTicksControlsType) => void }) {
-  const [state, setState] = React.useState<AxisTicksControlsType>(defaultState);
+export function CustomAxisTicksControls({
+  onChange,
+  sessionStoreValues,
+}: {
+  onChange: (values: AxisTicksControlsType) => void;
+  sessionStoreValues: AxisTicksControlsType | null;
+}) {
+  const [state, setState] = React.useState<AxisTicksControlsType>(sessionStoreValues ?? defaultState);
 
   const updateState = (nextValues: Partial<AxisTicksControlsType>) => {
     const nextState = { ...state, ...nextValues };

diff --git a/www/src/components/GuideView/AxisTicks/NiceTicksPlayground.tsx b/www/src/components/GuideView/AxisTicks/NiceTicksPlayground.tsx
@@ -45,8 +45,14 @@ export default function AxisTicksPlayground(props: Partial<AxisTicksControlsType
   );
 }
 
-export function AxisTicksControls({ onChange }: { onChange: (values: AxisTicksControlsType) => void }) {
-  const [state, setState] = React.useState<AxisTicksControlsType>(defaultState);
+export function AxisTicksControls({
+  onChange,
+  sessionStoreValues,
+}: {
+  onChange: (values: AxisTicksControlsType) => void;
+  sessionStoreValues: AxisTicksControlsType | null;
+}) {
+  const [state, setState] = React.useState<AxisTicksControlsType>(sessionStoreValues ?? defaultState);
 
   const updateState = (nextValues: Partial<AxisTicksControlsType>) => {
     const nextState = { ...state, ...nextValues };

diff --git a/www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx b/www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx
@@ -46,16 +46,25 @@ type ControlsType = {
  * Each property is a slider input, ranging from 0 to 1 in 0.01 steps.
  * Calls onChange with the new values when an input changes.
  * @param onChange
+ * @param sessionStoreValues data from session storage, or null if this is the first visit
  * @constructor
  */
-export function BarAlignControls({ onChange }: { onChange: (values: ControlsType) => void }) {
-  const [state, setState] = React.useState<ControlsType>({
-    paddingInner: 0,
-    paddingOuter: 0.8,
-    align: 0.7,
-    barGap: 0.1,
-    barCategoryGap: 0.1,
-  });
+export function BarAlignControls({
+  onChange,
+  sessionStoreValues,
+}: {
+  onChange: (values: ControlsType) => void;
+  sessionStoreValues: ControlsType | null;
+}) {
+  const [state, setState] = React.useState<ControlsType>(
+    sessionStoreValues ?? {
+      paddingInner: 0,
+      paddingOuter: 0.8,
+      align: 0.7,
+      barGap: 0.1,
+      barCategoryGap: 0.1,
+    },
+  );
 
   const handleChange = (key: keyof ControlsType, value: number) => {
     const newState = { ...state, [key]: value };

diff --git a/www/src/docs/exampleComponents/types.ts b/www/src/docs/exampleComponents/types.ts
@@ -11,7 +11,7 @@ export type ChartExample<ControlsType = any> = {
   /**
    * This component renders knobs, controls, and various other activities that change the chart
    */
-  Controls?: ComponentType<{ onChange: (values: ControlsType) => void }>;
+  Controls?: ComponentType<{ onChange: (values: ControlsType) => void; sessionStoreValues: ControlsType | null }>;
   /**
    * The source code of the example.
    */