Skip to content
invokey

invokey

A svelte library to handle keyboard shortcuts!
Getting started Github

Main features

Section titled “Main features”

Easy to use

Use just one hook to bind your key combination to a component.

<script lang="ts">
  import { useCombination } from '@invokey/svelte';


useCombination(
['ctrl+k', 'meta+k'],
(event, shortcut) => {
console.log('Combination matched:', shortcut);
});


</script>

Components support

Or use a the component variant to display content when key combination is matched

<script lang="ts">
  import { Combination } from '@invokey/svelte';
</script>


<Combination
  combinations={['ctrl+a']}
>
  Content shown when Ctrl+A is pressed
</Combination>

Supports sequence code

Create complex keyboard sequences like Konami code or game combos with ease.

<script lang="ts">
  import { Sequence } from '@invokey/svelte';
</script>


<Sequence sequences="i>n>v>o>k>e>y">
  Content shown when sequence is entered
</Sequence>
<script lang="ts">
  import { useSequence } from '@invokey/svelte';


useSequence(
"i>n>v>o>k>e>y",
() => {
console.log('Got invoked!');
});
</script>

Dynamically enable or disable bindings

You can enable and disable bindings during runtime.

<script lang="ts">
  import { Combination } from '@invokey/svelte';


let isEditing = $state(false);
</script>


<button on:click={() => (isEditing = !isEditing)}>
  {`Go to ${isEditing ? 'View' : 'Edit'} mode`}
</button>
<Combination
  combinations={['ctrl+s']}
  enabled={isEditing}
>
  Content won't show even if Ctrl+S
  is pressed out of edit mode
</Combination>