NGXS storage plugin for Electron, that helps you to persist your store data in files.

Usage no npm install needed!

<script type="module">
  import ngxsElectronStorage from '';


npm version


This @NGXS storage plugin helps you to persist your store data in files.

It will persist any changes in your store automatically. It does check for changes and allows debouncing of file writing (see Usage).

More on how storage plugins work: Storage -


npm i ngxs-electron-storage
  imports: [
  providers: [
      provide: STORAGE_ENGINE,
      useClass: ElectronStorageEngine


You can pass a configuration object in the forRoot method.

interface ElectronStorageOptions {
  fileExtension?: string; // the file extension
  location?: string; // the location to store the files 
  debounce?: number; // you can debounce the IO process of writing the file (in milliseconds)
  debounce: 0, 
  location: "~",
  fileExtension: "json"

If your given location starts with a ~ it will be replaced by the userData folder from electron: ( ||'userData');

So you can write { location: "~/data"} to store your files in %AppData%\Roaming\your-app\data.

The plugin will ensure that the location exists once at the start and creates the directory if necessary.


You can inject a ElectronStorageService in your components to have access to the store objects, which represent your files.

Each store object exposes a persistNotifications$ observable, which emits notifications with the store name and the serialized state. The service itself also exposes a persistNotifications$ observable, which combines all notifications of all stores.