Luna Crop

A sidebar image editor for VS Code that helps you finish and place images directly inside your source code.

Insert Images and Convert

Drop any image into Luna Crop's sidebar, then crop, resize, or convert it to PNG, JPEG, or WebP. When you type an <img src=" attribute in your HTML or JSX, Luna Crop shows you the correct relative path and saves the final image directly into your project's assets folder.

Remove Background

Luna Crop uses a local AI model to automatically detect and remove backgrounds from images. Everything runs on your computer.

Built-in Image Editor

Beyond AI background removal, Luna Crop includes a classic image editor for everyday tasks: crop, resize, add text labels, rotate, and convert formats. All edits are tracked with a full undo history, so you can experiment freely.

Features

• Drop any image: Drop or paste any image from your desktop or browser directly into the editor.
• Crop: Trim the image to the exact area you need.
• Resize: Prepare images for code, docs, icons, previews, app screens, and uploads.
• Background removal: Remove the background with AI or with alpha channel.
• Add text labels: Place text on top of your images for annotations, highlights, and notes.
• Compress / Convert: Convert images as PNG, JPEG, or WebP.
• Full undo session: Try crops, text, resizes, background changes and go back with Ctrl+Z or with the undo button.
• Direct image-to-code workflow: Prepare images where they are needed: HTML, components, CSS assets, docs, and project folders.
• Auto-save: Edits are saved back to the original image file by default – undo is always available if you need to revert. (Tip: duplicate the image first if you want to keep the original.)
• Overlay and merge: Combine visual parts or place one element over another.

Examples

Luna Crop fits right into your daily workflow. Use it for:

• Images for HTML pages and <img> tags
• Visuals for React, Vue, Svelte, Astro, or other UI components
• Logos, favicons, extension icons, and frontend illustrations
• README screenshots, documentation images, and pull request visuals
• Product cards, landing page sections, Open Graph images, and social previews
• App assets, UI previews, thumbnails, placeholders, and generated image outputs

Embed Images in HTML and Components

Quick example – from drop to <img> tag:

1. Drag an image into the Luna Crop sidebar.
2. Crop or resize it until it fits your layout.
3. In your HTML or JSX file type the <img src=" attribute.
4. Luna Crop shows the correct relative path; the final image is saved directly inside your project’s assets folder.

Prepare Logos and Project Assets

Trim whitespace, isolate a logo, remove a background, resize an icon, and export the image in the format your project needs.

Finish README, Docs, and Pull Request Images

Crop screenshots, remove unnecessary borders, resize large captures, and save clean visuals beside your documentation, issue notes, or pull request.

Clean Up AI Generated and Downloaded Images

AI-generated images are often close but not quite ready. Luna Crop helps with the final pass: crop, remove background, convert, or combine.

Prepare Marketing and Product Visuals

Crop product images, landing page graphics, Open Graph previews, marketplace screenshots, and quick UI visuals.

Best For

Luna Crop is a good fit for:

• Developers preparing visual assets inside VS Code
• Extension authors working with icons and screenshots
• Documentation-heavy projects
• Teams that need quick README and UI images
• People using generated images in real projects
• Frontend developers adding images to HTML and components
• Product builders preparing landing page and marketplace visuals
• Anyone who wants image finishing close to their code and project files

Requirements

• VS Code 1.80.0 or newer

Privacy and Usage

Luna Crop runs on your computer. Image editing happens locally in your IDE workflow – there is no server upload or external processing.

License

Luna Crop is free to use for personal and evaluation work. A commercial license unlocks the full feature set and supports continued development.

Purchase a License (Optional)
https://andreaspa.gumroad.com/l/luna

Bug Reports and Feedback

https://ceres-assistant.com/web/contact.php

Privacy Policy Page

https://ceres-assistant.com/web/privacy-policy.php