Luna Image Editor

A practical image editor that runs in the Visual Studio Code sidebar. It lets you prepare and save image assets without switching to another application.

Open an Ιmage

Use Add to Luna Image Editor from the active editor menu, open the Command Palette with Ctrl+Shift+P and run Add to Luna Image Editor, drag or paste an image, or use the file picker inside the editor.

Image Editing in the Sidebar

The editor includes:

• Crop and resize
• Rotate and mirror
• Image upscaling
• Text labels
• Brush and arrow drawing
• Overlay and image merging
• Color-to-alpha transparency
• Filters and image effects
• Resize images for social media, Open Graph previews, websites, and project assets
• Text extraction from images
• Full undo and redo history for the current editing session

Automatic Saving

Changes are saved automatically back to the original image file. Undo remains available during the current editing session. Duplicate the image before editing when you need to preserve the original file separately.

Formats and Conversion

• Import any image format.
• Convert and export images as PNG, JPEG, or WebP (Pro).
• Compress images for smaller project assets.
• Copy an edited image to the clipboard.
• Save a copy with a different filename or format.
• Insert its project path into the active source file.

Resize Images for Social Media and the Web

Prepare images for websites, HTML pages, social posts, documentation, and application projects without leaving VS Code.

Luna includes ready-made sizes for Instagram, Facebook, X, LinkedIn, YouTube, Google Ads, website banners, thumbnails, article images, product images, email headers, and Open Graph images.

Use the Open Graph preset to prepare og:image assets for link previews, blog posts, product pages, documentation, and websites shared on social platforms. Resize an existing project image, save the result in the format you need, and insert its path directly into your HTML, CSS, JavaScript, JSX, or documentation.

Source-Code Workflow

The editor is designed for image assets used in HTML, CSS, JavaScript, JSX, components, documentation, and extension projects. Open an asset from the Explorer, edit it in the sidebar, and insert its project path into the active source file.

Commands

• Add to Luna Image Editor (luna.addImageToCanvas): Opens the selected image in the Luna Image Editor sidebar.

Bug Reports and Feedback

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

Troubleshoot Page

https://ceres-assistant.com/web/troubleshoot-luna.php

Privacy Policy Page

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