Local Storage Explorer

Browse and edit `localStorage` or `sessionStorage` entries: filter, JSON hint badges, cross-tab refresh via the `storage` event, and scoped `keyPrefix` for safe demos.

Local (prefixed demo)

Seeds two prefixed keys once, then lists only keys under that prefix so unrelated app data stays hidden.

Storage explorer is client-only.

default-example.tsx

1"use client";
2
3import { useEffect } from "react";
4import { LocalStorageExplorer } from "@/registry/ui";
5
6const LOCAL_PREFIX = "__tt_local_storage_demo__";
7
8export function LocalStorageExplorerDefaultExample() {
9  useEffect(() => {
10    const settingsKey = `${LOCAL_PREFIX}settings`;
11    if (!localStorage.getItem(settingsKey)) {
12      localStorage.setItem(
13        settingsKey,
14        JSON.stringify({ theme: "dark", region: "eu-west" }),
15      );
16    }
17    if (!localStorage.getItem(`${LOCAL_PREFIX}counter`)) {
18      localStorage.setItem(`${LOCAL_PREFIX}counter`, "1");
19    }
20  }, []);
21
22  return (
23    <div className="w-full">
24      <LocalStorageExplorer storage="local" keyPrefix={LOCAL_PREFIX} />
25    </div>
26  );
27}

Session

Same UI wired to `sessionStorage` with its own demo prefix.

Storage explorer is client-only.

session-example.tsx

1"use client";
2
3import { useEffect } from "react";
4import { LocalStorageExplorer } from "@/registry/ui";
5
6const SESSION_PREFIX = "__tt_session_demo__";
7
8export function LocalStorageExplorerSessionExample() {
9  useEffect(() => {
10    if (!sessionStorage.getItem(`${SESSION_PREFIX}tab`)) {
11      sessionStorage.setItem(`${SESSION_PREFIX}tab`, "beta");
12    }
13  }, []);
14
15  return (
16    <div className="w-full">
17      <LocalStorageExplorer storage="session" keyPrefix={SESSION_PREFIX} />
18    </div>
19  );
20}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/local-storage-explorer

Props

Name	Type	Default	Description
storage	"local" \| "session"	"local"	Underlying `Storage` object to use
keyPrefix	string	undefined	When set, only keys starting with this prefix are shown and edited
className	string	undefined	Classes on the outer shell