Editor interface regions and actions

Quick Start

  1. Open the editor and start on the 64 x 64 canvas, or choose another size before drawing.
  2. Use Pencil for hard-edged pixel drawing, Brush for round antialiased strokes, and Eraser to remove pixels.
  3. Use the Quick color swatches or the custom color picker to change colors.
  4. Set the hotspot so the cursor clicks from the right pixel.
  5. Keep working normally; drafts autosave locally. Use Export when you need a file.

Know The Main Areas

  • Left sidebar: cursor name, cursor role, canvas size, workspace items, and project actions.
  • Center canvas: your drawing area, zoom controls, multi-size shelf, selection bar, and import placement controls.
  • Right toolbar: drawing tools, panel buttons, quick colors, and custom color.
  • Bottom timeline: animation frames, frame delay, onion skin, loop, and playback.

Editor Sidebar (Workspace)

The left sidebar panel acts as your central control deck for configuring project metadata, adjusting dimensions, and navigating your workspace:

Editor left sidebar workspace configuration
Cursor Project Details

Assign a custom Cursor Name (used as your exported file name) and select a Cursor Role (Normal Arrow, Link Hand, Text IBeam, Busy, alternate NW/NE resizes, etc.) to set how Windows registers and loads this cursor.

Canvas Sizing Presets

New blank cursors start at 64 x 64 by default. Scale your artwork canvas between 32px and 256px using standard dropdown presets or inputting a custom value. Canvas changes resize your active cursor and set the default size for any new cursors created afterwards.

Workspace Card Deck

Maintains your active session's design catalog. Switch between different cursors in a single click; the editor automatically autosaves all pixel changes in your local draft store before switching cards.

Add & Full Set Actions

Click Add to create a blank, standalone cursor item. Click Full Set to automatically instantiate all 15 classic Windows system cursor roles in your workspace, enabling you to build complete cursor themes quickly.

Canvas Action Bar

Directly below the canvas is the Action Bar (Stage Action Dock). It houses quick controls for editing, views, and file actions:

Undo & Redo

Revert your last action or re-apply an undone stroke. The undo stack supports up to 30 steps and now preserves selections and structural edits.

Reset Flyouts

If you have dragged your tool panels (Color, Layers, Hotspot, Live Preview) around the screen and want to clear the clutter, click this button to snap them all back to their default positions.

Hide Controls (Chrome Toggle)

Hides the sidebar, timeline, and tool panels so you can view or paint on your drawing canvas completely unobstructed.

Zoom Level

Displays your active canvas magnification (e.g. 8x). Click it to open a slider allowing you to scale the view from 1x up to 24x.

Fit Stage

Instantly centers and fits the canvas to occupy the maximum available space inside your viewport.

Pan Viewport

Activates view panning. Click and drag the canvas around with your mouse pointer (or hold Space for temporary pan) to glide the stage camera around.

Export Options

Opens the export panel to download your work as .cur, .ani, PNG frames, or a complete ZIP theme set, or to copy website-ready Base64 CSS code.

Submit to Site

Opens the secure submission form to upload single cursors or complete cursor sets for review.

Draggable & Pinnable Panels (Flyout Windows)

Major utility panels (such as Color Swatches, Layers Panel, Hotspot Sizing, and Live Cursor Preview) use the same toolbar-anchored flyout style. You can drag a panel to a custom position or pin it when you want it to remain open while working:

Flyout panel window header with drag, pin, and reset controls
Drag Handle (Move Panels)

Located on the far left of each panel header (represented by the vertical double-dots ::). Click and hold this handle to drag the panel to any custom position inside your browser viewport. The editor automatically remembers your custom panel positions across sessions using local browser memory.

Pin / Unpin Toggle

Toggle the pushpin icon in the header to set panel persistence:

  • Unpinned: The panel behaves like a drawer, automatically closing itself whenever you select a different tool or open another panel.
  • Pinned (Highlighted blue): The panel locks open persistently on your workspace, allowing you to paint and edit on your canvas while keeping the panel's tools and options fully visible.
Snap-Back Reset (Panel Header)

Located on the right of the panel header. Click this small curved reset arrow to instantly dock this specific panel back to its default side-docked position, clearing its custom coordinates.

Bottom toolbar with flyout reset action circled
Reset All Flyouts (Bottom Toolbar)

If you have scattered multiple panels across your screen and want to clear workspace clutter, click the reset button on the bottom Stage Action Dock. This instantly docks all panels back to their default layouts and wipes stored positions from local storage.

First Cursor

Start simple. Draw a small arrow, set the hotspot at the arrow tip, then export as a .cur file. If the cursor has more than one frame, export as .ani instead.

Good Habits

  • Export a backup after major edits.
  • Use layers when you want to test changes without damaging the base artwork.
  • Use frame PNG backup export before risky animation edits.
  • Move the real browser cursor into Live Preview, then hold and drag. The trail shows where the active hotspot is registering in real time, so correct any offset before exporting.