Syncfusion Blazor Image Editor

This is a comprehensive wrapper for Syncfusion's commercial Blazor image editor component. You get the full suite: cropping, rotation, filters, freehand drawing, text and shape annotations with z-order control, and newer features like redaction (blur or pixelate sensitive areas) and decorative frames. The skill documentation is thorough, covering everything from basic setup through events and toolbar customization. It's overkill if you just need simple cropping, but if you're building something like a photo editor, document redaction tool, or any app where users need robust image manipulation in the browser, this gives you a production-ready component. Just note it requires Syncfusion licenses for commercial use.

skills.sh installs: 373
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-image-editor --agent claude-code

Installs into .claude/skills of the current project.

Files

Implementing the Syncfusion Blazor Image Editor Component

The Syncfusion Blazor Image Editor is a powerful, feature-rich component for building image editing capabilities into your Blazor applications. It provides a complete toolkit for image manipulation, annotation, transformation, and export with an intuitive UI and extensive API.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation of NuGet packages (Syncfusion.Blazor.ImageEditor, Syncfusion.Blazor.Themes)
Blazor WebAssembly and Web App setup
Import namespaces and register services
Add stylesheet and script references
Render the basic component
NEW: Component properties (AllowUndoRedo, IsReadOnly, Enabled, Theme, CssClass, EnableImageSmoothing)

SKILL.md on GitHub