FeaturesKeybindings
Previous

Keybindings Storage

Guide users through keybindings storage options.

Local Storage (default)

By default, keybindings are stored in local storage. No need to configure anything.

Database Storage

If you want to store keybindings in the database, you can use the KeybindingsStorageProvider in combination with the @kit/settings package.

Setup

Copy paste the following code under /api/keybindings/[[...path]]/route.ts.

app/api/keybindings/[[...path]]/route.ts
import { createKeybindingsHandler } from '@kit/keybindings/storage/settings-storage/routes';
import { settingsModel } from '~/config/settings.config';
 
export const GET = createKeybindingsHandler(settingsModel);
export const POST = createKeybindingsHandler(settingsModel);
export const DELETE = createKeybindingsHandler(settingsModel);
 

This will set up the API routes for the keybindings storage.

Create a new keybindingsStorage instance and pass it to the KeybindingsProvider.

import { KeybindingsProvider } from '@kit/keybindings/ui';
import { keybindingsModel } from '~/config/keybindings.config';
import { DatabaseKeybindingsStorage } from '@kit/keybindings/storage/settings-storage/handler';
 
const keybindingsStorage = new DatabaseKeybindingsStorage();
 
export function DashboardProvider({ children }: { children: React.ReactNode }) {
    return (
        <KeybindingsProvider model={keybindingsModel} storage={keybindingsStorage}>
            {children}
        </KeybindingsProvider>
    );
}
 

Add the KEYBINDINGS_SETTING_NAME to the settingsModel.

config/settings.config.tsx
import { KEYBINDINGS_SETTING_NAME, KEYBINDINGS_SETTINGS_SCHEMA, } from '@kit/keybindings/storage/settings-storage/settings'; import { settingsModel } from '~/config/settings.config'; export const settingsModel = createSettingModel( 'your-settings-id', getDBClient, { // Your existing settings... [KEYBINDINGS_SETTING_NAME]: { schema: KEYBINDINGS_SETTINGS_SCHEMA, storage: 'user_settings', // we are using the user_settings storage provider }, // Your existing settings... }, {}, // ui config );

Now keybindings will be stored in the user_settings table.

API Reference

KeybindingsStorage

PropTypeDefault
getUserKeybindings*
function
setUserKeybinding*
function
resetKeybinding*
function
resetAllKeybindings*
function

How is this guide?

Last updated on 10/17/2025