Skip to main content
Version: 1.x

Getting Started

Plugins are at the heart of Vime because everything outside of the core is built as one. Basically plugins are Svelte components that implement the plugin interface and add some functionality/feature to the player. Plugins can be interacted with through the props, methods and events they expose.

Installing Plugins#


You can get started quickly by simply using the Boot plugin which will install all Vime plugins. It also provides the option of turning off plugins you don't need, see the Boot plugin page for more information.


If you want more control then you can pick and use only what you need.

import { Player, ActionDisplay, Keyboard, Tooltips } from '@vime-js/complete';
const target = document.getElementById('player-target');
const player = new Player({
props: {
plugins: [ActionDisplay, Keyboard, Tooltips],


If you want to dynamically add/remove plugins you can use the PluginsManager.

import { ActionDisplay, Keyboard, Tooltips } from '@vime-js/complete';
// ...
const pluginsManager = player.getPluginsManager();
.addPlugins([ActionDisplay, Keyboard, Tooltips])
.then([actionDisplay, keyboard, tooltips] => {
// ...
// ...
.then(() => {
// ...

You can still do this with the plugins prop, but the manager has a much better interface for this.

Interacting with Plugins#

All Vime plugins are attached to the player and can be accessed via their plugin ID. All Vime plugins follow the naming convention of v{PluginName}.

  • Keyboard = vKeyboard
  • ActionDisplay = vActionDisplay
  • Controls = vControls

Simple Example#

// ...
player.$on('mount', () => {

Advanced Example#

import { PlayerEvent, Keyboard } from '@vime-js/complete';
// ...
player.$on(PlayerEvent.PLUGIN_MOUNT, e => {
const { id, plugin } = e.detail;
if (id === Keyboard.ID) {
// Keyboard plugin mounted.
player.$on(PlayerEvent.PLUGIN_DESTROY, e => {
const id = e.detail;
if (id === Keyboard.ID) {
// Keyboard plugin destroyed.