Configuration Overview

DrawerJs can be fully customized.

Base Settings, Appearance, and Behavior

  • Default settings that are used if no settings are specified
  • Initial size of the DrawerJs container
  • Border styles of the DrawerJs container for both edit mode and image mode
  • Tools and shapes listed in the toolbar
  • Appearance of tooltips
  • Localization via separate language files
  • Features like resizing, fullscreen, borders for shapes, Color, and float mode
  • Appearance and size of toolbars, object controls, context menus, and resize controls
  • How content gets saved
  • Initially displayed image
  • Default Plugin used when activating edit mode
  • Position of context menus
  • Custom color picker or HTML5 color picker


  • Layering
  • Colors and transparency
  • Border styles and colors
  • Default brush sizes of freehand drawers and eraser
  • Context menus for moving, duplicating, and removing elements
  • Default colors for pencil brushes, shapes, and borders
  • Centering mode for shapes
  • Usable font families and default fonts for text elements
  • Maximum size and automatic scaling of inserted images