Local Storage Explorer

Browse and edit localStorage or sessionStorage entries with filtering, JSON detection, and automatic updates across tabs. Supports a scoped keyPrefix for safer demos and testing.

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