ImageEditor

An inline image editor with cropping (drag-handle selection with dimmed overlay and rule-of-thirds grid), rotation, freehand drawing with integrated color picker, inline text annotations, pinch-to-zoom with pan, undo/redo, reset-to-original, and save/export to PNG/JPEG/WEBP. Every feature can be toggled on or off, and the default toolbar can be replaced with a custom template.

• 
• 

Frameworks

.NET MAUI

Blazor

Screenshots

Editor	Crop Mode

Basic Usage

<shiny:ImageEditor Source="{Binding ImageSource}"
                   CurrentToolMode="{Binding ToolMode}"
                   AllowCrop="True"
                   AllowRotate="True"
                   AllowDraw="True"
                   AllowTextAnnotation="True"
                   DrawStrokeColor="{Binding DrawColor}"
                   DrawStrokeWidth="3"
                   SaveCommand="{Binding SaveCommand}" />

Features

• Move mode — Default tool. Pinch-to-zoom with origin tracking, pan when zoomed, double-tap to toggle zoom in/out. Uses GPU-accelerated native view transforms for smooth interaction.
• Crop — Dedicated crop toolbar with Apply/Cancel buttons. Visible initial crop area with 8 drag handles (4 corners + 4 midpoints) and a rule-of-thirds grid overlay. Areas outside the crop are dimmed. Zoom/pan is reset when entering crop mode.
• Rotate — 90-degree increments or arbitrary angles. Each rotation is a separate undoable action.
• Freehand drawing — Draw strokes on the image with configurable color and width. Drawing is constrained to the image bounds. Integrated color picker button on the toolbar. Each completed stroke is one undoable action.
• Text annotations — Tap the image to place an inline text entry directly on the canvas. Configurable font size and color.
• Undo/redo — Every edit action is pushed to a stack. Undo moves the last action to a redo stack; redo re-applies it. New actions clear the redo stack.
• Reset — Clears all actions and restores the original image.
• Save — Bind SaveCommand to receive an EditedImage object. Call ToStreamAsync(format, quality, width, height) to export as PNG, JPEG, or WEBP at any resolution. The Save button only appears in the toolbar when SaveCommand is bound.
• Image border — A subtle border around the image shows the drawable surface area.
• Toolbar — Default toolbar shows buttons for each enabled feature, plus undo/redo/reset/save. Setting AllowX=false hides the corresponding button. Replace the entire toolbar with ToolbarTemplate for a fully custom UI.

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin