SFML official examples

JavaScript ports of 24 SFML examples, covering graphics, native windows, input, audio and networking. Android is not ported yet. · Feature examples · Games and applications

All examples · Build requirements

Quick start

From the repository root:

npm ci
cd examples/official
node tennis/Tennis.cjs

All commands below run from examples/official. Each script loads its own resources. Graphical examples need a display and OpenGL window support.

Browse: Graphics · Input and events · Audio · Networking · Platform integration

Graphics

Island

Terrain and lighting

Controls · arrows edit parameters, Enter regenerates

node island/Island.cjs

Shader

Five shader scenes

sfml.js logo edge-effect preview

Controls · Left/Right selects, mouse controls parameters

node shader/Shader.cjs

Tennis

Pong

Controls · Space or touch to start, Up/Down to move, Esc to exit

node tennis/Tennis.cjs

Stencil

Animated stencil mask and shapes

node stencil/Stencil.cjs

Text

40 multilingual samples

Controls · click selects, F1/F2/F3 toggle bounds and cursor, F4 cycles preprocessing, Left/Right moves cursor

node text/Text.cjs

Input and events

Keyboard

Physical key layout, key events, text input and sound feedback

node keyboard/Keyboard.cjs

Event handling

Five event dispatch forms

Controls · Enter switches

node event_handling/EventHandling.cjs

Raw input

Raw mouse motion

node raw_input/RawInput.cjs

Joystick

Axes and buttons

Controls · 0–7 selects a joystick, Tab switches generic/gamepad views

node joystick/Joystick.cjs

Audio

Recording examples need a microphone and recording permission.

Sound effects

Nine effects

Controls · Left/Right selects, mouse adjusts, Up/Down selects attenuation/waveform, Space bypasses DSP, F1 changes output

node sound_effects/SoundEffects.cjs

Sound

WAV sound followed by OGG, FLAC and MP3 music

node sound/Sound.cjs

Sound capture

Choose a device/rate, record, then play or save

node sound_capture/SoundCapture.cjs

Sound device

Device notifications, automatic routing and device-loss recovery; Ctrl+C exits

node sound_device/SoundDevice.cjs

Networking

HTTP

Interactive HTTP GET with redirects

node http/Http.cjs

FTP

Interactive FTP client, port 21

node ftp/Ftp.cjs

SFTP

Interactive SFTP client; confirm the host fingerprint, then authenticate

node sftp/Sftp.cjs

Sockets

TCP, TLS or UDP greeting exchange, port 50001

node sockets/Sockets.cjs

VoIP

TCP voice capture, playback and replay, port 2435

node voip/VoIP.cjs

For sockets and VoIP, run the entry point in two terminals: select server in one and client in the other. Use 127.0.0.1 for a local exchange.

Platform integration

Building nodegl requires CMake, a C++ compiler and OpenGL development libraries (libgl1-mesa-dev on Linux). Vulkan also needs a Vulkan loader and a driver supporting 4× anisotropic filtering.

Window

A rotating six-colored cube in an OpenGL window

Controls · resize by dragging the window border; Esc or window close exits

node window/Window.cjs

macOS, Linux, Windows · @wettstein/nodegl, installed by the root npm ci

OpenGL

SFML background and text with a textured OpenGL cube

Controls · mouse moves the cube, Enter toggles mipmapping, Space toggles sRGB, Esc exits

node opengl/OpenGL.cjs

macOS, Linux, Windows · @wettstein/nodegl, installed by the root npm ci

Vulkan

A rotating textured cube rendered with Vulkan

Controls · mouse moves the cube, drag the window border to resize, Esc or window close exits

node vulkan/Vulkan.cjs

Linux x64 (X11) or Windows x64, Node.js 20+ · npm ci --prefix vulkan --ignore-scripts

Vulkan targets Linux/X11 and Windows x64, using nvk 0.8.0 with a Vulkan loader and a driver/device supporting 4× anisotropic filtering. SFML handles the window, events and surface; nvk drives Vulkan directly without a custom native bridge. SFML Graphics still uses OpenGL. SFML's Vulkan integration is unavailable on macOS at compile time; MoltenVK alone does not enable it. Native rendering and interaction checks passed on Linux/X11 and Windows. See the platform guide for controls and requirements.

Cocoa

Native macOS controls with an embedded SFML view

Controls · Update or Enter applies text; Visible toggles the logo; the dial rotates it; Color selects the background; Up/Down scales it; close, Cmd+Q or Ctrl+C exits

node cocoa/Cocoa.cjs

macOS · npm ci --prefix cocoa --ignore-scripts

Win32

A native Windows window with two animated SFML views and a Quit button

Controls · Quit, window close or Ctrl+C exits

node win32/Win32.cjs

Windows x64, Node.js 20+ · npm ci --prefix win32 --ignore-scripts

X11

Two embedded SFML windows with cubes rotating at different speeds

Controls · any key, window close or Ctrl+C exits

node X11/X11.cjs

Linux with X11 · x11 and @wettstein/nodegl, installed by the root npm ci

Sources and licenses

Based on the SFML examples. Source revisions and asset provenance are recorded in provenance.json.

• SFML source: zlib license.
• Upstream assets and their authors: asset_licenses.md.
• Noto fonts: SIL Open Font License 1.1.
• Ported stb Perlin implementation: MIT/public-domain dual license.