Feature examples

Run from the sfml.js repository root after npm ci; run npm run build after source changes. All entries except Network open a graphical window and require a display with OpenGL support.

Overview · Official examples · Games and applications

Run the commands below directly after building. The demo:* scripts in package.json rebuild as configured. Close the window to exit; entries with a frame limit also finish automatically. Screenshots show a particular rendered scene, not performance or device-test results.

For an application using only public APIs, start with the Quick start. Helpers are listed with their entry points, not as separate programs.

System

sleep-err.cjs

Asynchronous waiting and SFML log output

node examples/sleep-err.cjs

S waits two seconds; W writes a log; N triggers a native diagnostic; R captures logs in the panel, M mutes them, D restores stderr. Esc exits.

Optional frame limit: --frames=120.

npm run demo:sleep-err

vector-scalars.cjs

Vector operations with different numeric scalar types

node examples/vector-scalars.cjs

Live TypedArray storage and native comparisons for scalar vector types. Esc exits.

No --frames option; close the window to stop.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Window

window.cjs

Window events, cursors and input diagnostics

node examples/window.cjs

F1 cycles cursors, F2 toggles cursor visibility, F3 key repeat, F4 VSync, F5 window size, F6 size limits, F7 title, F8 hides/restores the window, F9 cycles event-handling modes, F10 moves the window. Arrows move the marker; typing edits text, Backspace deletes, Esc exits.

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:window

system-window.cjs

System and Window APIs

node examples/system-window.cjs

C copies sample text to the system clipboard, V reads it, A switches OpenGL contexts; Esc exits. Touch needs supported hardware; macOS trackpad gestures are not SFML touches.

Optional frame limit: --frames=120.

npm run demo:system-window

Graphics

all-types.cjs

Combined scene with value types, transforms, shapes, vertices and text

node examples/all-types.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: all-types-scene.cjs, bitmap-label.cjs

npm run demo:types

sprites.cjs

Drawing large numbers of sprites

node examples/sprites.cjs

256 animated sprites. Optional --uncapped removes the demo timer.

No --frames option; close the window to stop.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

npm run demo

image.cjs

Pixel editing, copying, masking and codecs

node examples/image.cjs

Optional --file=/path/to/image.png supplies an image.

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:image

texture.cjs

Image loading, cropping, partial uploads and sampling

node examples/texture.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:texture

sprite.cjs

Sprite animation, flipping, colors and bounds

node examples/sprite.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:sprite

render-texture.cjs

Off-screen composition, texture views and draw snapshots

node examples/render-texture.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:render-texture

drawable.cjs

Custom composition, parent-child transforms, blending and stencil

node examples/drawable.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

Helpers: bitmap-label.cjs

npm run demo:drawable

vertex-array.cjs

Dynamic tiles and contiguous vertices

node examples/vertex-array.cjs

Optional frame limit: --frames=120.

Repository diagnostic: uses internal native preview or verification APIs, not a public application template.

npm run demo:vertices

text.cjs

Text layout and vertex animation

node examples/text.cjs

Optional --font=/path/to/font.ttf and --text=Hello select font and text. The font must contain the requested glyphs. Esc exits.

Optional frame limit: --frames=120.

npm run demo:text

Audio

audio.cjs

Sound, Music, Worker data production, effects and recording playback

node examples/audio.cjs

1–4 select modes, Space plays/pauses, S stops, E toggles effects, R/T start/stop recording, arrows adjust pan/volume, Esc exits. Recording needs a microphone and permission; ordinary startup waits for input.

Optional frame limit: --frames=120.

Helpers: audio-worker.cjs

npm run demo:audio

Network

network.cjs

Local TCP, Packet, UDP and Selector

node examples/network.cjs

Console-only local TCP, Packet, UDP and SocketSelector exchange on dynamically allocated loopback ports; runs in one terminal and closes its sockets automatically.

npm run demo:network

Screenshots

Graphics examples supporting SFML_DEMO_SNAPSHOT can save their rendered output. For example, on macOS/Linux:

SFML_DEMO_SNAPSHOT=/tmp/sfml-render-texture.png \
  node examples/render-texture.cjs --frames=2

PowerShell:

$env:SFML_DEMO_SNAPSHOT = "$env:TEMP/sfml-render-texture.png"
node examples/render-texture.cjs --frames=2
Remove-Item Env:SFML_DEMO_SNAPSHOT

Built-in snapshots use SFML_DEMO_SNAPSHOT. all-types, sprites, drawable, vertex-array, system-window and sleep-err write PPM regardless of the filename extension; use .ppm. image, texture, sprite, render-texture, window and audio support PNG. text and vector-scalars do not implement this environment variable; their previews were captured with temporary instrumentation.

Use a finite frame count for sleep-err (saved at the last frame) and vertex-array (saved after the loop). system-window, window and audio need at least two frames; other built-in previews may capture the first frame. sprites captures its first frame and keeps running until closed. Capture provenance is recorded in sources.json.