Image Editing

Images annotated with inline-cms get a hover overlay in edit mode that allows editors to replace the image directly on the page.

Basic usage

<img inline-cms src="/hero.jpg" alt="Hero image" />

Editing flow

1. Enter edit mode via the toolbar
2. Hover over the image — a semi-transparent overlay appears with an edit icon
3. Click the overlay to open a file picker
4. Select a new image — it uploads to the InlineCMS media API
5. The image updates immediately on the page
6. Save or publish to persist the change

How it works

• The <img> element is wrapped in a positioned container
• An ImageEditOverlay component renders on top when in edit mode
• On file selection, the image is uploaded via POST /v1/media/upload
• The returned URL replaces the image src
• The URL is stored as the content field value

Media storage

Uploaded images are stored in the configured storage backend:

• Local (development): Files are saved to uploads/ in the API directory
• S3/R2 (production): Configure S3-compatible storage via environment variables

See Environment Variables for storage configuration.

Supported formats

The media upload endpoint accepts:

• JPEG / JPG
• PNG
• GIF
• WebP
• AVIF
• SVG

Maximum file size: 10MB.