ng-whiteboard is a feature-rich, modular, and flexible whiteboard library for Angular. Designed for ease of use, performance, and a seamless drawing experience. It provides essential drawing tools and features with a scalable architecture.

🔗 Live Demo

• 🎨 SVG-based rendering for high-quality visuals
• ⚡ Optimized performance for smooth interactions
• 📦 Modular, tree-shakable, and lightweight architecture
• 🛠️ Comprehensive Public API via WhiteboardService and component bindings
• 📏 Undo/Redo, Zoom, and Save functionalities
• 🖊️ Multiple drawing tools (pen, shapes, text, etc.)
• 🏗 Future-proof and scalable design

Install via yarn:

yarn add ng-whiteboard

or npm:

npm install ng-whiteboard

Import the component directly in your standalone component:

import { Component } from '@angular/core';
import { NgWhiteboardComponent } from 'ng-whiteboard';

@Component({
  selector: 'my-component',
  imports: [NgWhiteboardComponent],
  template: '<ng-whiteboard></ng-whiteboard>',
})
export class MyComponent {}

Import the component in your app.module.ts:

import { NgWhiteboardComponent } from 'ng-whiteboard';

@NgModule({
  imports: [NgWhiteboardComponent],
  // other imports
})
export class AppModule {}

<ng-whiteboard></ng-whiteboard>

import { Component, OnInit } from '@angular/core';
import { WhiteboardService } from 'ng-whiteboard';

@Component({
  selector: 'app-whiteboard-container',
  templateUrl: './whiteboard-container.component.html',
  styleUrls: ['./whiteboard-container.component.css'],
})
export class WhiteboardContainerComponent implements OnInit {
  whiteboardOptions: WhiteboardOptions = {
    backgroundColor: '#fff',
    strokeColor: '#2c80b1',
    strokeWidth: 5,
  };

  constructor(private whiteboardService: WhiteboardService) {}

  ngOnInit() {
    const savedData = localStorage.getItem('whiteboardData');
    if (savedData) {
      this.data = JSON.parse(savedData);
    }
  }

  onDataChange(data: WhiteboardElement[]) {
    localStorage.setItem('whiteboardData', JSON.stringify(data));
  }

  clearBoard() {
    this.whiteboardService.clear();
  }
}

<ng-whiteboard (dataChange)="onDataChange($event)" [options]="whiteboardOptions"></ng-whiteboard>

• addElement(element: WhiteboardElement) Adds a new element (e.g., shape, text) to the whiteboard.
• addImage(image: string, x?: number, y?: number) Adds an image to the whiteboard at a specified position.
• removeElements(ids: string[]) Removes elements from the whiteboard by IDs.
• updateElement(element: WhiteboardElement) Updates an existing element with new properties.
• updateSelectedElements(partialElement: Partial<WhiteboardElement>) Modifies only specific properties of the currently selected element.
• selectElements(elementsOrIds: WhiteboardElement | WhiteboardElement[] | string | string[]) Select element(s) on the whiteboard.
• deselectElement(elementOrId: WhiteboardElement | string) Deselects a specific element on the whiteboard.
• toggleSelection(elementOrId: WhiteboardElement | string) Toggle the selection of an element on the whiteboard.
• selectAll() Selects all elements currently present on the whiteboard.
• clearSelection() Clears any currently selected elements on the whiteboard.

• clear() Clears all elements from the whiteboard.
• undo() Reverts the last action.
• redo() Restores the last undone action.
• save(format = FormatType.Base64, name = 'New board') Saves the current whiteboard state in the specified format (e.g., Base64, JSON, SVG).

• setActiveTool(tool: ToolType) Sets the current drawing tool (e.g., pen, eraser, shape).

• setCanvasDimensions(width: number, height: number) Sets the width and height of the whiteboard canvas.
• setCanvasPosition(x: number, y: number) Moves the canvas to a specific position.
• centerCanvas() Centers the whiteboard canvas within the viewport.
• fullScreen() Toggles full-screen mode for the whiteboard.
• toggleGrid() Enables or disables the background grid for alignment.
• dispatchBatch(actions: WhiteboardAction[]) Dispatches a batch of actions to the whiteboard.

The NgWhiteboardComponent emits the following events to notify about changes and interactions.

• ready Emitted when the whiteboard is fully initialized and ready for use.
• destroyed Emitted when the whiteboard is destroyed, allowing for cleanup.

• drawStart Triggered when a user starts drawing on the whiteboard.
• drawing Emitted continuously while the user is drawing.
• drawEnd Triggered when the user stops drawing.

• undo Emitted when an undo action is performed.
• redo Emitted when a redo action is performed.
• clear Triggered when the whiteboard is cleared.
• dataChange Emitted when the whiteboard's internal data state changes.
• save Triggered when the whiteboard state is saved.

• elementsAdded Emitted when a new element is added to the whiteboard.
• elementsUpdated Triggered when an existing element is modified.
• elementsSelected Emitted when an element is selected.
• elementsDeleted Triggered when an element is removed.

• imageAdded Emitted when an image is added to the whiteboard.

• selectedToolChange Triggered when the active drawing tool is changed.
• configChanged Emitted when the whiteboard configuration settings are updated.

We welcome contributions! Feel free to submit issues, feature requests, or pull requests.

This project is licensed under the MIT License.