# RCK v2

> React Canvas Kit (RCK v2): React 19 library for interactive canvas apps. Packages: @qsketch/rck (canvas, input, popovers), @qsketch/document (drawing data), @qsketch/core (math); not yet published. Each page explains one technique with example source. An example is a child of RckCanvas; the comment above it shows the host settings the website applies.

## Getting started

- [Install and mount](https://reactcanvaskit.com/docs/getting-started/install-and-mount.md): Mount one canvas in a sized React host.
- [Sizing the canvas](https://reactcanvaskit.com/docs/getting-started/sizing-the-canvas.md): Use any sized parent and let the canvas follow its dimensions.
- [Draw your first shapes](https://reactcanvaskit.com/docs/getting-started/first-shapes.md): Build a drawing, transform a group, and open HTML anchored to a shape with React Canvas Kit.
- [Light and dark](https://reactcanvaskit.com/docs/getting-started/light-and-dark.md): Set the canvas mode and supply drawing colours that follow your theme.

## Canvas

- [Render surfaces](https://reactcanvaskit.com/docs/canvas/render-surfaces.md): Stack separate canvases that repaint independently of each other.
- [Pixel density](https://reactcanvaskit.com/docs/canvas/pixel-density.md): Separate backing-bitmap sharpness from world coordinates.
- [Zoom and world scale](https://reactcanvaskit.com/docs/canvas/zoom-and-world-scale.md): Fit large designs without rewriting document units.
- [Saving and restoring the view](https://reactcanvaskit.com/docs/canvas/saving-and-restoring-the-view.md): Capture pan and zoom before leaving the canvas.
- [Previews and thumbnails](https://reactcanvaskit.com/docs/canvas/previews.md): Draw independent document images in cards, galleries and saved-drawing lists.

## Drawing

- [Drawing with useDraw](https://reactcanvaskit.com/docs/drawing/use-draw.md): Draw synchronously on a scheduler-owned surface.
- [Redraw requests](https://reactcanvaskit.com/docs/drawing/redraw-requests.md): Batch drawing work without starting an animation loop.
- [Continuous animation](https://reactcanvaskit.com/docs/drawing/continuous-animation.md): Update motion with elapsed time, then draw.
- [Frame diagnostics](https://reactcanvaskit.com/docs/drawing/frame-diagnostics.md): Observe rendering costs without creating measuring frames.

## Input

- [Mouse, wheel and keyboard](https://reactcanvaskit.com/docs/input/mouse-wheel-and-keyboard.md): Keep navigation scoped to the canvas and tools scoped to delivered input.
- [Touch gestures](https://reactcanvaskit.com/docs/input/touch-gestures.md): Pan and pinch inside the canvas while the host page remains scrollable outside it.
- [Pen samples](https://reactcanvaskit.com/docs/input/pen-samples.md): Consume browser-exposed coalesced samples without inventing sensor data.
- [Claiming a finger for a tool](https://reactcanvaskit.com/docs/input/claiming-a-finger.md): Choose tool ownership synchronously before navigation takes over.

## Documents

- [The document model](https://reactcanvaskit.com/docs/documents/document-model.md): Keep canonical drawing data separate from rendering and host state.
- [The fluent API](https://reactcanvaskit.com/docs/documents/fluent-api.md): Compose immutable builders and commit related nodes in one action.
- [Groups, layers and transforms](https://reactcanvaskit.com/docs/documents/groups-layers-and-transforms.md): Compose tree transforms while preserving local geometry.
- [Custom shapes](https://reactcanvaskit.com/docs/documents/custom-shapes.md): Keep path definitions in host code and shape instances in JSON.
- [Text and labels](https://reactcanvaskit.com/docs/documents/text-and-labels.md): Compose plain-text labels and standalone text with wrapping and readable rotation.

## Editing and saving

- [Edits and previews](https://reactcanvaskit.com/docs/editing-and-saving/edits-and-previews.md): Preview a whole action before committing one transaction.
- [Undo and redo](https://reactcanvaskit.com/docs/editing-and-saving/undo-and-redo.md): Undo local actions while preserving incompatible collaborator changes.
- [Saving, loading and migration](https://reactcanvaskit.com/docs/editing-and-saving/saving-loading-and-migration.md): Load into a new store and retain diagnostics rather than silently repairing data.
- [The collaboration contract](https://reactcanvaskit.com/docs/editing-and-saving/collaboration-contract.md): Separate optimistic reconciliation from transport and authoritative validation.

## Overlays

- [Popovers](https://reactcanvaskit.com/docs/overlays/popovers.md): Anchor editable HTML to world content and isolate its input.

## Performance

- [Culling and tracking](https://reactcanvaskit.com/docs/performance/culling-and-tracking.md): Avoid off-screen paint while retaining conservative visual bounds.

## Reference

- [@qsketch/rck](https://reactcanvaskit.com/docs/reference/rck.md): The package README, rendered from the source shipped with @qsketch/rck.
- [@qsketch/document](https://reactcanvaskit.com/docs/reference/document.md): The package README, rendered from the source shipped with @qsketch/document.
- [@qsketch/core](https://reactcanvaskit.com/docs/reference/core.md): The package README, rendered from the source shipped with @qsketch/core.
- [@qsketch/ss-router](https://reactcanvaskit.com/docs/reference/ss-router.md): The package README, rendered from the source shipped with @qsketch/ss-router.

## About

- [Licence](https://reactcanvaskit.com/docs/about/license.md): PolyForm Noncommercial 1.0.0 and commercial licensing.