Skip to content
EliteChart

Persistence

Layout JSON, study templates, drawings — what survives reload and how to wire your own storage.

EliteChart persists three kinds of state across reloads:

  • Layout — symbol, timeframe, kind, theme mode, drawer open-state.
  • Drawings — every user-placed annotation, by symbol.
  • Indicators — the active indicator set + parameters.

By default this lives in localStorage under the elitechart:* key prefix. You can swap the storage backend for SessionStorage, IndexedDB, or your own remote sync — the contract is plain JSON.

Quick example

code
'use client';
import { useEffect } from 'react';
import { useChartStore, useUIStore, useThemeStore } from '@elitechart/elitechart';

function PersistToServer() {
  useEffect(() => {
    const sub = useChartStore.subscribe(async (state) => {
      await fetch('/api/layout', {
        method: 'PUT',
        body: JSON.stringify({
          symbol: state.symbol,
          timeframe: state.timeframe,
          drawings: state.drawings,
          indicators: state.indicators,
        }),
      });
    });
    return sub;
  }, []);
  return null;
}

How it works

Each Zustand store has a stable JSON schema. The persist middleware writes the relevant slice to localStorage on every mutation, with a debounce. The keys:

  • elitechart:chart — symbol, timeframe, kind, drawings, indicators.
  • elitechart:ui — bottom tab, sidebar panel, modal state.
  • elitechart:theme — mode, overrides, grid visibility.

On mount, each store hydrates from its key. If the JSON is missing or malformed the store falls back to its initial state — no crash, just a fresh slate.

Variations

Swap localStorage for sessionStorage

code
import { useChartStore } from '@elitechart/elitechart';
useChartStore.persist.setOptions({ storage: sessionStorage });
useChartStore.persist.rehydrate();

Disable persistence entirely

code
useChartStore.persist.clearStorage();

Round-trip a layout via JSON

code
const json = JSON.stringify(useChartStore.getState());
// ... ship to server ...
useChartStore.setState(JSON.parse(json));

Schema (excerpt)

code
interface PersistedChart {
  readonly symbol: string;
  readonly timeframe: string;
  readonly kind: SeriesKind;
  readonly drawings: ReadonlyArray<Drawing>;
  readonly indicators: ReadonlyArray<IndicatorEntry>;
  readonly notes: string;
}

The full TypeScript source of truth lives in @elitechart/elitechart/dist/types/persist.d.ts.

API

SymbolFromNotes
useChartStore.persist@elitechart/elitechartrehydrate / clear / options
useUIStore.persist––
useThemeStore.persist––