Official Flame demo
Built-In Image & SVG Editors in Flame IDE
See image transforms, resizing and optimization, visual SVG path editing, and source-level control without leaving the repository workspace.
Image and SVG editor for developers
Image and SVG editor for developers: Edit assets inside your IDE.
Resize and optimize raster images, edit SVG paths visually, switch to source for precise changes, and keep the result in the same Git workflow.
The problem
Small asset fixes should not become a tool-switching project.
A developer often needs an exact output dimension, smaller WebP, corrected crop, adjusted icon path, or one SVG attribute before a UI change can ship.
Opening an external design application breaks repository context and makes it easy to save the wrong format, overwrite the source asset, or miss the code change that depends on it.
Asset changes with project contextOpen, edit, save, and continue in the same workspace.
How Flame solves it
Move from repository file to reviewable asset change.
- 01
Open the repository asset
Select a raster image or SVG from the project or visual folder view without exporting it to a separate design workspace.
- 02
Choose visual or source editing
Use image controls for bitmap operations, SVG path tools for geometry, or source mode for exact markup and attributes.
- 03
Make the implementation change
Crop, resize, optimize, adjust a path, repair a curve, or change the SVG structure required by the component.
- 04
Save to the intended format
Write the change in place or save a new PNG, JPEG, or WebP with the dimensions and quality the application needs.
- 05
Review it with the code
Keep the edited asset in the repository change set beside the CSS, component, tests, and Git history it belongs to.
Raster images
Prepare PNG, JPEG, and WebP assets for the application.
- Rotate left or right and flip horizontally or vertically
- Crop to the visible content or required aspect ratio
- Resize with linked dimensions
- Adjust JPEG or WebP output quality
- Save in place or create a new output file
SVG files
Edit vector geometry without giving up source-level control.
- Select paths and move anchors or curve handles
- Delete anchors or split a path near a selected point
- Toggle straight segments and curves
- Switch between rendered preview and SVG source
- Save the vector back to the repository
Find the right asset visuallyBrowse images and SVGs as thumbnails before opening the editor.
Asset discovery
Use a visual folder when filenames are not enough.
Switch between grid, list, details, and preview layouts to identify an asset by appearance. Sort and filter the directory, inspect file information, then open the selected image or SVG directly.
For the page that consumes the asset, use AI browser debugging to inspect the rendered result and capture a screenshot after the change.
Product walkthrough
Watch raster and SVG editing inside Flame.
FAQ
Image and SVG editor questions
Finish the asset change where you implement it.
Download Flame to edit raster images and SVGs without breaking the code, browser, and Git workflow around them.
Free to use on macOS, Windows, and Linux.