Everything you need to draw pixel art, build animations, and export for terminals, CLIs, and the web.
Pixcot runs in your browser -no install, no account, no server. Open pixcot.com and you're ready to draw.
D) and click on cells to place pixels. Right-click or use the Erase tool to remove them.The toolbar on the left gives you access to all drawing instruments. Each tool has a keyboard shortcut for fast switching.
| Tool | Key | What it does |
|---|---|---|
| Draw | D | Place pixels with the active color. Drag to paint continuously. Respects brush size (1-3px). |
| Erase | E | Remove pixels (set cells to empty). Respects brush size. |
| Fill | F | Flood fill a contiguous area with the active color. Works like the paint bucket in image editors. |
| Eyedropper | I | Click any pixel to pick its color and set it as the active color. Automatically switches back to the previous tool. |
Press 1, 2, or 3 to set the brush size. A 1px brush draws single pixels; 2px and 3px draw small squares. The brush size applies to the Draw, Erase, Lighten, Darken, and Dither tools.
Click and drag to draw shapes. Hold Shift while dragging to constrain proportions (45-degree lines, perfect squares, perfect circles).
| Tool | Key | What it does |
|---|---|---|
| Line | L | Draw a straight line between two points. Uses the Bresenham algorithm for clean pixel lines. |
| Rectangle | R | Draw a rectangle outline. Enable "Filled" to draw a solid rectangle. |
| Circle | C | Draw an ellipse outline. Enable "Filled" for a solid ellipse. |
Toggle the Filled checkbox below the shape tools to switch between outline and solid shapes. This applies to both rectangles and circles.
| Tool | Key | What it does |
|---|---|---|
| Lighten | H | Increase the lightness of existing pixels. Each click brightens by ~10% in HSL space. |
| Darken | J | Decrease the lightness of existing pixels. Each click darkens by ~10%. |
| Dither | T | Paint a checkerboard pattern -alternating cells filled and empty -to simulate transparency or gradients in low-color contexts. |
| Gradient | N | Click and drag to fill a rectangular area with a color gradient from the primary color to the secondary color. |
| Spray | P | Scatter random pixels within a radius around the cursor. Creates organic, speckled textures. |
| Text | W | Type a string, then click the canvas to stamp it as pixel text using a built-in 3x5 bitmap font. |
Pixcot uses a two-color system: a primary color (left-click draws with this) and a secondary color (used for gradients and as the swap target). Press X to swap them.
Choose from 10+ curated palettes in the sidebar dropdown: retro, gameboy, pastel, neon, earth tones, monochrome, and more. Each palette provides 8-16 colors tuned for pixel art.
Type a name in the palette editor at the bottom of the Colors section and click Save to store the current palette colors as a custom palette. Custom palettes persist in your browser.
Click the Import palette button to load .gpl (GIMP), .hex (one hex per line), or .pal palette files. The imported colors replace the current palette.
The 12 most recently used colors appear in the "Recent" strip. Click any swatch to reuse it.
Each frame supports multiple layers. Layers let you separate background, character, and detail elements so you can edit them independently.
Click + Layer to add a new transparent layer on top. Delete layers you no longer need (one layer must always remain).
Toggle the eye icon to hide/show a layer. Lock a layer to prevent accidental edits while you work on others.
Adjust a layer's opacity slider (0-100%) to create translucent effects. The composite view blends layers in real time.
Use the up/down arrows to reorder layers. Click merge-down to flatten a layer into the one below it.
The timeline bar at the bottom of the canvas lets you build frame-by-frame animations.
When drawing on frame 2+, you'll see a faint ghost of the previous frame overlaid on the canvas. This helps you align movement between frames.
Loop plays frames 1 → 2 → 3 → 1 → 2 → 3... endlessly. Ping-pong plays forward then backward: 1 → 2 → 3 → 2 → 1 → 2 → 3... creating smooth back-and-forth animations.
Each frame can have its own duration in milliseconds. Set longer durations for pause effects or shorter ones for fast movements. The FPS control sets the default timing; the ms field overrides it per frame.
Press S to activate the select tool. Click and drag on the canvas to draw a selection rectangle around the pixels you want to manipulate.
Once you have a selection, there are three ways to reposition the selected content:
You can also use the Move tool (V): if a selection exists, it moves only the selected pixels. Without a selection, it moves the entire canvas.
When a selection is active, the sidebar shows action buttons:
| Action | What it does |
|---|---|
| Copy | Copies the selected pixels to the clipboard (internal -not your system clipboard). |
| Cut | Copies and clears the selected area. |
| Paste | Places the copied content at the current selection position, or at the top-left corner if no selection exists. |
| Delete | Clears all pixels inside the selection. |
The Transform section in the sidebar applies to the active layer:
Press M to cycle through symmetry modes: off → vertical → horizontal → both → radial 4-way → radial 8-way. A dotted line appears on the canvas to show the mirror axis. Everything you draw is reflected in real time.
Click the Export button (or wait until your canvas has content). Pixcot supports 7 output formats:
Standard image file. Supports transparent background. Scale options for larger output sizes. Best for websites, social media, and profile pictures.
Vector format with one <rect> per pixel. Infinitely scalable, tiny file size. Perfect for embedding in HTML or documentation.
Animated export for multi-frame projects. Shows all frames with proper timing. Background removal supported for transparent GIFs.
Truecolor escape codes (\x1b[48;2;r;g;b m) that render as colored blocks in modern terminals. Copy and paste into your CLI tool's source code.
Half-block characters (▀ ▄ █) that work in plain text. Two pixel rows per text line. Great for READMEs, Slack, and Discord.
Raw grid data as a JSON array. Each cell is a hex color string or null. Useful for importing into other tools or games.
Encodes your drawing into a URL. Send the link to anyone and they'll see your exact pixel art -no server involved.
In the export modal, check "Remove background" and pick a background color. All pixels matching that color become transparent in PNG and GIF exports.
Click the gallery icon in the header to see all your saved projects with thumbnails. Click a project to load it, or create a new blank project.
Click the save icon (floppy disk) in the header. Projects are stored in your browser's local storage with all frames, layers, palette, and grid size.
For portable backups, export your project as a .pixcot file (JSON-based). Import it back on any browser. Use this to transfer work between devices or share projects with collaborators.
Switch to the Import tab in the sidebar. Drop any image file or paste from clipboard. The importer downscales and quantizes the image to your current palette and grid size. Adjust the color count slider for more or fewer colors.
Press ? in the editor to see all shortcuts. Here's the full reference:
Pixcot is a free browser-based pixel art editor built for developers. It lets you draw pixel art mascots and sprites, then export them as ANSI truecolor escape codes, Unicode half-block characters, PNG, SVG, animated GIF, or JSON. Available at pixcot.com.
Yes, completely free. No account, no watermarks, no limits.
Click the Export button, then choose the ANSI or Unicode tab. ANSI uses truecolor escape codes that render in modern terminals. Unicode uses half-block characters that work in READMEs, Slack, and Discord.
Yes. Use the timeline at the bottom of the editor to add frames, set per-frame durations, and choose loop or ping-pong playback. Export animations as GIF.
Everything stays in your browser's local storage. Nothing is sent to any server. If you clear your browser data, your projects will be lost -use .pixcot file export for backups.
Yes. Anything you create with Pixcot is yours. No attribution required.
Any modern browser: Chrome, Firefox, Safari, Edge. Pixcot requires JavaScript enabled. It works on mobile but the experience is best on desktop.
Pixcot supports grid sizes from 8x8 up to 64x64. Larger grids give more detail but take more time to fill. For terminal mascots, 16x16 or 24x24 is the sweet spot.
Yes. Go to the Import tab, drop an image, and the importer will pixelize it to your grid size and palette. Adjust the color count slider to control how many colors are used.