Skip to main content

Quick Start

The following guide gets you a full Kritzel editor setup in under five minutes.

Installation​

Run the following command to install the Kritzel editor in your project.

npm install @kritzel/vue-editor

Setup​

Render Kritzel in your component:

Editor.vue
<script setup lang="ts">
import { KritzelEditor } from '@kritzel/vue-editor'
</script>

<template>
  <KritzelEditor style="display: block; width: 100%; height: 100vh" />
</template>

This renders the editor with all the default UI elements such as the toolbar, the workspace manager, the more menu, and the zoom control panel.

Optional Enhancements​

Persisting Canvas State​

By default, the editor uses an empty sync provider list, so canvas state is reset on reload. To persist objects locally across page reloads, configure syncConfig explicitly with IndexedDBSyncProvider.

For provider behavior details and persistence guidance, take a look at Persistence.

Editor.vue
<script setup lang="ts">
import { IndexedDBSyncProvider, KritzelEditor, type KritzelSyncConfig } from '@kritzel/vue-editor'

const syncConfig: KritzelSyncConfig = {
  providers: [IndexedDBSyncProvider],
}
</script>

<template>
  <KritzelEditor :syncConfig="syncConfig" style="display: block; width: 100%; height: 100vh" />
</template>

Full Viewport Styling​

To ensure the Kritzel editor occupies the entire viewport and prevents unwanted scrolling, add the following CSS to your global stylesheet, for example styles.css:

html,
body,
#app {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
}

Mobile Viewport Meta Tag​

For optimal rendering and responsiveness on mobile devices, add this meta tag within the head section of your index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue App</title>
    <base href="/">
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>