The creative pipeline that holds the whole project

Sketch. Paint. Pixel. Rig. Ship. One project.

Pixel Stroke is a creative-pipeline document. Make a sprite. Make a font. Make a frame-by-frame animation, a vector logo, an illustration, a tilemap, an LED-matrix sequence. Iterate, collaborate, finish — all inside the same project.

Open the editor Try a tool in your browser ↓

Ideate together · live

Two cursors. One canvas. Zero exports.

Invite a collaborator to a project and you share the canvas, the layers, the palette, the timeline. Live cursors, named, in colour. No "merge changes" dialogue. The work is the conversation.

Loading collab demo…

Hosting a session is free. Joining is free. The room is your project.

A drawer of finished things

A project is a container, not a file.

Every asset you finish lives inside the same .pxs document — sprites, fonts, animations, illustrations, tilemaps, LED-matrix sequences. Open the drawer; everything you've made is still there.

Open project · nightshade.pxs

Night Shade Engine — Asset library

— 23 finished assets · 4 collaborators · last touched 2 hours ago

hero_idle Sprite · 16×16
title_art Illustration · 1920×1080
ns_display Font · TTF · 26 glyphs
jump_loop Animation · 8 frames
ui_icons SVG set · 6 paths
forest_floor Tilemap · 32px
boot_loop LED · 13×8

Try a tool · right here, right now

Don't watch a screenshot. Draw something.

This is a real slice of Pixel Stroke running in your browser. One tool, three modes. There are twenty-two more like it in the editor — Pixel Stroke is designed with the kind of flexibility that even powers these demos with the actual tools.

untitled.psproj × scratch.psproj PIXEL STROKE · 0.9
drag to draw
Frames
1
2
3
4
5
6
12 fps
Color Swatches HSL
Cherry #EC2A2A
Layers +
Ink 100
Sketch 100
Background 100
Brush · Smooth · #EC2A2A 64 × 40 · RGBA · 1× 12 fps

That's a real slice of the Pixel Stroke editor running in WebAssembly — the same brush primitive, the same palette, the same panel chrome. Built once, surfaced everywhere in the pipeline.

Layers → animation · live

Adjust a frame. Watch the loop change.

Five frames of a bouncing ball. Drag the height for any frame on the left; the preview on the right re-plays the loop with your change in sync. This is the same pipeline the editor offers — layers feed the film strip, the film strip feeds the export.

bounce_loop · 5 frames 12 fps
0%

Pick a frame, drag the slider, watch the loop.

Playing · loop PNG · GIF · sprite atlas

One project, many outputs

Make once. Ship to every target.

The same project document exports to PNG, animated GIF, SVG, TrueType font, sprite atlas with JSON, or hardware bytecode for an Arduino LED matrix. No round-tripping between three different apps.

Open the editor
Export → many targets 6 formats · 1 project
  • hero_idle → PNG · raster · 16×16 PNG
  • ui_icons → SVG · vector · 6 paths SVG
  • jump_loop → GIF · animated · 8 frames GIF
  • ns_display → TTF · font · 26 glyphs TTF
  • tiles_pack → PNG + JSON · sprite atlas ATLAS
  • boot_loop → PXLMA1 · hardware · 13×8 PXLMA1

Iterate forever

Animations live alongside everything else.

A project holds as many named animations as you want. Switch between them in a tab strip; the layer stack stays the same. Throw away nothing. Iterate forever.

Anim · idle

Hero idle · 4 frames

Anim · walk

Hero walk · 8 frames

Anim · attack

Hero attack · 6 frames

The pipeline lives in one place.

Create a free account and open the editor. The same account hosts collab rooms and keeps your projects across devices.

Open the editor Download for desktop