Best for
Developers who use PocketBase as a backend and need a visual browser for their collections, records, and auth users without building a custom admin panel.
Stack
A ready-made PocketBase Visualizer UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the PocketBase Visualizertemplate does, how it's wired, and where it's opinionated.
This template wraps the official PocketBase JS SDK to give you a real-time visual explorer for any PocketBase instance. The ConnectionPanel takes your instance URL (e.g., https://yourapp.pockethost.io) and an admin token; the CollectionSidebar calls pb.collections.getFullList() and lists every collection with click-to-activate. The RecordsTable renders a paginated, sortable view of the active collection's records — built from shadcn Table, TableHeader, and TableRow primitives rather than the missing data-table community block.
The RecordDetailDrawer is the star feature: it slides in with a react-json-view formatted view of a single record and supports inline editing — call pb.collection(name).update(id, fields) on save. The SchemaViewer renders each collection's field definitions (name, type, required, options) in a card grid, which is invaluable when debugging why inserts are being rejected. A separate AuthUsersPanel shows the _pb_users_auth_ collection. The RechartsStatsBar gives a quick visual count of records per collection.
Honest caveat: the admin token is entered at runtime (good for security) but that means there's no persistent authentication between page loads — each session requires re-entry. The template also has no RLS or auth layer of its own, so deploying it publicly would expose your PocketBase admin. Treat this as an internal tool or add Clerk auth before sharing the URL.
Key UI components
ConnectionPanelInput for PocketBase instance URL and admin token with a connection status indicator
CollectionSidebarLists all collections via pb.collections.getFullList(); click to switch the active collection
RecordsTablePaginated, sortable table of records from the active collection using shadcn Table primitives
RecordDetailDrawerSlide-in panel showing single record JSON via react-json-view with inline edit capability
SchemaViewerRenders collection field definitions (name, type, required, options) as a structured card grid
AuthUsersPanelDedicated view for the _pb_users_auth_ collection with avatar, email, and verified columns
RechartsStatsBarBar chart showing record counts per collection for a quick collection-level overview
Libraries it leans on
pocketbaseOfficial JS SDK for all REST calls: getFullList, create, update, delete, subscribe
RechartsBarChart component for the collection record count stats visualization
react-json-viewSyntax-highlighted, expandable JSON display inside RecordDetailDrawer
shadcn/uiTable, Drawer, Badge, Tabs, and Input components throughout the layout
Fork it and get it running
You'll need a running PocketBase instance (pockethost.io is free and works immediately) and an admin token before you can see live data in the visualizer.
Fork the template in V0
Open https://v0.dev/chat/community/4hpyXrBX5nv in your browser and click the 'Fork' button in the top-right corner of the chat view. V0 copies the template into your workspace and opens it in a new chat with the code editor and Preview tab side by side.
Tip: Sign in to v0.dev first — the free plan is sufficient to fork.
You should see: The PocketBase Visualizer template opens in your V0 workspace.
Add your PocketBase URL in the Vars panel
Open the Vars panel in the V0 sidebar. Add a variable named NEXT_PUBLIC_POCKETBASE_URL with your PocketBase instance URL as the value (for example, https://yourapp.pockethost.io). This is a NEXT_PUBLIC_ variable because the PocketBase JS SDK runs entirely client-side and needs the URL available in the browser bundle.
Tip: If you don't have a PocketBase instance yet, create one in 60 seconds at pockethost.io — no configuration required.
You should see: The NEXT_PUBLIC_POCKETBASE_URL variable appears in the Vars panel.
Enter your admin token and verify the connection
Open the Preview tab. In the ConnectionPanel, paste your PocketBase admin token (found in your PocketBase admin UI under Settings → Tokens, or use your admin email/password for a passwordAuth token). Click Connect. If successful, the CollectionSidebar should populate with your collection names within a few seconds.
Tip: CORS issues are the most common reason the ConnectionPanel fails — see the Gotchas section if collections don't load.
You should see: CollectionSidebar populates with your PocketBase collection names.
Whitelist your Vercel preview domain in PocketBase
If the sidebar is empty or you see a CORS error in the browser console, open your PocketBase admin UI → Settings → Application → Allowed Origins. Add your V0 preview domain (*.vercel.app or the specific preview URL shown in your browser). Click Save. Reload the V0 preview and try connecting again.
Tip: You'll need to add your production domain separately after deploying.
You should see: Collections load without CORS errors after adding the allowed origin.
Deploy to production
Click the Share button (top-right of V0), then the Publish tab, and click 'Publish to Production'. V0 deploys to Vercel in 30–60 seconds and returns a live URL. Update your PocketBase allowed origins to include this production domain too.
You should see: A Vercel URL is live and the visualizer connects to your PocketBase instance from the deployed URL.
Connect to GitHub for ongoing development
Open the Git panel in V0 sidebar → Click Connect → enter a repo name → V0 creates a branch v0/main-{hash} and pushes all files. Open the pull request on GitHub and merge to main. From here you can continue extending the visualizer in Cursor or locally — the SDK calls are straightforward to modify.
You should see: GitHub repo is created with all visualizer code; merged to main and ready for local development.
The prompt pack
Copy-paste these straight into v0's chat to customize the PocketBase Visualizertemplate. Each one names this template's own components — no generic filler.
Add record count badges to CollectionSidebar
Adds live record counts next to every collection name so you can see data volume at a glance without clicking into each collection.
For each collection name in the CollectionSidebar, fetch the total record count using pb.collection(name).getList(1, 1) and read the totalItems value from the response. Display the count as a shadcn Badge component positioned to the right of the collection name. Fetch all counts in parallel with Promise.all() after the initial getFullList() call so the sidebar doesn't slow down on large instances.
Add a dark mode toggle
Enables a dark/light toggle for the entire visualizer UI with zero additional styling work.
Install next-themes and wrap the root layout in a ThemeProvider. Add a MoonIcon/SunIcon toggle button to the top-right header area of the ConnectionPanel. All existing shadcn/ui components in this template already use dark: Tailwind prefix classes, so dark mode will apply automatically throughout the CollectionSidebar, RecordsTable, RecordDetailDrawer, and SchemaViewer without any additional style changes.
Enable inline record editing in RecordDetailDrawer
Lets you edit record fields directly inside the JSON drawer and save changes back to PocketBase — no separate form needed.
Add an Edit button in the footer of RecordDetailDrawer that switches react-json-view from view mode to edit mode (set the onEdit prop to a handler function). When the user confirms changes in the json-view editor, call pb.collection(collectionName).update(recordId, changedFields) with the edited JSON diff. On success, close the drawer and show a shadcn toast notification; on failure, display the PocketBase error message in a red alert inside the drawer without closing it.
Add CSV export for the active collection
Exports the complete active collection to a CSV file — useful for backups, data analysis, or importing into spreadsheets.
Add an Export CSV button in the toolbar above the RecordsTable. When clicked, fetch all records from the active collection using pb.collection(name).getFullList() (not paginated — this gets everything). Convert the records array to CSV format: extract all unique field keys as headers, then map each record to a row. Use Papa Parse's Papa.unparse() for reliable CSV serialization. Trigger a browser download with the filename set to {collectionName}-export-{date}.csv using URL.createObjectURL() with a Blob of type 'text/csv'.Persist visualizer sessions to Supabase with Clerk auth
Saves each user's PocketBase connection config and last-viewed collection to Supabase so returning sessions restore automatically.
Add a Supabase client configured with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Create a `pb_sessions` table in Supabase with columns: id (uuid), user_id (text), pb_url (text), saved_filters (jsonb), last_collection (text), created_at (timestamptz). Add Clerk auth via NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY. On successful ConnectionPanel connection, upsert a row for the current Clerk userId with the pb_url and selected collection. On load, fetch the user's last session from Supabase and pre-fill the ConnectionPanel URL field, restoring their previous state without re-entry.
Add real-time record subscription via PocketBase WebSocket
Streams live record changes from PocketBase into the RecordsTable so inserts, updates, and deletes appear instantly without page refresh.
Inside a useEffect that fires when the active collection changes, call pb.collection(collectionName).subscribe('*', (event) => { ... }) to open a WebSocket connection. For 'create' events, prepend the new record to the RecordsTable state; for 'update' events, replace the matching row by ID; for 'delete' events, filter out the deleted ID. Add a green 'Live' indicator badge in the RecordsTable header when the subscription is active. Return a cleanup function that calls pb.collection(collectionName).unsubscribe() to avoid memory leaks and stale subscriptions when switching collections.Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
CORS error when connecting to local or hosted PocketBase from V0 PreviewWhy: PocketBase's default allowed origins list is empty or contains only localhost. V0 preview URLs (*.vercel.app) are not included, so the browser blocks the SDK requests with a CORS policy error.
Fix: In your PocketBase admin UI, go to Settings → Application → Allowed Origins and add your V0 preview domain. For pockethost.io instances, the domain pattern is your-instance.pockethost.io. Alternatively, point the visualizer at a pockethost.io instance which is pre-configured for wider CORS.
Add a warning banner in the ConnectionPanel that displays when a fetch error is detected, instructing users to add their current domain to PocketBase Settings → Application → Allowed Origins.
Module not found: Error: Can't resolve '@/components/ui/data-table'Why: V0 sometimes generates a reference to a data-table shadcn component that doesn't exist in the base registry. The data-table is a community-built block, not a core shadcn component.
Fix: Replace the missing data-table import with a manually built table using shadcn's core Table, TableHeader, TableBody, TableRow, TableHead, and TableCell primitives — these all exist in the registry.
Replace the missing data-table component in RecordsTable with a standard shadcn Table component built from scratch using Table, TableHeader, TableBody, TableRow, TableHead, and TableCell primitives. Add pagination controls using shadcn Button components.
react-json-view fails to load in V0 Preview with a blank RecordDetailDrawerWhy: react-json-view is a CommonJS module and esm.sh (V0's module CDN) may fail to transpile it correctly for the browser sandbox environment, leaving the drawer body empty.
Fix: Switch to @microlink/react-json-view which has proper ESM exports and resolves correctly via esm.sh. Alternatively, substitute with a styled Textarea showing JSON.stringify(record, null, 2) for the Preview; the real react-json-view will work correctly after deploying to Vercel.
Replace the react-json-view import with @microlink/react-json-view in RecordDetailDrawer — it has identical API and better ESM module support for the V0 preview sandbox.
PocketBase admin token exposed if stored as a NEXT_PUBLIC_ env varWhy: Any variable with the NEXT_PUBLIC_ prefix gets inlined into the client JavaScript bundle at build time and is visible to anyone who opens browser devtools. A PocketBase admin token in NEXT_PUBLIC_ would give any visitor full admin access to your database.
Fix: Never store the admin token in env vars. The ConnectionPanel should accept it as a runtime input (controlled component state) that lives only in memory during the browser session. The placeholder text in the token input should explicitly warn: 'Entered at runtime — do not add to env vars'.
Move the admin token input to a runtime state variable only in ConnectionPanel. Remove any existing env var reference for the token. Add placeholder text: 'Admin token (runtime only — never saved)'.
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- You're a solo developer or small team who built the PocketBase backend and need a quick admin view for data inspection.
- Your collections are simple flat records with no complex nested relations to render.
- You want the visualizer working in an afternoon to demo PocketBase to a client or stakeholder.
- You need a one-off internal tool without multi-user role management.
Go custom when
- You need multi-user role-based access control for the visualizer itself (read-only vs editor vs admin roles).
- You need to manage PocketBase schema changes — creating/modifying/deleting collection fields or migration scripts.
- You have 50+ collections with complex nested relations requiring custom field rendering logic.
- You need an audit log of every record edit with user attribution and timestamps.
RapidDev can extend this visualizer into a full internal tool with auth, role-based access, and audit trails — we routinely take v0 prototypes to production-grade.
Frequently asked questions
Is this PocketBase Visualizer template free to use?
Yes. It's a free V0 community template. All libraries used — PocketBase JS SDK, Recharts, react-json-view, shadcn/ui — are MIT-licensed with no runtime costs. The only cost is your PocketBase hosting (pockethost.io has a generous free tier).
Can I use this template in a commercial project?
Yes. All component libraries and the PocketBase SDK are MIT-licensed. V0 community forks give you full ownership of the exported code with no commercial use restrictions.
Why does my fork show a blank sidebar or a CORS error in V0 Preview?
PocketBase restricts which domains can call its API. V0's preview URLs (*.vercel.app) are not in the default allowed origins list. Go to your PocketBase admin UI → Settings → Application → Allowed Origins and add your V0 preview domain. The issue disappears after you add the domain and refresh.
Why is react-json-view blank inside the RecordDetailDrawer in V0 Preview?
react-json-view is a CommonJS module that V0's esm.sh module loader sometimes fails to transpile. Switch to @microlink/react-json-view (identical API, better ESM support) or temporarily replace the drawer body with a Textarea showing JSON.stringify(record, null, 2). The full react-json-view works correctly after deploying to Vercel.
Should I store my PocketBase admin token in an environment variable?
No — never store the admin token as a NEXT_PUBLIC_ variable. That prefix inlines the value into the browser bundle and makes it visible to anyone. The ConnectionPanel collects the token at runtime (entered by you, not baked into the build). For automated flows, use a server-side route handler with a non-public server variable, but for this internal tool the runtime input approach is the right choice.
Can this visualizer connect to multiple PocketBase instances?
Out of the box, no — the ConnectionPanel holds one URL at a time. You can extend it by building a saved connections list that stores multiple instance URLs in state (or in Supabase with the advanced Supabase/Clerk prompt) and switches the pb client on selection.
Can RapidDev extend this visualizer for my team?
Yes — RapidDev can add multi-user Clerk auth, role-based access (read-only vs. editor), an edit audit log, and schema management to this v0 prototype. Most teams need 1–2 weeks for a production-ready internal tool.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.