Luna Paint is a VS Code extension that lets you edit raster images from within the editor, just open an image from the explorer and start editing like any other file.
⚠ This is a preview release:
- Some features you expect from an image editor may be missing or limited.
- Hot exit state may break when the extension updates as the data format gets refined.
- Images below may show older versions of the UI.
- If you hit any problems or want to request a feature, please create an issue on the repo.
Features
- Performance: The editor is built on WebGL to achieve a smooth editing experience.
- Layers and blend modes: Compose an image using multiple layers, combining them with blend modes.
- Powerful tools: A growing range of tools are available to modify images.
- Formats supported: .bmp, .ico, .jpg, .png, .webp.
- Import from clipboard: Quickly edit the image in the clipboard via ctrl/cmd+'.
- Hot exit: Support for hot exit is available for small images, just like in text files.
- Remote support: Edit images remotely in a GitHub Codespace or via the Remote WSL, SSH and Containers extensions.
- Web support: The extension works in vscode.dev and github.
The Tools window in the top left of the editor allows switching the active tool.
- The window can be hidden by hitting the
X icon and toggled via Luna's Menu, the command palette or F5.
Pencil
The Pencil tool is used to draw individual pixels.
- Use left or right click to draw freehand using the primary or secondary color respectively.
- Shift+click draws a line from the last drawn point, holding shift will show the angle of the line and which pixels will be drawn to.
- Set the Blend Mode option to be used with the pencil, or select replace to replace the color without blending.
Eraser
The Eraser tool is used to set pixels to fully transparent.
- Set the brush size to clear more than a single pixel.
Fill
The Fill tool will flood fill an area with similar colors to the pixel it was triggered on.
- Set the Flood Mode option to global in order to replace pixels across the entire image, regardless of whether they are adjacent.
- Tolerance can be set to determine how different a pixel needs to be to fill, compared to the pixel that is clicked.
Color Picker
The Color Picker tool (aka eye dropper) allows sampling a layer's individual pixels for their color.
- Change the Sampling option to average the colors over a range of pixels.
Selection, Move Selection and Move Pixels
The Selection, Move Selection and Move Pixels tools allow selecting a portion of the image/layer, modifying that selection and moving the selected pixels.
- Ctrl/cmd+a can be used to select the entire image.
- Ctrl/cmd+shift+x to crop the image to the selection.
- Dragging the handles will resize the selection or scale the pixels.
- The Move Pixels tool supports scaling the selection and expanding the canvas to the selection.
Crop
The Crop tool (c) enables cropping an image in a single action, as opposed to creating a selection and then cropping that.
Rectangle
The Rectangle tool can be used to draw a rectangle and then manipulate it within the canvas.
- Supported options include blend mode, style (fill, outline or both) and outline size.
- Hold shift to drawing a square.
- Options can be independently configured, even after drawing the rectangle.
- The rectangle dimensions and top left coordinates are shown in the status bar.
Line
The Line tool can be used to draw straight lines.
- The blend mode option is supported.
- Hold shift to draw the line to the nearest 15°.
Zoom
The Zoom tool allows zooming in and out with left and right click respectively.
- Ctrl+wheel can also be used to zoom, regardless of what the active tool is.
Palette
The Palette window lets you select the primary and secondary colors, with some basic colors available for quick access.
- In most tools, left click uses the primary color and right click uses the secondary color.
- Transparent colors display over a checkered background.
- Pressing
x will swap primary and secondary colors.
- Sliders are available to change channels quickly, the mouse wheel can be used while hovering the slider to increment/decrement by 1.
- The window can be hidden by hitting the
X icon and toggled via Luna's Menu, the command palette or F8.
Layers
The Layers window shows a preview of the image's layers and lets you modify their properties or change the active layer.
- The controls at the bottom of the window manipulate the current layer.
- The blend mode of a layer changes the way it blends with the layer(s) below.
- Layers can be hidden by clicking the checkbox.
- The window can be hidden by hitting the
X icon and toggled via Luna's Menu, the command palette or F7.
There are many commands that run on either the Layer or Image (all layers), these are accessible via Luna's Menu or the command palette:
History
The History window allows viewing and navigating through changes made to the image, it's a more visual representation of VS Code's regular undo/redo stack.
- Clicking an item in the history window will undo/redo to that point.
- The window can be hidden by hitting the
X icon and toggled via Luna's Menu, the command palette or F6.
Minimap
The Minimap window shows the image with all layers blended together on an opaque background, it can be used to navigate around the image as well as to view a preview of the overall image without zooming out.
- Move the viewport by clicking and dragging within the minimap.
- Mouse wheel will zoom the viewport in and out.
- By default stretch mode is enabled which will fill the minimap with the image, this can be turned off to view small images at actual size which is especially useful when working with pixel art as you can be zoomed fine tuning the image while still seeing a 100% view of it.
- The viewport rectangle can be toggled off.
Customization
Default image size
The image size when creating a new image can be defined in the luna.defaultImageSize settings. You may want to set this to the size of your monitor setup for example to quickly paste in screenshots.
Auto Save
Many people use auto save and it's enabled by default in GitHub Codespaces. Using it with Luna Piant has some consequences when working on larger images though as saves can be expensive (hopefully not forever, see Limitations). You may want to disable auto save if you edit larger images with this extension until a solution is worked out:
"files.autoSave": "off"
Free up memory of backgrounded tabs
Disabling luna.retainContextWhenHidden will dispose of editor contexts, slowing down tab restoring while freeing up memory. This is enabled by default because files where hot exit are disabled will lose changes when switching tabs. The recommendation for now is to set this to false if you work exclusively in small images.
Avoiding conflicts in keybindings
To avoid conflicts between Luna Paint's keybindings and user defined keybindings, it's recommended to use the when clause luna:focused && activeCustomEditorId == 'luna.editor' or the inverse. For example:
// Only enable this keybinding when Luna Paint is not focused, such that it doesn't conflict with
// the default crop to selection keybinding.
{
"key": "ctrl+shift+x",
"command": "workbench.action.terminal.kill",
"when": "!luna:focused && activeCustomEditorId != 'luna.editor'"
}
// Only enable this keybinding when Luna Paint is focused
{
"key": "e",
"command": "luna.image.expandCanvasToSelection",
"when": "luna:focused && activeCustomEditorId == 'luna.editor'"
}
Limitations
Loading and Saving Files
The loading and saving of png, jpg and bmp images is currently handled by Electron/Chromium, as such the options for tweaking/optimizing how the images get encoded is limited. This also means that while the editor does support layers, saving an image that supports layer is not currently possible. More options for file formats and encoding options is planned for the future.
Layers causing rendering issues
On some machines (eg. my macbook), rendering messes up when there are more than 2 layers.
VS Code Custom Editors
Luna Paint is built on VS Code's custom editor's API. Below are some of the limitations in the API.
- The tab may lock up when doing busy work (filling, resizing, saving, updating minimap, etc.), the editor was built to support workers in order to keep the UI thread responsive, but it needed to be turned off until microsoft/vscode#87282 is done.
- Large images can take a while to load, this is because of the slow transfer speed and lack of ArrayBuffer support of postMessage, see microsoft/vscode#79257.
- Hot exit is only enabled by default for relatively small images, this is largely due to the slow transfer speed and lack of workers mentioned above.
- Hot exit will prevent closing with an error about dirty custom editors if you make a change and switch away from the tab.
"retainContextWhenHidden": true works around this, the proper fix is microsoft/vscode#113507.
- Auto save has problems with custom editors and large files microsoft/vscode#115404.
