API reference

Each entry point is its own module: import only what you use. The root import holds the core.

Import	What it holds
`pixi-silk`	SilkGraphics, createSilkApp, gradients (linear, radial, conic, along, mesh), colour and curve helpers, motion helpers, enableSilkBatching.
`pixi-silk/signal`	signal, computed, watch, batch: the small reactive store every widget state uses.
`pixi-silk/selection`	Selection store and bindOutline, bindGizmo, bindMeasure.
`pixi-silk/history`	History (undo and redo), recordSignals, recordGizmo, bindHistoryKeys.
`pixi-silk/path`	Bezier path model: BezierPath, drawPath, parseSvgPath, pathToSvg and edit operations.
`pixi-silk/ui/radial`	RadialMenu and bindRadialTrigger: a ring menu with submenus.
`pixi-silk/ui/button`	SilkButton: pill, circle or squircle button with press, hold, busy and appear animations.
`pixi-silk/ui/dock`	ButtonDock: a row or column of SilkButtons that closes the gap when one hides.
`pixi-silk/ui/gizmo`	TransformGizmo: move, rotate, scale and box handles.
`pixi-silk/ui/outline`	SelectionOutline: hover and selection outlines.
`pixi-silk/ui/pathgizmo`	PathGizmo and PenTool: edit and draw Bezier paths.
`pixi-silk/ui/camera`	Camera: pan and zoom a world container, ZoomControl.
`pixi-silk/ui/measure`	Measure: size labels and red lines between objects.
`pixi-silk/ui/grid`	CanvasGrid: dots or lines that follow the camera.
`pixi-silk/ui/ruler`	Ruler: screen-edge rulers that follow the camera.
`pixi-silk/ui/guides`	Guides: draggable guide lines from the rulers.
`pixi-silk/ui/marquee`	Marquee: drag a box to select.
`pixi-silk/ui/group`	SelectionGroup: transform several objects as one.
`pixi-silk/ui/spacing`	SpacingMarkers and findSpacing: equal-gap hints.
`pixi-silk/ui/snap`	SnapEngine and SnapGuides: snap boxes to edges, centres and lines.
`pixi-silk/ui/color`	Colour pickers: wheels, rings, OKLCH, channel sliders.
`pixi-silk/ui/halo`	ContextHalo: a ring of actions around a selected object.
`pixi-silk/ui/brush`	BrushCursor: a brush size and hardness cursor.
`pixi-silk/ui/modes`	SegmentedSwitch and ModeSwitcher: tool mode pickers, including the hold-a-key ring.
`pixi-silk/ui/dial`	JogDial and Scrubber: rotary and drag-to-change number inputs.
`pixi-silk/ui/timeline`	MiniTimeline: frames, keys, loop range and playback.
`pixi-silk/ui/odometer`	Odometer: a rolling number counter with prefix, decimals and count-up timing.
`pixi-silk/ui/gesture`	trackGesture: tap, hold, flick and drag from one target, with slop per pointer kind.
`pixi-silk/ui/arc`	Angle maths for ring widgets: angleDelta, wrapAngle, snapTo, rubberBand.
`pixi-silk/ui/keys`	Shared keyboard state: isKeyDown, modifier checks, onKey, isTypingTarget.
`pixi-silk/ui/pill`	ValuePill: a small rounded label for live readouts (angles, sizes, distances).
`pixi-silk/ui/textedit`	TextEditor: an editable SilkText field with caret, selection and IME.
`pixi-silk/ui/panel`	Panel: a docked, scrolling side panel drawn on the canvas.
`pixi-silk/ui/layers`	LayerTree: a layer tree over any data through an adapter, with selection and history.
`pixi-silk/ui/inspector`	Inspector: property fields bound to the selection.
`pixi-silk/ui/minimap`	Minimap: an overview of the world with the camera frame.
`pixi-silk/glass`	Glass: a frosted pane that blurs and bends what is behind it.
`pixi-silk/glow`	Glow, Aurora and light helpers (neon, halo, rays, spectrum).
`pixi-silk/webgpu`	enableWebGPU: installs the WGSL shader for your own WebGPU Application.
`pixi-silk/text`	SilkText: distance-field text with outline, shadow and gradient fill. SdfAtlas, layoutText, caret helpers.
`pixi-silk/layout`	LayoutNode: a headless flex layout engine with no Pixi in it.
`pixi-silk/ui/layout`	SmartContainer and FlexContainer: place and scale a design box in the window, flex children inside it.
`pixi-silk/ui`	Every widget and editor tool in one import. The per-widget subpaths ship less code.

The root import#

import { SilkGraphics, createSilkApp } from 'pixi-silk';

Classes#

Class	Description
ConicGradient	An angular ramp around a centre. On arcs it follows the arc. Create it with conic.
Gradient	Base class of all gradients. Stops are interpolated premultiplied (OKLab by default), baked into a shared half-float atlas and dithered when sampled, which hides banding.
GradientAtlas	All gradient ramps live in one RGBA16F texture, 256 samples by 256 rows, shared by every SilkGraphics. Half floats keep about 11 bits per channel, so dark and low-alpha ramps are not quantised before the shader dithers them to the 8-bit framebuffer. You rarely need it directly.
LinearGradient	A straight ramp between two points. Create it with linear, vertical or horizontal.
MeshGradient	A smooth colour surface through a grid of control colours, like a gradient mesh in Illustrator. Colours blend with a bicubic spline in its `space` (OKLab by default), so falloffs stay soft in both directions. The surface is baked at 16x16 samples. Create it with mesh.
PathGradient	A ramp that follows a stroke from its first point (t = 0) to its last (t = 1). Create it with along.
RadialGradient	A ramp from a centre outwards, optionally starting at an inner radius. Create it with radial.
SilkGeometry	Geometry behind every SilkGraphics: one unit quad plus an interleaved instance buffer of 44 floats (`STRIDE`) per primitive. You rarely need it directly.
SilkGraphics	A PixiJS display object with a `Graphics`-like API. Every primitive is a signed distance field evaluated per pixel, so edges stay sharp at any zoom, rotation and device pixel ratio. Each object is one instanced draw call, and `enableSilkBatching()` merges neighbours further.
SilkPipe	Render pipe that draws runs of consecutive SilkGraphics in one instanced draw call, under WebGL2 and WebGPU. enableSilkBatching installs it.
Spring	Damped harmonic spring with unit mass, integrated in fixed 1/240 s sub-steps. `stiffness` and `damping` follow the usual UI spring convention. The defaults are 170 and 26.

Interfaces#

Interface	Description
AreaOptions	Options of `area()`: monotone smoothing of the series and its sample spacing.
ConicGradientOptions	Options of conic: stops plus centre, start angle and sweep.
FillStyle	How a fill is painted: colour or gradient, opacity, blur with spread, blend mode and inner shadows.
GradientOptions	Options shared by every gradient: colour stops, interpolation space, easing, extend mode and units.
InnerShadow	A shadow drawn inside the shape from its own distance field, with Figma’s semantics. The shape is moved by `x` and `y`, shrunk by `spread` and blurred. What it no longer covers is shaded.
LinearGradientOptions	Options of linear: stops plus the start and end points of the ramp.
MeshGradientOptions	Options of mesh: where the grid sits, its units and its interpolation space.
PolylineOptions	Options of `polyline()`: closed loops and monotone or Catmull-Rom smoothing of the points.
ProgressiveBlur	A blur that changes across the shape, like Figma’s progressive layer blur. The radius goes from `from` at one edge of the shape to `to` at the opposite edge, along `angle`.
RadialGradientOptions	Options of radial: stops plus centre, outer radius and inner radius.
SilkApp	What createSilkApp returns: the Pixi application, its CSS size and resolution, and helpers to change or destroy it.
SilkAppOptions	Options of createSilkApp: Pixi application options plus the element to fill, DPR limits and touch behaviour.
SilkGraphicsOptions	Per-object rendering settings of a SilkGraphics: dithering, anti-aliasing width and hairline threshold.
StrokeStyle	How a stroke is painted: width (or tapered widths), alignment, caps, dashes, plus everything in FillStyle.

Type Aliases#

Type Alias	Description
ColorSpace	Colour space gradients are interpolated in: perceptual OKLab (default), linear light, or plain sRGB.
Easing	How the ramp moves between stops.
ExtendMode	What a gradient does outside 0..1: hold the end colours (`pad`), tile (`repeat`) or mirror (`reflect`).
FillInput	What `fill()` accepts: any Pixi colour, a gradient or a FillStyle.
GradientUnits	Gradient coordinates: `shape` = fractions of each painted shape’s box, `local` = the graphics’ local units (one ramp across many shapes).
LineCap	Shape of the ends of open paths and of every dash: flat, round or square.
LineJoin	Shape of the corners where two segments of a stroke meet.
MeshColorInput	A mesh control colour: any Pixi colour, or `[color, alpha]`.
PointsInput	Points as a flat `[x0, y0, x1, y1, ...]` array, a typed array, or an array of `{ x, y }` objects.
RGBA	Straight (non-premultiplied) sRGB colour with alpha, all channels 0..1, as returned by parseColor.
ShapeOp	A shape operation: `union` merges, `subtract` cuts the later shapes out of the first, `intersect` keeps the overlap, and `exclude` keeps what is covered an odd number of times.
StopInput	A color stop: a bare color (stops are spread evenly), `[offset, color]`, `[offset, color, alpha]` or `{ offset, color, alpha }`.
StrokeInput	What `stroke()` accepts: any Pixi colour, a gradient or a StrokeStyle.
Vec2	A point `[x, y]`. In `shape` units, x and y are fractions of the painted shape’s box.

Variables#

Variable	Description
ease	Easing curves for tweens (t from 0 to 1): inOutCubic, outCubic, inOutSine, outExpo.

Functions#

Function	Description
along	Gradient that follows a stroke from its first point (t = 0) to its last (t = 1).
catmullRom	Samples a centripetal Catmull-Rom spline through flat points. It has no cusps or self-loops within a segment. `closed` adds the segment back to the first point. `step` is the target sample spacing in local units, at most 64 per segment. `alpha` 0.5 is centripetal (0 uniform, 1 chordal). Fewer than 3 points come back as a copy.
conic	Conic (angular) gradient. On arcs and sectors it spans the arc by default, so a ring’s ramp always runs from its start cap to its end cap.
createSilkApp	Creates a Pixi application, appends its canvas to `parent` and keeps it sized to it.
damp	Exponential approach: returns `current` moved towards `target` over `dtSeconds`. `lambda` is about 1 / seconds, higher is snappier. It never reaches the target exactly.
dampAngle	Like damp for angles in radians: it turns the short way round. The result is not wrapped to one turn.
enableSilkBatching	Turns on batching across objects, which is off by default. Runs of consecutive SilkGraphics with the same blend mode and settings then render in one draw call. Only objects created after the call take part, and an object with `batch: false` never does. There is no call to turn it off. Each renderer gets the pipe the first time it draws one of them, so you can call it before or after creating the Application. It is safe to call again.
horizontal	Left-to-right linear gradient across each painted shape’s box.
linear	Linear gradient. `from` / `to` default to top and bottom of the shape’s box (`units: 'shape'`).
linearToOklab	Converts linear-light sRGB to OKLab (Björn Ottosson’s perceptual colour space), used to interpolate gradients evenly.
mesh	Gradient mesh: `cols` by `rows` control colours (row by row, top-left first) spread over the painted shape’s box, blended into one smooth surface. `cols` and `rows` are clamped to 1..16. Missing colours repeat the last one.
monotoneX	Monotone cubic interpolation in x (Steffen’s method, same family as d3’s monotoneX). Never overshoots the data: peaks stay at the data points, flat runs stay flat. `step` is the target spacing of the output samples in local units, at most 64 per segment. Points must be sorted by x. Fewer than 3 points come back as a copy.
oklabToLinear	Converts OKLab back to linear-light sRGB. Out-of-gamut colours fall outside 0..1, so callers clamp.
parseColor	Converts any Pixi `ColorSource` to straight sRGB `[r, g, b, a]`, channels 0..1, with `alpha` multiplied in. Returns a new array. Numbers and strings are cached, up to 1024 of them.
radial	Radial gradient from `center` (default the box centre) out to `radius`, optionally starting at `innerRadius`.
toFlat	Copies any PointsInput into a new flat `[x0, y0, x1, y1, ...]` array.
vertical	Top-to-bottom linear gradient across each painted shape’s box.