01IMAGE COMPOSITION
Image, shape, crop, blend.
Build raster compositions from imagery and primitives instead of treating screenshots as your rendering layer.
createImage()Build visual systemsfrom code.
One TypeScript-first surface for images, typography, scenes, templates, charts, GIF/video workflows, and procedural audio — designed for deterministic server output.
9current domains
TSfirst authoring
Nodecurrent runtime
01 / TYPOGRAPHYEditorial composition
02 / TEMPLATEReusable systems
03 / MEDIAFrame workflows
Canvas·Images & shapes·Text·Charts·Scenes·Templates·GIF·Video·Procedural audio·Canvas·Images & shapes·Text·Charts·Scenes·Templates·GIF·Video·Procedural audio·
01
WHAT YOU CAN BUILD
One engine. Different visual jobs.
The homepage now separates visual categories instead of repeating the same chart demo. Each composition below represents a different current capability area.
02TEMPLATES
Reusable layouts, not one-offs.
Move repeated visual work into reusable definitions with data binding and layout support.
createTemplate()03SCENES
Ordered composition with structure.
Layer content through validated scene composition when a single drawing call is not enough.
createScene()04MEDIA
Frames, GIF, video and audio.
Extend the same programmatic workflow into bounded animation and FFmpeg-backed media operations.
createVideo()02
THE WORKFLOW
A predictable path from input to artifact.
Apexify keeps the mental model explicit: create the surface, compose the content, structure reusable work, then emit or transform the result.
01
Start
Render a deterministic image
Begin with an explicit canvas and a verified output before adding more rendering domains.02
Data graphics
Turn structured data into charts
Use the current chart API and compare the source against a verified generated PNG.03
Composition
Build reusable scenes and templates
Move from one-off drawing calls to ordered scenes and reusable template definitions.04
Media
Generate GIF, video and audio
Use the current Node media APIs with their runtime, resource and FFmpeg requirements made explicit.TYPE-SAFE AUTHORING
Readable code. Designed output.
This example uses the current createCanvas() and createText() API shape documented by Apexify.js. Syntax color is intentional, not a monochrome terminal dump.
import { writeFile } from 'node:fs/promises';import { ApexPainter } from 'apexify.js'; const painter = new ApexPainter({ type: 'buffer' });const canvas = await painter.createCanvas({width: 1200, height: 630,colorBg: '#101622',}); const png = await painter.createText({text: 'Visual systems, from code.',x: 92, y: 120,font: { size: 72, family: 'Arial' },fill: { color: '#F6F7F9' },}, canvas); await writeFile('launch-card.png', png);APEXIFY.JSVisual systems,
from code.Type · image · scene · media
from code.Type · image · scene · media
Repository verification remains separate from homepage art direction.Open a verified executable example
03
PEAK SHOWCASE
What Apexify looks like at full stretch.
Two finished motion pieces sit above the recipe library: no mockups and no source tutorial attached here—just authored output showing the upper creative range of the engine.
FEATURED FILM / 01
48 SEC1920 × 1080H.264
Apexify Spectrum
Composition, typography, imagery, charts, templates, audio, animation and video gathered into one cinematic Apexify showcase.
FEATURED FILM / 02
36 SEC1280 × 720H.264
Orbit Breaker
A procedural cinematic motion study built from layered visual systems, effects, animation and FFmpeg-backed media output.
04
COMPARE APPROACHES
Apexify.js vs common rendering setups.
This compares typical workflow focus, not every library implementation. The point is where each approach usually puts the composition burden.
CapabilityApexify.jsScreenshot automationChart-focused libraryRaw canvas scripting
Server-side raster output
Built in
Indirect via DOM
Not primary
Manual
Text + image composition
Built in
Indirect via DOM
Not primary
Manual
Charts
Built in
External
Primary focus
Manual / external
Scenes + templates
Built in
External
Not primary
Manual architecture
GIF / video / audio
Built in
External
Not primary
External tooling
“Typical” describes common usage patterns; individual tools can differ substantially.
05
CURRENT + NEXT
Ambitious direction, clearly labeled.
The shipped Node surface stays visually separate from roadmap work. Future runtimes and advanced engine features remain future until they actually ship.
NOW9 current domains
CanvascreateCanvas()Images & shapescreateImage()TextcreateText()ChartscreateChart()ScenescreateScene()TemplatescreateTemplate()GIFcreateGIF()VideocreateVideo()Procedural audiocreateAudio()NEXTexplicit roadmap
Browser runtime
ROADMAPDirect browser rendering with a framework-neutral runtime is planned for the Advanced Engine Program.
@apexify/webReact adapter
ROADMAPJSX/TSX authoring is planned on top of the future browser retained runtime.
@apexify/reactNext.js integration
ROADMAPDedicated server/client integration is planned after the framework-neutral web runtime is complete.
@apexify/nextEngine-native animation
ROADMAPA unified first-party animation and transition system is planned across compatible visual domains.
Advanced Engine Phase 23Retained realtime rendering
ROADMAPIncremental browser updates, dirty tracking and retained resources are future engine work.
Advanced Engine Phase 21