Devtools

NOTE: Once LiveStore is open source, the devtools will be a sponsor-only benefit.

Features

Real-time data browser with 2-way sync
Query inspector
Eventlog browser
Sync status
Export/import
Reactivity graph / signals inspector
SQLite playground

Adapters

`@livestore/adapter-web`:

Requires the @livestore/devtools-vite package to be installed and configured in your Vite config:

import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct
UserConfig
object, or a function that returns it.
The function receives a
ConfigEnv
object.
defineConfig } from 'vite'

import { const livestoreDevtoolsPlugin: (options: PluginOptions) => Plugin
livestoreDevtoolsPlugin } from '@livestore/devtools-vite'

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct
UserConfig
object, or a function that returns it.
The function receives a
ConfigEnv
object.
defineConfig({
  // ...
  UserConfig.plugins?: PluginOption[]
Array of vite plugins to use.
plugins: [function livestoreDevtoolsPlugin(options: PluginOptions): Plugin
livestoreDevtoolsPlugin({ PluginOptions.schemaPath: string | readonly string[]
schemaPath: './src/livestore/schema.ts' })],
})

The devtools can be opened in a separate tab (via e.g. `localhost:3000/_livestore/web). You should see the Devtools URL logged in the browser console when running the app.

Chrome extension

You can also use the Devtools Chrome extension.

Please make sure to manually install the extension version matching the LiveStore version you are using by downloading the appropriate version from the GitHub releases page and installing it manually via chrome://extensions/.

To install the extension:

Unpack the ZIP file (e.g. livestore-devtools-chrome-0.3.0.zip) into a folder on your computer.
Navigate to chrome://extensions/ and enable Developer mode (toggle in the top-right corner).
Click “Load unpacked” and select the unpacked folder or drag and drop the folder onto the page.

`@livestore/adapter-expo`:

Requires the @livestore/devtools-expo package to be installed and configured in your metro config:

// metro.config.js
const { const getDefaultConfig: any
getDefaultConfig } = var require: NodeJS.Require
(id: string) => any
Used to import modules, JSON, and local files.
@since ― v0.1.13
require('expo/metro-config')
const { const addLiveStoreDevtoolsMiddleware: any
addLiveStoreDevtoolsMiddleware } = var require: NodeJS.Require
(id: string) => any
Used to import modules, JSON, and local files.
@since ― v0.1.13
require('@livestore/devtools-expo')

const const config: any
config = const getDefaultConfig: any
getDefaultConfig(var __dirname: string
The directory name of the current module. This is the same as the
path.dirname() of the __filename.
@since ― v0.1.27
__dirname)

const addLiveStoreDevtoolsMiddleware: any
addLiveStoreDevtoolsMiddleware(const config: any
config, { schemaPath: string
schemaPath: './src/livestore/schema.ts' })

var module: NodeJS.Module
A reference to the current module.
@since ― v0.1.16
module.NodeJS.Module.exports: any
The module.exports object is created by the Module system. Sometimes this is
not acceptable; many want their module to be an instance of some class. To do
this, assign the desired export object to module.exports.
@since ― v0.1.16
exports = const config: any
config

You can open the devtools by pressing Shift+m in the Expo CLI process and then selecting @livestore/devtools-expo which will open the devtools in a new tab.

`@livestore/adapter-node`:

Devtools are configured out of the box for the makePersistedAdapter variant (note currently not supported for the makeInMemoryAdapter variant).

You should see the Devtools URL logged when running the app.