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, line and arrow drawing, inline text annotations with font family and font size selection, 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.
• Line & arrow drawing — Draw straight lines or arrows between two points with configurable color and width. Toggle between Line and Arrow modes in the toolbar.
• Text annotations — Tap the image to place an inline text entry directly on the canvas. Configurable font size, color, and font family. Enable AllowFontSelection and AllowFontSizeSelection to show font picker buttons in the toolbar.
• Font selection — When enabled, a FontPickerButton appears in the toolbar during text mode, allowing users to choose from AvailableFonts. A FontSizePickerButton can also be shown for size selection.
• 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