Configuration
Shape the editor with inputs: choose which tools and filters appear, theme the whole UI from three colors, and control the canvas size — all without forking the component.
Tools & filters
Resolution order, easiest to most precise: mode sets the default set, tools (if given) replaces it as an explicit allowlist in your order, then disabledTools is subtracted.
Filters follow the same idea via filters: an explicit AspFilter[], the literal 'all' (every Fabric filter), or null for the mode default.
<!-- 1. mode default, minus filters and sticker -->
<asp-image-editor mode="advanced" [disabledTools]="['filters', 'sticker']" />
<!-- 2. a bespoke rail (order preserved) -->
<asp-image-editor [tools]="['crop', 'rotate', 'text', 'shapes']" />
<!-- filters: explicit list, 'all', or null for the mode default -->
<asp-image-editor mode="advanced" [filters]="['brightness', 'contrast', 'grayscale']" />
<asp-image-editor mode="advanced" [filters]="'all'" />Theming
Three inputs derive the entire UI palette at runtime, with guaranteed WCAG AA text contrast. Set them to match your brand in light or dark — no extra config.
The derived values are scoped CSS custom properties on the editor root. Override any single token in your own CSS — e.g. set --asp-radius-md or --asp-accent on the asp-image-editor selector. See the override tab for the exact syntax.
<asp-image-editor
baseColor="#f4f6f9"
accentColor="#1f6feb"
themeMode="light"
/>Canvas size & responsive
width and height accept px, %, vh or any CSS length / calc(). A per-mode minimum is always enforced so the toolbars never collapse, and the editor adapts to its own width via container queries.
<!-- px | % | vh | calc() — a per-mode minimum is always enforced -->
<asp-image-editor width="100%" height="70vh" />
<asp-image-editor height="calc(100vh - 120px)" />