Phase 5 — Official Affinity SDK Examples

This phase is different from the others. Instead of lessons we wrote, it is a curated set of example scripts shipped by the Affinity team inside the application at JSLib/examples (within the Affinity app bundle). They are the closest thing the SDK has to official "best practice" references — small, focused scripts that each demonstrate one area of the API the way the people who built it intended it to be used.

Treat them as a companion to the lessons. Where a lesson explains a concept, these show it in a complete, runnable form. They are reproduced here verbatim, including their BSD 3-Clause license headers (© Canva Pty Ltd.), so you can trust that they reflect the real, current SDK.

Each example lives in its own folder alongside its source file. The table below links to each folder's write-up.

How to run these examples

The official scripts are written as modules: each one defines a main function and ends with module.exports.main = main rather than calling main() itself. That is why they live in the app's /examples/ folder — they are meant to be loaded and invoked, not pasted-and-run as a standalone script.

To run one from the script editor:

1. Open the script in the editor (or paste its contents in).
2. Add a single line at the end: main();
3. Click Run.

Alternatively, if you run a script from within the app's own examples folder, you can invoke another example as require('/examples/<name>.js').main(); — that is exactly what the comments in bulgedPolyline.js, bulgeVersinePlayground.js, and tableFromJson.js do.

Caveat — require('/examples/...') paths. A few scripts (tableFromJson.js, bulgedPolyline.js, bulgeVersinePlayground.js) call require('/examples/...') to load data or other examples. That absolute path only resolves when the file is sitting in the Affinity app's own JSLib/examples directory. If you paste a copy from this tutorial, replace that require with the data you need (for tableFromJson.js, the dataset it loads is included here as countries.json) or run it directly from the app's examples folder.

Mixed require styles. The official examples are not entirely consistent with each other: some use require('/document') and some require('/document.js'); some pull constants from require('affinity:common'). Our lessons always use the .js form (require('/module.js')), which is what SDK-PRIMER.md documents — follow that convention in your own scripts.

Examples at a glance

Layout & print

#	Example	Area	What it shows
01	addGuides.js	Layout	Adding margin guides around objects, with a live-preview dialog
02	alignToPage.js	Layout	Aligning the selection to the page (or page margins)
03	adjustPageItems.js	Layout	Per-page offset of items across a page range
04	artboardGrid.js	Layout	Generating a grid of artboards programmatically
20	cropMarks.js	Print	Crop/bleed marks for print output
21	makeGrid.js	Layout	Grid of shapes or text frames with spacing
22	stepAndRepeat.js	Layout	Duplicate selection with progressive offset, rotation and scale
23	makeNumbersSequence.js	Text / Data	Number selected text objects with prefix/suffix/padding

Document & selection

#	Example	Area	What it shows
05	setDocumentFormat.js	Document	Changing the document's raster format
33	countSelectedItems.js	Selection	Count selected objects by type, including nested children
34	selectObjects.js	Selection	Select objects by type/state through a dialog

Geometry & paths

#	Example	Area	What it shows
06	addPoints.js	Geometry	Subdividing curves at their midpoints
07	bulgedPolyline.js	Geometry	Building a polyline with bulgeToXY sections
08	bulgeVersinePlayground.js	Geometry	Interactive bulge/versine curve explorer
16	cornerEffects.js	Geometry	Corner effects on curves (rounded, bevel, inset, fancy)
17	divideLength.js	Geometry	Divide curve segments into equal lengths
18	pathEffects.js	Geometry	Punk, bloat, twirl and retract path effects
19	roundAnyCorner.js	Geometry	Round corners of selected curves with radius clamping

Text & story

#	Example	Area	What it shows
09	textOnCurvesAndShapes.js	Geometry / Text	The four curve- and shape-backed text node types
10	boldItalics.js	Text	Bolding and italicising the selected text
11	tableFromJson.js	Text / Data	Populating a TableTextNode from JSON (needs countries.json)
26	breakFrame.js	Text	Break a text frame at the cursor position
27	opticalBackward.js	Text / Arrange	Move selection backward only past overlapping siblings
28	opticalForward.js	Text / Arrange	Move selection forward only past overlapping siblings
29	splitStory.js	Text	Split a story at the cursor into two text frames

Strokes & lines

#	Example	Area	What it shows
30	arrowheads.js	Stroke	Arrowheads on curve start/end with scale
31	strokesWeightDown.js	Stroke	Decrease stroke weight by 1pt across selection
32	strokesWeightUp.js	Stroke	Increase stroke weight by 1pt across selection

Transform & effects

#	Example	Area	What it shows
24	randomise.js	Transform	Randomise position, rotation, scale and opacity
25	swapObjects.js	Transform	Swap positions of two selected objects

Raster, colour & dialog

#	Example	Area	What it shows
12	bitmapWriter.js	Raster	Two ways to write pixels into a bitmap
13	meshBubble.js	Colour	Building a mesh-gradient "soap bubble" fill
14	flexibleLayout.js	Dialog UI	Column stacks, colour pickers, and dynamic visibility
15	logToFile.js	Diagnostics	Writing structured log records to a file

Attribution & license

All scripts in this phase are © 2026 Canva Pty Ltd. and are reproduced under the BSD 3-Clause License. The original files ship inside the Affinity application bundle at JSLib/examples. They are included here unchanged (license headers intact) as a reference collection; they are not original tutorial content.