Skip to content


Repository files navigation


Teaful DevTools

Browser extension that allows you to inspect a Teaful store.

npm version gzip size CI Status Maintenance Status Weekly downloads GitHub Discussions: Chat With Us PRs Welcome

All Contributors


Features ✨

  • Debug stores changes (when, what, where, who, how & why)
  • Modify stores
  • Dark & light mode

Getting started

  1. Install the DevTools extension

  2. Install the bridge in your app:

yarn add teaful-devtools

Tiny tiny... 😊 (~200 B)

  1. Use the bridge.

In your main file, where you have the render, you must have the teaful-devtools import at the top, before the imports of your application (components, store, etc).

import 'teaful-devtools'
import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));
  1. Try it!

How to strip devtools from production

Most bundlers allow you strip out code when they detect that a branch inside an if-statement will never be hit. We can use this to only include teaful-devtools during development and save those precious bytes in a production build.

// Must be the first import
if (process.env.NODE_ENV==='development') {
  // Must use require here as import statements are only allowed
  // to exist at top-level.

import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

Make sure to set the NODE_ENV variable to the correct value in your build tool.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Aral Roca Gomez

🚧 💻

Steve Clay


This project follows the all-contributors specification. Contributions of any kind welcome!