Minimal API Examples

Read as Markdown

Start with one complete program, then follow its API links for exact options and limitations. Browser examples include live previews; type-level and host-specific examples are labeled explicitly. Every source uses public package imports.

animation

Tween playback controls: Animate a signal and control the mounted playback with native buttons. (live preview)
Compose keyframes and springs: Run two independent tracks together, then mark, wait, and repeat. (live preview)
Custom sampling and fixed steps: Combine a time-sampled sine wave with a fixed-step state machine. (live preview)
Animate changing targets: Compare a tween and spring as the same target changes. (live preview)

compiler

Automatic JSX runtime: The production compiler emits jsx and jsxs calls for component values and fragments. (live preview)
Development JSX runtime: The development compiler emits jsxDEV calls with source-location metadata. (live preview)

drawing

Rounded and circular marks: Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. (live preview)
Polygon marks: Draw a rounded triangle, regular hexagon, and five-point star. (live preview)
Lines and authored paths: Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. (live preview)
Drawing composition: Group, cache, and clip a drawing, then add text and an embedded thumbnail. (live preview)

events

Typed event target: A geometric Canvas target routes pointer, mouse, touch, wheel, keyboard, input, clipboard, and drag events. (live preview)
Focus and arrow navigation: Two logical targets participate in Tab focus and directional keyboard navigation. (live preview)
Memoized hit paths: Rectangle, line, and SVG path hooks define three independent geometric click targets. (live preview)

filters

Blur and cast a shadow: Compare an original multicolor subject with separate blur and silhouette-shadow treatments. (live preview)
Adjust brightness, contrast, and saturation: Compare brightness, contrast, and saturation independently against the same original subject. (live preview)
Shift a color treatment: Compare grayscale, hue rotation, and inversion independently against a colorful original. (live preview)
Warm and fade a shape: Compare sepia and raster opacity against an original, with a checkerboard revealing transparency. (live preview)
Refract and light water: Compare an original tiled subject, displacement, reflected light, and their combined result. (live preview)

layout

Absolute and overlay layout: Position a block absolutely and center content within an overlay. (live preview)
Flow and flex layout: Stack a banner with a flexible row of marks. (live preview)
Grid and responsive style: Place marks on explicit grid tracks and apply a local width rule. (live preview)
Box resolution: Resolve padding, percentages, and a constrained box with typed diagnostics. (live preview)
Intrinsic measurement: Measure a Text element with a Canvas service and display its computed dimensions. (live preview)
Allocated layout box: Read the current canvas allocation and draw an inset panel. (live preview)

lifecycle

Read and update signals: Use writable, readonly, and computed values with synchronous batching. (live preview)
Component-owned state and reactions: Click to update a signal, derive a value, and publish an imperative effect after commit. (live preview)
Typed components and recursive children: Build a component with createElement, group its children in a Fragment, and render textual children. (live preview)
Mount, update, and dispose: Own one Pibbl root for a canvas and replace its content without creating another controller. (live preview)
Define a Canvas primitive: Supply synchronous drawing, style normalization, resolution, and opt-in measurement. (live preview)
Host a native button in Pibbl: Mount and update native HTML inside an HtmlBox, preserving native clicks and focus. (live preview)
Define and own a texture: Rasterize a small animated tile and send it a message from native HTML. (live preview)
Configure viewport and pixel density: Compare a fixed logical viewport with one that follows a resizable host. (live preview)

machines

Cancelable machine tasks: Run a state-owned task, observe completion, and release actors and listeners. (live preview)
State-owned animation: Move a circle with a machine-owned animation task that completes into the next state. (live preview)

manipulation

Drag, resize, and rotate: Use the convenience component with a writable geometry box. (live preview)
Own a manipulation controller: Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. (live preview)
Style resize and rotation handles: Add corner handles, a rotation connector, an angle arc, and gesture readouts. (live preview)

particles

Particle descriptors: Define randomized spawn values and lifespan curves. (live preview)
Particle effect configuration: Compose a typed ember emitter from emission, motion, appearance, and bounds. (live preview)
Effect parameters: Define typed spawn and render parameters and use them in an effect. (live preview)
Mounted particle system: Mount a manual burst effect and trigger it with pointer input. (live preview)
Flow-driven particles: Advect mist through a mount-owned flow field and source. (live preview)
Particle lifecycle events: Handle the discriminated event and diagnostic records. (live preview)

paths

Editable path geometry: Build a cubic path, convert it, and compare flattening and simplification utilities. (live preview)
Circular path factories: Create circle, ellipse, arc, and wedge Path2D shapes. (live preview)
Polygon path factories: Create rounded rectangles and polygons alongside regular and star shapes. (live preview)
Line and SVG paths: Construct a polyline and an SVG path from authored coordinates. (live preview)
Affine transforms: Compose translation and scaling, then transform geometry and a sample point. (live preview)
Quad and envelope warps: Warp a tile through a quadrilateral and between measured guide paths. (live preview)
Arc and path bending: Bend geometry around an arc and along a guide with explicit placement options. (live preview)
Mesh warp: Define a one-cell guide mesh and warp a circle through it. (live preview)

physics

Shape measurements: Compare bounds, area, and mass for four common 2D shapes. (live preview)
Path-like shapes: Create curved, stroked, and polygonal shapes and transform them. (live preview)
Geometry queries: Check point containment, separation, overlap, contact, and casts. (live preview)
Live physics world: Mount a falling ball, inspect it, and control its body with buttons. (live preview)
World queries: Query a static collider by ray, moving shape, overlap, point, and bounds. (live preview)
Physics drawing components: Draw four physics shapes and move a custom kinematic collider. (live preview)
Physics events: Record collisions, sensor overlap, body sleep, and contact inspection. (live preview)
Deterministic physics test: Advance a public physics scene through controlled host frames. (live preview)

render layers

Interactive bitmap layer: Draw a dot into an OffscreenCanvas and route clicks through Pibbl’s event boundary. (live preview)
Three.js scene layer: Mount a lit Three.js cube with Pibbl target clicks and raycast picking. (live preview)
Three.js orbit controls: Drag a cube using OrbitControls connected to Pibbl-routed input. (live preview)

sprites

Animated sprite atlas: Generate a two-frame atlas, animate a shared sheet, and dispose it after unmounting. (live preview)
Sprite format adapters: Compare normalized Aseprite, TexturePacker, and application-owned atlas metadata. (live preview)

text

Text outline: Load an outline font, shape a text run, and paint its editable path with glyph metrics. (live preview)

textures

Render a procedural material: Paint a marble material with a typed palette, resolution, and synchronous renderer. (live preview)
Paint reaction diffusion: Mount an interactive reaction-diffusion layer with a typed brush. (live preview)
Compare three material recipes: Compare labeled marble, paper, and cellular swatches with palettes that reveal their surface detail. (live preview)
Send paint to a living ink texture: Create a reaction-diffusion recipe and send a typed paint command on click. (live preview)
Ripple a wave map: Refract and light a tiled sign through fine, fast-moving waves, with an unfiltered comparison toggle. (live preview)
Ripple around an obstacle: Use a bounded water surface with a normalized rectangular obstacle. (live preview)
Refract through rain glass: Use a rain map for displacement and localized condensation blur. (live preview)
Add a weighted filament source: Attach electric filaments to typed source sites and add one on click. (live preview)
Connect two electric points: Render a lightning recipe and reset its deterministic seed on click. (live preview)

transitions

fade enter and exit: Show and hide a captured Pibbl subtree with the fade transition. (live preview)
slide enter and exit: Show and hide a captured Pibbl subtree with the slide transition. (live preview)
zoom enter and exit: Show and hide a captured Pibbl subtree with the zoom transition. (live preview)
wipe enter and exit: Show and hide a captured Pibbl subtree with the wipe transition. (live preview)
blurReveal enter and exit: Show and hide a captured Pibbl subtree with the blurReveal transition. (live preview)
dissolve enter and exit: Show and hide a captured Pibbl subtree with the dissolve transition. (live preview)
bifrost enter and exit: Beam a transparent logo in and out with Bifrost, using a dark stage and space for its luminous trails. The first entrance runs automatically. (live preview)
hologram enter and exit: Project a spacecraft with swept wings, a transparent window, and detached exhaust shapes. Hologram follows the painted silhouette, not a filled rectangle. The first entrance runs automatically; Show and Hide replay either direction. (live preview)
embers enter and exit: Break a transparent logo into glowing Embers, with a dark stage and space for falling particles. The first entrance runs automatically. (live preview)
Define a custom transition: Render a captured subtree with a custom synchronous alpha curve. (live preview)

viz

Scales and axes: Create band and linear scales with a typed axis and inspect resolved mappings. (live preview)
Line series: Plot readings with a nullable gap and a scale-adjusted marker. (live preview)
Point and custom plot series: Render styled point marks and custom keyed point content. (live preview)
Threshold-colored bars: Render category bars with a typed style resolver and threshold fill. (live preview)
Pie chart composition: Compute pie geometry and render labeled donut slices. (live preview)
Nearest-point lookup: Locate the nearest observation in pixel and domain space. (live preview)
Hover query helpers: Run closest-point, closest-x, and interpolated-x queries against a scale context. (live preview)
Hover inspection card: Display a measured point in a bounded hover card. (live preview)
Anchored callouts: Arrange labeled callouts while clearing their anchor points. (live preview)
UTC scales and domain helpers: Render real NOAA observations with UTC calendar ticks, numeric extents and outward domain rounding. (live preview)
UTC dates across New Year: Keep month, day, and year visible when a calendar axis crosses into a new year. (live preview)
File sizes across orders of magnitude: Multiplying the size by ten moves the same distance. (live preview)
Daily inventory changes: Negative means shipped; positive means received. (live preview)
Checkpoints in a review: Categories have equal spacing, not numeric distance. (live preview)
Readable numeric ticks: Round a temperature range outward and format evenly spaced tick labels with units. (live preview)
A target zone and reference line: Compare three tank-fill readings with a shaded target zone, a target line, and percentage grid lines. (live preview)

Documentation version

Documentation built with @pibbl/core 0.0.2, revision c321a83. ALPHA — NOT FOR PRODUCTION USE.