Menu
Wire a generated FS.Skia.UI product to the desktop viewer host.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Consumer-facing guide to hosting an interactive FS.Skia.UI app — the keyboard/pointer input surface, the preview-vs-tree render distinction, and the windowed-fullscreen blur caveat.
Build Skia-rendered FS.Skia.UI Controls, rich text, chart controls, graph controls, DataGrid, custom wrappers, and generated product examples.
Generated product guidance for Skia-rendered FS.Skia.UI Controls, rich text, chart controls, graph controls, DataGrid, and custom wrappers.
Understand and work with the internal keyed VDOM diff over the lowered Control<'msg> IR (feature 067) — its key-first-then-positional matching, the NodePatch/ChildOp operation set, the totality/determinism/identity-at-rest/round-trip invariants, and the module's disposition (internal, property-tested, wired onto the live render path via RetainedRender in feature 091 and current through feature 103 — layout/bounds cache, injected-delta animation clock, visual-state cross-fade). Use when reading the diff invariants, extending the property tests, or working on the wired retained render path.
Maintainer-facing guide to the FS.Skia.UI.Controls.Elmish interactive-host seam — how runInteractiveApp drives the retained render structure each frame (RetainedRender.step over the keyed diff), advances per-identity animation clocks from an injected Tick delta, stamps runtime visual state pre-reconcile, routes keys focus-first through routeFocusedKey, and resolves pointer hits to a stable identity via retainedHitTest. Use when reading or extending the live controls host loop, the per-frame retained-state/clock/visual-state wiring, or the key/pointer routing seam.
Generated product guidance for Skia-rendered FS.Skia.UI Controls, rich text, chart controls, graph controls, DataGrid, and custom wrappers.
| name | fs-skia-skiaviewer |
| description | Wire a generated FS.Skia.UI product to the desktop viewer host. |
Use this skill for the host boundary of a generated product: opening the native
window, rendering scenes, routing keyboard input, advancing time, and
interpreting ViewerEffect values returned by your pure update.
The signatures you consume are bundled with this product at
docs/api-surface/SkiaViewer/SkiaViewer.fsi. Viewer.runApp is the canonical
entry point and the only place that performs host-boundary I/O. See
docs/effects-boundary.md for the full effect-category description.
open FS.Skia.UI.SkiaViewer
// Bundle your pure pieces into the host record.
let generatedHost =
{ Init = fun () -> initialModel, [] // initial model + startup effects
Update = update // pure Msg -> Model -> Model * ViewerEffect list
View = view // Model -> SceneNode
MapKey = mapKey // ViewerKey -> bool -> Msg option
Tick = tick // TimeSpan -> Msg option
Diagnostics = Viewer.defaultDiagnostics }
match Viewer.runApp viewerOptions generatedHost with
| Ok _ -> 0 // window opened, scenes rendered, effects interpreted
| Error _ -> 1 // classified host/launch/verification failure
Run ./fake.sh build -t Dev then ./fake.sh build -t Verify in this product.
Run ./fake.sh build -t Test for product host-wiring coverage.
Record window-visibility and screenshot evidence under this product's
readiness/ paths. Do not copy framework readiness reports into the product.
Keep window, render, and screenshot I/O inside the Viewer.runApp interpreter.
Your update and View stay pure; never perform host I/O inside them.
The app profile wires Viewer.runApp viewerOptions generatedHost as the default
launch path. Use Viewer.runAppEvidence with the evidence options for bounded
evidence runs.
ViewerOptions.PresentMode picks the present mechanism; choose it by launch context:
| Launch context | PresentMode | Why |
|---|---|---|
| Persistent interactive window | DirectToSwapchain | zero-readback live present; unchanged frames skip paint |
| Evidence / screenshot capture | OffscreenReadback | small readback surface for deterministic pixel capture |
This product ships two option records (EvidenceCommands.fs): viewerOptions
(DirectToSwapchain, the persistent launch) and evidenceViewerOptions
(OffscreenReadback, the bounded evidence commands). Do NOT launch the
persistent window from the evidence options — OffscreenReadback renders off-screen
and shows a blank window. Keep the live launch on viewerOptions
(DirectToSwapchain) and the readback evidence on evidenceViewerOptions.
A consumer without a blocking compositor/vsync can bound the live loop with
ViewerOptions.FrameRateCap = Some n (default None = 60); a headless host with no
compositor free-runs toward the cap — an environment limitation, not a defect. To
exit gracefully, return [ ViewerEffect.CloseWindow ] from your update (no extra
host effect is needed).
When a problem outlasts reasonable in-repo attempts, extensive external research is
mandatory — consult official online docs first (the F#/.NET docs and the driven
library's own documentation/API reference), then community sources (forums, Reddit, Q&A
sites, issue trackers and changelogs). Record the findings and resolving links in the
feature's specs/<feature>/feedback/ folder and, for durable lessons, in this skill's
Sources line. Offline, the mandate degrades to recording "research blocked — "
rather than hard-failing the phase.
SceneNode values this host renders.ViewerKey events into MapKey.