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/angular-editor

Setup​

Register Kritzel in your application config:

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideKritzel } from '@kritzel/angular-editor';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideKritzel(),
  ],
};

Then use the <kritzel-editor> component in your template:

editor.component.ts
import { Component } from '@angular/core';
import { KritzelEditor } from '@kritzel/angular-editor';

@Component({
  selector: 'app-editor',
  imports: [KritzelEditor],
  template: `<kritzel-editor></kritzel-editor>`,
  styles: [`kritzel-editor { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {}

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.component.ts
import { Component } from '@angular/core';
import { IndexedDBSyncProvider, KritzelEditor, KritzelSyncConfig } from '@kritzel/angular-editor';

@Component({
  selector: 'app-editor',
  imports: [KritzelEditor],
  template: `<kritzel-editor [syncConfig]="syncConfig"></kritzel-editor>`,
  styles: [`kritzel-editor { display: block; width: 100%; height: 100vh; }`],
})
export class EditorComponent {
  readonly syncConfig: KritzelSyncConfig = {
    providers: [IndexedDBSyncProvider],
  };
}

Full Viewport Styling​

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

html,
body,
app-root {
  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>Angular 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>
    <app-root></app-root>
  </body>
</html>