Local Storage (default)
By default, keybindings are stored in local storage. No need to configure anything.
Local storage is not persistent across devices and is reset when the user clears the browser data.
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
.
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
.
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
Prop | Type | Default |
---|---|---|
getUserKeybindings* | function | |
setUserKeybinding* | function | |
resetKeybinding* | function | |
resetAllKeybindings* | function |
How is this guide?
Last updated on 10/17/2025