Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Visual Builder

The NgStarter Angular Image Designer component lets you provide a full canvas-based image composition editor with layers, assets, text, backgrounds, effects, and snapshots. Use when users need to create or customize an image by composing multiple layers such as text, photos, uploaded assets, shapes, patterns, gradients, backgrounds, effects, opacity, typography, fit, flip, lock, and resize presets. It includes examples for Image Designer.

Image Designer

Image Designer is a full visual editor for composing an image on a canvas. Use it when users need to build a design from layers, text, photos, uploaded assets, shapes, backgrounds, patterns, gradients, effects, and resize presets.

The editor can load and emit an ImageDesignerSnapshot, accept image sources through assetsDataSource and photosDataSource, and handle uploads with uploadFn. It is intended for product features such as banner designers, social image builders, thumbnail editors, promotional card creators, and template-based creative tools.

Do not use Image Designer for simple image viewing, zoom inspection, crop-only flows, resize-only flows, placeholders, upload previews, color picking, or simple avatar/banner settings. Use ImageViewer, ImageZoomViewer, Crop, ImageResizer, ImagePlaceholder, ColorPicker, or a normal form for those cases.