Recipes · guide
What you can build with Apexify.js
Current Apexify.js 6.0.0 documentation for What you can build with Apexify.js.
This page is an idea catalog: real products and assets people ship with ApexPainter, grouped by feature area. Use it for inspiration, then open the linked feature guide for options and examples.
Workflow: pick an outcome below → read the guide → optionally capture it as a recipe-*.mdx (see Recipes hub).
For why ApexPainter exists and when to use it, read Philosophy & goals first.
Canvas & backgrounds
| You can build | Primary APIs | Learn |
|---|---|---|
| Branded scene bases (solid, gradient, image BG) | createCanvas, background layers, patterns, noise | Canvas overview |
| Multi-layer “wallpaper” stacks | drawBackgroundLayers, zoom, borders | BG layers · Canvas hub |
| Poster / slide templates | createCanvas + reproducible CanvasConfig | Beginner → first image |
Images & shapes
| You can build | Primary APIs | Learn |
|---|---|---|
| Avatars, logos on canvas, product shots | createImage, fit, align, crop | Images overview |
| Badges, stickers, icons (vector shapes) | createImage shape (ShapeType) | Shapes reference |
| Filtered thumbnails (blur, sharpen, colour) | createImage filters | Image filters |
| Masked / warped / vignette scenes | masks, distortion, effects | Mask & distortion · Effects |
| Grouped layers (move as one) | CreateImageOptions isGrouped | Groups |
Text
| You can build | Primary APIs | Learn |
|---|---|---|
| Headlines, captions, multi-line blocks | createText, fonts, maxWidth | Text overview |
| Gradient / stroke / glow typography | text styling chapters | Colour & gradients · Glow & stroke |
| Curved or path-based lettering | curved text APIs | Curved text |
| Dynamic layouts (measure before draw) | measureText | Measure text |
GIF & motion
| You can build | Primary APIs | Learn |
|---|---|---|
| Animated banners, sticker GIFs, loaders | createGIF, GIFInputFrame | GIF overview |
| Programmatic frame cartoons (canvas-drawn) | animate, Frame[], optional GIF file | animate |
Frame pipelines with onStart / onEnd | createGIF callbacks | Callbacks · Results |
Lines, paths & hit regions
| You can build | Primary APIs | Learn |
|---|---|---|
| Connectors, arrows, dashed UI lines | path2d.custom | Lines overview |
| Bézier / arc geometry drawn on bitmaps | path2d.create, path2d.draw | Path2D |
| Click maps, hover zones (UI exporters) | detect.path, detect.region, HitRegion | Hit detection |
Charts
| You can build | Primary APIs | Learn |
|---|---|---|
| Pie / donut, bar, line, scatter, radar, polar reports | createChart | Charts overview |
| Side-by-side comparisons | createComparisonChart | Comparison charts |
| Bars + lines with dual axis | createComboChart | Combo charts |
Video (FFmpeg)
| You can build | Primary APIs | Learn |
|---|---|---|
| Thumbnails, frame strips, posters | createVideo extractFrame / extractFrames | Frames |
| Quick probes (duration, fps, resolution) | createVideo getInfo or getVideoInfo | Metadata · Imperative |
| Multi-step trim, splice, captions, music + SFX | videoPipeline() | Video pipeline (advanced) |
| Game / UI SFX without sound files | createAudio → mixAudio or pipeline | createAudio (advanced) |
| Trim, transcode, overlays, PiP, audio mix | createVideo branches | Video overview · Options hub |
Pixels, batch & layout utilities
| You can build | Primary APIs | Learn |
|---|---|---|
| Colour pickers, fog/lighting tweaks on regions | pixels.getData, pixels.manipulate | Pixel data |
| Sprite sheets from PNG sequence math | pixels.getColor / pixels.setColor (precision edits) | Pixel data |
| Many canvases in parallel | batch | Batch & chain |
| Multi-step pipelines (buffer handoff) | chain | Batch & chain |
| Filmstrips, grids of images | image.stitchImages, image.createCollage | Stitch & collage |
Save, encode & disk
| You can build | Primary APIs | Learn |
|---|---|---|
| Timestamped exports, WebP/JPEG pipelines | save, saveMultiple | Save to disk |
| API responses (base64, data URL) | new ApexPainter({ type }), outPut | Output encoding |
painter.image utilities (whole files / buffers)
Operations below skip createImage composition — they run through painter.image (Raster hub, chapters 04–07).
| You can build | Primary APIs | Learn |
|---|---|---|
| Resize / convert batches | resize, imgConverter | Resize & effects |
| Sharp-style filter stacks | effects | Resize & effects |
| Dominant colours, palettes | colorAnalysis, extractPalette | Resize & effects · Compress & palette |
| Chroma knock-out, remote BG removal | image.colorsRemover, image.removeBackground | Resize & effects |
| Polygon crops, multi-layer blends | image.cropImage, image.blend, image.masking, image.gradientBlend | Blend & mask |
Combined builds (common stacks)
| Idea | Stack |
|---|---|
| Social cover (Twitter / LinkedIn) | createCanvas + createImage + createText + save |
| Discord welcome card | Canvas + image + rich text + shadows → save or outPut |
| Daily chart PNG for Slack | createChart → save or attach Buffer |
| Short promo GIF | createGIF or animate → file |
| Product catalogue JPEGs | batch (image) + compress |
| Video teaser montage | createVideo generateThumbnail or extractFrames · Video overview |
| Gameplay clip + generated SFX | animate or Scene → MP4, then createAudio + videoPipeline |