TinyBase logoTinyBase


The Inspector component renders a tool which allows you to view and edit the content of a Store in a debug web environment.

Inspector(props: InspectorProps): ComponentReturnType

The props for this component.


The rendering of the inspector tool.

See the <Inspector /> demo for this component in action.

The component displays a nub in the corner of the screen which you may then click to interact with all the Store objects in the Provider component context.

The component's props identify the nub's initial location and panel state, though subsequent user changes to that will be preserved on each reload.


This example creates a Provider context into which a default Store is provided. The Inspector component within it then renders the inspector tool.

import {Inspector} from 'tinybase/ui-react-inspector';
import {Provider} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
const Pane = () => <Inspector />;

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
// ...
console.log(app.innerHTML.substring(0, 30));
// -> '<aside id="tinybaseInspector">'