Rhomlet help

Getting started

Rhomlet is a pixel art editor for sprites, animation, and isometric artwork. Artwork, imported files, palettes, and clipboard images are processed on your device and are not uploaded. Loading the website still sends ordinary connection information to the host; see the privacy notice. Short walkthroughs for one asset live in the isometric, normal map, and sprite sheet workflow guides.

1. Choose File > New project to create an indexed canvas, or open a project or import an image.
2. Pick a color and draw with Pencil. Use the toolbar above the canvas for the active tool's options.
3. Add layers in the Layers panel and frames in the Timeline.
4. Use File > Save project for an editable backup. Use Export for images and animation.

Help opens in its own tab. Return to your existing editor tab to continue working.

Drawing and colors

Color opacity applies to drawing tools: Pencil, Fill, and Line replace pixels with the selected RGBA color rather than compositing it over existing pixels. Sampling a color preserves its alpha. GPL export discards alpha because GPL is RGB-only. Left-click draws with Primary; right-click draws with Secondary. Swap colors with < or the swap button. Alt-click samples a color; Alt+right-click sets Secondary. On touchscreens, use the palette's Primary/Secondary target buttons.

Shapes (U) includes Isometric diamond and Isometric ramp. For a diamond, drag from one tip toward its opposite; the starting tip stays fixed. A ramp uses the ordinary shape bounding box: width sets its square footprint and vertical distance sets its rise. Choose one of four Uphill ground-plane directions in the Shapes panel. Hold Alt to draw from the center. Choose Filled or Outline in the Shapes panel's Style control. Line has Isometric, Freehand, Straight, and Isometric curve modes. The toolbar button restores the last mode; existing line shortcuts select their corresponding modes. Isometric curve (Shift+U): set Bend in the Line panel, then drag an isometric span. Zero is straight; negative and positive values curve to opposite sides of the ground plane. The curve follows the project isometric ratio. Drag with Place on release to commit immediately, or choose Edit before placing to adjust endpoint handles and Bend before Apply / Enter; Esc cancels the pending curve. Brush size, shape, selection, and normal painting also apply.

Pencil, Freehand line, Eraser, Line, Isometric line, Isometric curve, and Color Replacer share a 1–32 px brush size and square, round, diamond, isometric, diagonal /, or diagonal \ footprint. Fill works on a connected matching-color region. Optional Preview in the Fill options bar shows that result on hover using the primary color, indexed slot, or selected normal; it is off by default and independent of brush cursor style. Hover never edits the document, and pressing a pointer button hands off to the existing fill gesture, including drag through additional regions and right-button secondary paint. Touch without hover keeps press, drag, and release. Primary and Secondary are paint slots: each can be a solid color or a shared gradient (linear or radial; Steps, Dither, or Smooth). Open a well to edit it; Apply stores the slot without adding artwork undo. Ordinary palette picks, the eyedropper, and Alt sampling select Solid and keep the last gradient for later. Gradient placement lives in the Gradient tab: Fit each mark adapts to each stroke, shape, or fill region, while Fixed on canvas keeps one field across the artwork and lets you place it directly on the canvas. When editing a shape, square resize handles and round gradient handles work at the same time. Drawing tools share that paint; Color Replacer still uses identity-based Replace / Ramp step / Ramp map. Drawing tools respect the active layer and selection. Pixel perfect is available for a 1 px Pencil. Freehand line (Shift+B) smooths pointer wobble and removes doubled corners automatically, with crisp pixel edges. Its preview updates as you draw; release to commit the stroke.

Color Replacer (R) paints through the same 1–32 px brush footprint and only changes matching pixels on the active cel, clipped by the selection. It edits artwork only; Paint normals and Lighting preview are disabled with a status message. Open its settings for three modes. Replace uses an explicit From → To pair (right-click reverses it) or Sample once, where the first click samples the raw active-cel color. RGBA matching uses a 0–255 per-channel tolerance; indexed matching uses exact slots. Fully transparent pixels are never replaced, and RGBA writes keep the original alpha. Ramp step moves members of one ordered ramp toward Left or Right by a step, clamping at the ends with no wrapping. Each ramp holds up to 10 colors. Ramp map maps one ordered ramp onto another, showing the actual pairs first. Unequal lengths merge shades; reversing the mapping is not an inverse, so use Undo to restore. Pick samples the next click on the canvas or a palette swatch; Esc cancels. Color Replacer settings, including From/To and ramps, are kept in browser preferences across refresh. Each pointer stroke transforms a pixel once from the stroke-start snapshot. Indexed slots go stale if the palette changes until you confirm or rebuild them.

Tap a tool shortcut to switch tools; hold it for temporary use. Alt+wheel cycles Primary through the palette; Alt+Shift+wheel cycles Secondary. Palette actions import JASC PAL, GIMP GPL, HEX/TXT, Aseprite palettes, and colors from images, or export GPL. Drag swatches to reorder them.

Palette files may contain 1–4096 RGB colors and must be under 16 MB. The library holds up to 64 palettes. Image extraction accepts up to 4,194,304 pixels, ignores transparent pixels, preserves up to 256 exact colors, and reduces larger color sets to a representative palette. Indexed projects show one document palette. RGBA projects keep a working-palette tray that is saved in .rhomlet files and supports undo; editing a tray swatch does not recolor pixels. The library stores reusable copies in browser preferences.

Indexed color is the default for new projects: pick a template such as Woodland, or convert an RGBA project from the Palette dock with a before/after preview. Indexed artwork references 2–256 palette slots, including reserved transparent slot 0. Editing a slot recolors all its pixels across layers and frames. Identical-colored slots remain independent. Primary/Secondary wells choose the assignment target, including on touchscreens. Shift-click or right-click always assigns Secondary. Alt+wheel cycles actual slots; the picker samples the active layer's slot. Double-click or Edit changes a slot; + duplicates it; Delete asks for a replacement. Drag to reorder without changing the artwork's look. Indexed and RGBA palettes share the same library: save a named copy, manage presets, import files or images, and export GPL. Loading onto an indexed document opens Replace palette so you can keep slot assignments or match existing colors. RGBA is available in New project for unrestricted colors; convert back when you need a fixed palette.

Shading, antialiasing, merges, and cross-palette paste use the nearest palette color, including alpha, without adding slots. Alpha lock keeps a pixel unchanged when a new slot would change its alpha. Normal maps retain their full precision. Convert to RGBA for unrestricted colors. Color-mode changes and palette edits are undoable.

Shapes include isometric diamond, ramp, pyramid, dome, ring, circle, sphere, box, cone, cylinder, rectangle, and ellipse. Ramps are solid wedges with a square isometric footprint, inclined top, triangular sides, and a vertical high end. They support filled or brush-width outlines, baked shading, and generated normals. Edge-join width applies to isometric diamonds and boxes; ramps use fixed 2-pixel joins. Shift constrains proportions; Alt draws from the center. Editable placement lets you adjust a pending shape before applying it. Enter applies and Escape cancels. Shapes, Line and 3D primitives share a non-modal settings panel. Shapes holds geometry, style, thickness, placement, edge joins and shading. Line holds mode, placement and curve bend; its thickness and footprint stay in the context bar. Use the minus/plus icon to collapse or expand it. On desktop, drag its title to move it within the canvas area; double-click the title to reset its position. Compact layouts keep it docked. Each tool's settings button reopens the panel after closing it, and Shading & normals can be collapsed as a group.

3D primitive (D) places a cuboid with independent width, height, and depth. Click the canvas to place it, drag to move it, and right-drag or Alt+drag to rotate. The 3D panel sets numeric X/Y/Z rotation with angle snapping, position, scale, and Isometric (from the guide ratio), Orthographic, or Perspective projection. Appearance controls choose the base color or per-face colors, light direction, shading, silhouette or face-edge outlines, and whether a normal map is written alongside the pixels. The preview is rendered at artwork resolution on the active layer and stays editable until you Apply (Enter), which bakes it as a single undoable step; Cancel (Esc) leaves the artwork unchanged. In Normals mode the primitive paints generated directions onto existing pixels only. Transform settings default to on-model Size and Rotate controls, which can be shown together or individually: drag their axis labels left/right or use arrow keys for precise adjustments. The settings panel can be collapsed and moves to a bottom sheet on smaller screens. Right-click or long-press any primitive color to use the primary or secondary color. Apply and Cancel live in the context bar above the canvas. Appearance offers Subtle and Balanced pixel-art anti-aliasing (off by default). It softens silhouette stair corners while preserving straight edges and regular 45° steps. Outer and between-face edges can be enabled independently. Edges use opaque colors by default, toward the chosen Blend color (initially the secondary color). Enable Use alpha for anti-aliasing for partial edge transparency. Both can introduce colors outside the palette. Shared color dialogs accept RGBA hex and provide an Alpha slider and numeric field (0 transparent, 255 opaque); RGB and HSV edits preserve alpha. Enable Anti-alias between faces to blend neighboring face colors at longer stair corners, using the same strength. Explicit outlines and normal-only painting stay crisp. Review at 100% and touch up after applying when you need deliberate pixel placement.

Selections and transforms

Select offers Rectangle, Lasso, Polygon, Isometric polygon, and Magic wand modes. Shift adds, Alt subtracts, and Shift+Alt intersects. The operation dropdown offers the same choices. For polygons, click corners, then click the starting point, right-click, press Enter, double-click, or choose Finish polygon. Escape cancels an unfinished polygon. Isometric polygon constrains every edge, including the closing edge, to the project guide ratio: both 2:1-style diagonals and vertical, using whatever ratio is set (classic 2:1 at ratio 2). Guides may be hidden; snapping still uses the guide lattice when enabled. Backspace removes the last isometric corner while the canvas is focused. Right-click finishes a polygon draft and does not open the selection menu until the draft is gone.

Magic wand samples visible artwork with tolerance and contiguous options. Selections constrain painting, filling, erasing, copying, moving, and transforms. Double-click with Rectangle Select to select the whole frame, or the clicked cell in Spritesheet view. Right-click opens the selection menu; during a polygon draft it finishes the polygon instead.

Arrow keys move selected pixels and the selection by 1 px; Shift+arrows moves them by 10 px across the layers in Move scope. Selected layers (the default) includes hidden selected layers; Visible layers uses layer visibility, and All layers includes hidden layers. The scope selector shows the target count and applies to both dragging and nudging. It resets to Selected when switching projects. Painting still uses the active layer and transforms still use selected layers. With Move active and no pixel selection, dragging or arrows move their complete artwork together. Movement stops at canvas edges, using shared artwork bounds when no pixel selection exists. A full or transparency lock on any target blocks the whole move. Escape cancels a drag; a completed drag is one undo step. Color pixels and their normal maps move together in either editable channel. Frame view affects the current frame; Spritesheet view moves in sheet coordinates.

Edit > Transform rotates or flips every selected layer together, including hidden layers. A pixel selection supplies the shared bounds and mask; without one, the combined artwork bounds supply a common center. Full and transparency locks block the whole operation. Rotations that cannot fit the canvas are rejected. Frame view affects the current frame; Spritesheet view transforms in sheet coordinates. Each change is one undo step, restoring the selection too. Copy, Cut, Backspace Fill, Shift+S Outline, and Delete Clear also use the whole active layer when no selection exists. Moving and transforms keep color pixels and normal maps together and adjust normal directions. Fill, Outline, and Clear affect the active Color or Paint normals channel; clearing color also clears its normals. Layer locks and playback can disable editing commands.

Canvas and sprite size

Edit > Canvas contains Resize canvas, Crop canvas to selection, Trim transparent margins, and Sprite size / re-slice sheet.

Resize canvas uses nine anchors to position existing pixels. Crop works in Frame view and crops every frame to the selection bounds. Trim finds shared artwork bounds across all frames and layers, including hidden layers. Color and normal maps move together; these operations support Undo.

Frame view edits the current animation frame. Spritesheet view packs every frame into one editable canvas: edits inside a cell update that frame, while pixels in margins, spacing, and unused sheet areas remain part of the saved sheet. Switching views maps the selection between the active frame and its sheet position and stops playback.

Sprite size / re-slice sheet preserves every sheet pixel, including margins, spacing, and incomplete edge areas, then creates frames from every complete cell that fits the new sprite dimensions.

Layers and animation

Layer actions → Merge and flatten offers Merge down (adjacent artwork siblings), Flatten visible (hidden layers remain), Flatten group and Flatten all (including hidden artwork). Each command affects all frames and sheet data in one undo step. Locked targets block merging. Opacity is baked in and normal maps are blended; lighting can change where different normals overlap. Flatten visible creates a root layer above the retained hidden layers; group flattening replaces the folder in place.

Groups are nested folders, not merged pixels. Use New group at the bottom of the Layers panel or Group selected in the selection toolbar. Right-click a row for contextual actions, separated into row-only and selection commands. Group selected requires contiguous siblings so grouping does not change the image. Selecting a group targets all descendant layers, including hidden ones, while painting and ordinary clipboard commands still use one active artwork layer. Selecting a child alone does not target its siblings. Collapse folders without changing their targets. Double-click a layer or group name to rename inline: Enter saves, Escape or leaving the field cancels. Settings icons open dialogs. The painting target has a left accent and a label, distinct from selection highlighting. Collapsed folders identify their painting target. Folder expansion is remembered locally when preference storage is allowed, or for the session otherwise.

A group's visibility and lock switches affect all descendants without overwriting their individual switches. The panel labels inherited states. Selected-scope movement, rotations, flips and selected Copy merged expand groups; Visible scope respects all ancestor visibility switches and All includes hidden artwork. A locked target blocks the whole move or transform. Groups cannot be painted on directly.

Drag a row's background, thumbnail, name or folder to reorder it, or drag a selected row to move the selected nodes together. A line marks insertion above/below a row; a folder highlight means move inside. Hover over a collapsed folder to expand it. Use the labelled Below group target after its last child to place a layer outside and below that group. The Bottom of stack target puts layers below all root items, outside all groups. Visibility, lock, settings and delete icons act on their own row without starting a drag. Escape or pointer cancellation abandons the drag. Arrange offers Move up/down, Move into group and Move out provide keyboard and touch alternatives. Reordering affects all frames and sheet data and is one undo step. Locked subtrees and invalid nesting are rejected.

Ungroup keeps children in place; hidden groups leave their children hidden. Unlock affected nodes before structural edits. Duplicate selected copies the whole group, including all frame and sheet artwork. Delete group removes its descendants after confirmation; use Ungroup to retain them. At least one artwork layer must remain. Groups save in Rhomlet format version 3; older flat projects still open. Supported Aseprite groups retain their hierarchy; unsupported group blending/opacity is rejected with guidance. Image and animation exports render the visible flattened result. Group opacity, blend modes, masks, and destructive flatten commands are not included yet.

Click a layer to select it and make it active. Ctrl/Cmd-click toggles layers; Shift-click selects a range in displayed order. Enable Multi-select for touch-friendly toggling. At least one layer stays selected, and the active layer is marked separately. Move uses its scope, transforms use selected layers, and painting and ordinary clipboard actions use the active layer. Copy merged has its own layer scope. Selections are remembered when switching project tabs. In the Layers panel, Up/Down and Home/End select layers, Shift extends a range, Ctrl/Cmd moves focus, Space toggles the focused layer, and Left/Right moves between row controls. These navigation keys do not move canvas pixels.

Layers span every animation frame. Add, duplicate, reorder, hide, fully lock, or delete them from the Layers panel; duplication copies every frame and both color and normal channels. Double-click a layer to change its name, opacity, or Lock transparency. A full lock blocks drawing and destructive edits. Lock transparency preserves existing alpha, prevents painting into empty pixels, and prevents erasing existing pixels.

The Timeline inserts blank or duplicated frames after the current frame and can delete the current frame. Set playback from 1–30 FPS; individual frame durations range from 10–60,000 ms. Drag frames to reorder; Shift-click selects a range and Ctrl/Cmd-click toggles frames for batch duration or ordering actions. Double-click a frame to edit its duration; frames without one use project FPS.

The Animation range dropdown creates named ranges with forward, reverse, ping-pong, or reverse ping-pong playback. Ranges follow frame IDs when reordered. Enter or Space toggles playback. Onion skin can show up to three previous frames, next frames, or both. Previous frames can be tinted red and next frames blue; more distant frames fade. Configure direction, range, and tint beside the Timeline onion-skin button or in Preferences > Editor. Ghosts appear only while playback is paused in Frame view.

Painting normal maps

Normal colors encode surface directions, not artwork colors. Normals describe existing color pixels; painting on empty space does not create visible artwork.

1. Select a layer containing artwork, then choose Paint normals above the canvas.
2. Choose a labeled direction in the Normals inspector. Paint with Pencil, Freehand line, Fill, Line, Isometric line, or Isometric curve; Shapes can paint generated surface directions. Selection masks still apply.
3. Alt-click samples a normal direction. Eraser clears stored normals, causing those artwork pixels to use the default Facing viewer direction. In Color mode, Shapes can also write generated normals when Create surface normals is enabled.
4. Choose Lighting and adjust the light direction to inspect the result. Lighting is a preview; switch back to Color or Paint normals to edit.
5. Save a Rhomlet project to preserve both channels, or enable Export normal map instead for PNG, GIF, or ZIP output. Artwork without painted normals exports with the default Facing viewer normal.

The color reference overlay (Shift+N) helps align normal painting with artwork. The inspector reports coverage and offers a reset for the current layer/frame. Shapes' Shade surfaces option bakes shading into color; disable it when you want neutral color with adjustable normal-map lighting.

Workspace, guides, and navigation

Use View to show or hide panels and choose workspace presets. Drag the inspector edge or timeline divider to resize; focused dividers also accept arrow keys. Panel headers collapse, detach/dock, or close panels. Drag detached headers to move them and their lower-right corners to resize. Detached panels appear docked on mobile.

View can independently show Tool options, Inspector, Layers, Timeline, Palette/Normals/Lighting, Preview, and the Status bar. Built-in Drawing, Animation, and Normal-map editing presets are available. Up to five custom presets retain panel visibility, sizes, and floating positions. View > Reset workspace layout restores the default arrangement. Preferences > Workspace changes the inspector side, places the tools on the left, top, or bottom, and also offers reset. On phones the tools always form a horizontal bar along the bottom, or under the tool options when set to Top. The same section edits the tool bar itself: drag tools, separators, and groups into any order, hide tools you do not use, or collect several tools into a group that shows one button. Click a group button to use its current tool; click it again, hold it, or right-click to pick another. Hidden tools still answer to their shortcuts. Closing a panel does not close or change artwork.

View > Guides controls isometric guides, pixel grid, sprite boundaries, and snapping. Grid settings adjusts ratio, spacing, and origin. Origin is on each sprite; spritesheet view tiles that grid across the sheet, including leftover pixels. Guides do not appear in exports. The pixel grid appears at 400% zoom and above.

Wheel pans; Shift+wheel pans horizontally; Ctrl/Cmd+wheel zooms around the pointer. Drag with Pan, hold Alt+H and drag, or middle-drag to pan temporarily; pinch zooms and pans on touchscreens. A drawing tablet stylus paints instead of pinching; browser zoom gestures from the pen are ignored while it is over the canvas. Use 0 to fit and 1–6 for 100% through 3200%. The zoom menu supports custom zoom from 25% to 4000%.

Preview has independent Frame/Spritesheet modes, pan, zoom, and a channel selector. Drag to pan, scroll or pinch to zoom. Tile preview (3 × 3) helps check seams. Preview follows live edits without changing artwork or the main canvas camera.

Projects, saving, and export

Project tabs keep multiple documents open in one workspace; select a tab to edit it and double-click a tab to rename it. File > Open project reads .rhomlet, valid Rhomlet JSON, and .ase/.aseprite documents. Import image / spritesheet reads PNG, JPEG, and WebP images. Paste as new creates a project from clipboard image content.

Edit > Copy merged > Visible layers (Ctrl+Shift+C) copies flattened color artwork from the current frame (or sheet in sheet view), cropped to the selection and its mask. It respects layer order, visibility, opacity, and transparency, without lighting effects or normals. The Selected layers option includes hidden selected layers. Use Ctrl+Alt+Shift+C for selected layers, or Ctrl+Alt+Shift+A for all layers. All layers includes every layer, including hidden layers, regardless of layer selection. Locked layers can be copied. Empty output replaces the clipboard with a transparent image. Paste and Paste as new still work within Rhomlet if browser clipboard access is unavailable. Ordinary Copy remains active-layer only.

Closing a tab offers Close project or Save and close. With browser project storage enabled, closed projects remain under File > Recent projects while storage limits allow; otherwise closing does not create a recoverable copy. Closing the last tab creates a new untitled indexed project.

Save project downloads a versioned .rhomlet file containing artwork, layers, frames, timing, animation ranges, guides, sheet layout, and normal maps, and the indexed palette or RGBA working palettes. It does not contain undo history, other tabs, shortcuts, or editor preferences. Supported older files migrate when opened; unsupported newer versions are rejected. Downloaded project files remain the reliable portable backup.

Images and limits: Import accepts PNG, JPEG, and WebP files under 25 MB and 16 million source pixels. Frame width and height must each be 1–512 px. Sheets are sliced left-to-right and top-to-bottom; only complete cells become frames. Color defaults to indexed and builds a document palette from the image (at most 255 colors plus transparency); choose RGBA to keep unrestricted colors. Projects support up to 128 frames, 32 layers, and a 16,777,216 pixel layer/frame memory budget. Paste as new accepts images up to 512 × 512 px.

Aseprite compatibility: Open project imports RGB, grayscale, and indexed .ase/.aseprite documents up to 100 MB, 512 × 512 px, 128 frames, 32 image layers, and the project memory budget. Raw, compressed, and linked cels, offsets, opacity, palettes, frame durations, tags, and normal-blend groups are supported. Stable indexed palettes retain slot identity. Palette animation, background layers, or cel opacity import as RGBA with a notice to preserve appearance. Group hierarchy is preserved. Tilemaps, cel Z-index overrides, non-normal blend modes, and partially transparent groups must be converted or flattened first. Rhomlet imports but does not export Aseprite documents.

Export: Download the current frame as PNG, all frames as a PNG sheet, separate PNG sprites plus JSON in ZIP, a PNG sheet plus JSON in ZIP, an animated GIF, or an editable Rhomlet project. Indexed projects also offer indexed PNG frames and sheets with palette alpha retained. The available scales are 1×, 2×, 4×, and 8×. Sheet exports preserve margins and spacing; JSON records dimensions, frame files or rectangles, durations, and animation sequences. GIF uses up to 256 colors per frame, binary transparency, looping playback, and 10 ms timing. Guides and viewport backgrounds are never exported. A single PNG is limited to 33,554,432 output pixels; sprite ZIP and GIF exports are limited to 67,108,864 aggregate scaled pixels.

If browser project storage is enabled, edits autosave after the configured delay and Rhomlet restores open tabs and retained undo/redo history later. History keeps the nearest 40 entries per undo and redo stack, up to 8 MB per project and 32 MB across open projects. Recent projects retain at most 8 closed projects and 32 MB total. Browser storage belongs to the current browser profile and exact site address and may be unavailable or cleared.

Preferences and privacy

Open Edit > Preferences. Changes apply immediately.

• Appearance: light or dark theme. The top-right sun/moon button also toggles it.
• Workspace: inspector position, tools position, tool bar contents (order, separators, groups, hidden tools), and layout reset.
• Editor: mouse-cursor style and cursor-preview opacity, reverse wheel zoom, onion-skin opacity/direction/range/tint, and autosave delay.
• Keyboard shortcuts: search, rebind, clear, reset, or import supported Aseprite .aseprite-keys or XML files under 1 MB. Unsupported and conflicting bindings are reported.
• Privacy & storage: manage project/preference storage, download stored data, or delete it.

Optional project storage and preference storage are separate choices. Turning either off stops future persistent access but does not erase data already stored; use Download stored data or Delete stored data to manage it. Deletion leaves open artwork in memory. Private browsing, storage pressure, browser cleanup, or a changed site address can make stored data unavailable, so browser storage is not a backup. Rhomlet has no advertising or analytics. See the privacy and browser storage notice for details.

Rhomlet requires a current browser with Canvas, IndexedDB, and modern file APIs. Clipboard and persistent-storage features depend on browser support, permissions, and sometimes HTTPS. Rhomlet is not currently an installable offline app; the deployed site must be reachable to load or reload it.

Keyboard shortcuts

These are the default bindings. Your custom bindings are shown in Edit > Preferences > Keyboard shortcuts, also accessible from the status-bar keyboard button. Cmd replaces Ctrl on macOS. Most editor shortcuts are inactive while typing or using dialogs.

Click a binding and press a key combination to change it. Clear conflicting bindings first. Arrow keys remain reserved for nudging. Import Aseprite keys supports equivalent commands and reports skipped entries.

Previous/Next frame shortcuts wrap at the ends and stop playback. Hold a tool shortcut for about a quarter-second to use that tool temporarily until the key is released.