paperkit
dpearson2699/swift-ios-skills
Add drawings, shapes, and consistent markup to iOS apps using PaperKit's unified canvas.
What is paperkit?
PaperKit provides a unified markup experience combining PencilKit drawing with structured elements (shapes, text, images, lines) managed by PaperMarkupViewController. Use it to integrate system-standard markup editing, shape recognition, and annotation features into document editors and image annotation tools. New in iOS 26+.
- Interactive canvas for freeform drawing and structured markup elements via PaperMarkupViewController
- Serializable PaperMarkup data model for saving and loading all markup content
- Programmatic insertion of text boxes, images, shapes (rectangles, ellipses, arrows, stars, chat bubbles), and lines with markers
- Touch mode switching between drawing and selection, with automatic Pencil detection
- Integration with PencilKit tools and PKToolPicker for consistent drawing experience
- SwiftUI and UIKit support with delegate callbacks for change detection
How to install paperkit
npx skills add https://github.com/dpearson2699/swift-ios-skills --skill paperkit- Swift 6.3 or later
- iOS 26+, iPadOS 26+, macOS 26+, or visionOS 26+ SDK
- No special entitlements or Info.plist configuration required
How to use paperkit
- 1.Import PaperKit and create a PaperMarkup instance with document bounds
- 2.Initialize PaperMarkupViewController with the markup model and supported feature set
- 3.Add PaperMarkupViewController as a child view controller to your view hierarchy
- 4.Set up PKToolPicker and add it as an observer to enable PencilKit drawing tools
- 5.Optionally set a contentView (image, PDF page) as the background for annotations
- 6.Implement PaperMarkupViewController.Delegate to handle markup changes and save data
- 7.Use insertNewTextbox(), insertNewImage(), insertNewShape(), or insertNewLine() to add content programmatically
- 8.Call markup.dataRepresentation() to serialize and save markup to disk
Use cases
- Building document annotation tools that mark up PDFs or images with drawings and shapes
- Creating note-taking apps with system-standard markup toolbar and shape recognition
- Embedding markup editing in screenshot or QuickLook-like interfaces
- Adding annotation features to journal or document editor apps
- Implementing template-based forms where users draw and add structured markup
- iOS/iPadOS app developers building annotation or markup features
- Document editor developers integrating drawing capabilities
- Teams building note-taking or journaling applications
- Developers creating screenshot or image markup tools
paperkit FAQ
PaperKit is new in iOS 26, iPadOS 26, macOS 26, and visionOS 26. The API surface may change as it is in beta, so verify against current Apple documentation before shipping.
Yes. PaperMarkupViewController integrates with PencilKit and PKToolPicker. You can also merge PKDrawing objects into PaperMarkup using markup.append(contentsOf: pkDrawing).
Call markup.dataRepresentation() (async throws) to serialize to Data, then write to disk. To load, use PaperMarkup(dataRepresentation: savedData).
Yes. Set the contentView property on PaperMarkupViewController to any UIView or NSView. Keep the PaperMarkup bounds aligned to the background content size so annotations restore correctly.
Rectangle, rounded rectangle, ellipse, line, arrow shape, star, chat bubble, and regular polygon. Each can be configured with fill color, stroke color, and line width.
Full instructions (SKILL.md)
Source of truth, from dpearson2699/swift-ios-skills.
name: paperkit description: "Add drawings, shapes, and a consistent markup experience using PaperKit. Use when integrating PaperMarkupViewController for markup editing, adding shape recognition, working with PaperMarkup data models, embedding markup tools in document editors, or building annotation features that need the system-standard markup toolbar. New in iOS 26."
PaperKit
Beta-sensitive. PaperKit is new in iOS/iPadOS 26, macOS 26, and visionOS 26. API surface may change. Verify details against current Apple documentation before shipping.
PaperKit provides a unified markup experience — the same framework powering markup in Notes, Screenshots, QuickLook, and Journal. It combines PencilKit drawing with structured markup elements (shapes, text boxes, images, lines) in a single canvas managed by PaperMarkupViewController. Requires Swift 6.3 and the iOS 26+ SDK.
Contents
- Setup
- PaperMarkupViewController
- PaperMarkup Data Model
- Insertion Controllers
- FeatureSet Configuration
- Integration with PencilKit
- SwiftUI Integration
- Common Mistakes
- Review Checklist
- References
Setup
PaperKit requires no entitlements or special Info.plist entries.
import PaperKit
Platform availability: iOS 26.0+, iPadOS 26.0+, Mac Catalyst 26.0+, macOS 26.0+, visionOS 26.0+.
Three core components:
| Component | Role |
|---|---|
PaperMarkupViewController | Interactive canvas for creating and displaying markup and drawing |
PaperMarkup | Data model for serializing all markup elements and PencilKit drawing |
MarkupEditViewController / MarkupToolbarViewController | Insertion UI for adding markup elements |
PaperMarkupViewController
The primary view controller for interactive markup. Provides a scrollable canvas for freeform PencilKit drawing and structured markup elements. Conforms to Observable and PKToolPickerObserver.
Basic UIKit Setup
import PaperKit
import PencilKit
import UIKit
class MarkupViewController: UIViewController, PaperMarkupViewController.Delegate {
var paperVC: PaperMarkupViewController!
var toolPicker: PKToolPicker!
override func viewDidLoad() {
super.viewDidLoad()
let pageBounds = CGRect(origin: .zero, size: CGSize(width: 612, height: 792))
let markup = PaperMarkup(bounds: pageBounds)
let features = FeatureSet.latest
paperVC = PaperMarkupViewController(
markup: markup,
supportedFeatureSet: features
)
paperVC.delegate = self
addChild(paperVC)
paperVC.view.frame = view.bounds
paperVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(paperVC.view)
paperVC.didMove(toParent: self)
toolPicker = PKToolPicker()
toolPicker.addObserver(paperVC)
paperVC.pencilKitResponderState.activeToolPicker = toolPicker
paperVC.pencilKitResponderState.toolPickerVisibility = .visible
}
func paperMarkupViewControllerDidChangeMarkup(
_ controller: PaperMarkupViewController
) {
guard let markup = controller.markup else { return }
Task { try await save(markup) }
}
}
Key Properties
| Property | Type | Description |
|---|---|---|
markup | PaperMarkup? | The current data model |
selectedMarkup | PaperMarkup | Currently selected content |
isEditable | Bool | Whether the canvas accepts input |
isRulerActive | Bool | Whether the ruler overlay is shown |
drawingTool | any PKTool | Active PencilKit drawing tool |
contentView | UIView? / NSView? | Background view rendered beneath markup |
zoomRange | ClosedRange<CGFloat> | Min/max zoom scale |
supportedFeatureSet | FeatureSet | Enabled PaperKit features |
Touch Modes
PaperMarkupViewController.TouchMode has two cases: .drawing and .selection.
paperVC.directTouchMode = .drawing // Finger draws
paperVC.directTouchMode = .selection // Finger selects elements
paperVC.directTouchAutomaticallyDraws = true // System decides based on Pencil state
Content Background
Set any view beneath the markup layer for templates, document pages, or images being annotated. Keep the PaperMarkup(bounds:) coordinate space aligned to the background content, such as a PDF page or rendered image size, so saved annotations restore in the right place:
let pageBounds = CGRect(origin: .zero, size: pageImage.size)
let imageView = UIImageView(image: pageImage)
imageView.frame = pageBounds
let markup = PaperMarkup(bounds: pageBounds)
paperVC = PaperMarkupViewController(markup: markup, supportedFeatureSet: features)
paperVC.contentView = imageView
Delegate Callbacks
| Method | Called when |
|---|---|
paperMarkupViewControllerDidChangeMarkup(_:) | Markup content changes |
paperMarkupViewControllerDidBeginDrawing(_:) | User starts drawing |
paperMarkupViewControllerDidChangeSelection(_:) | Selection changes |
paperMarkupViewControllerDidChangeContentVisibleFrame(_:) | Visible frame changes |
PaperMarkup Data Model
PaperMarkup is a Sendable struct that stores all markup elements and PencilKit drawing data.
Creating and Persisting
// New empty model. Bounds define the saved document coordinate space.
let markup = PaperMarkup(bounds: CGRect(x: 0, y: 0, width: 612, height: 792))
// Load from saved data
let markup = try PaperMarkup(dataRepresentation: savedData)
// Save — dataRepresentation() is async throws
func save(_ markup: PaperMarkup) async throws {
let data = try await markup.dataRepresentation()
try data.write(to: fileURL)
}
Inserting Content Programmatically
// Text box
markup.insertNewTextbox(
attributedText: AttributedString("Annotation"),
frame: CGRect(x: 50, y: 100, width: 200, height: 40),
rotation: 0
)
// Image
markup.insertNewImage(cgImage, frame: CGRect(x: 50, y: 200, width: 300, height: 200), rotation: 0)
// Shape
let shapeConfig = ShapeConfiguration(
type: .rectangle,
fillColor: UIColor.systemBlue.withAlphaComponent(0.2).cgColor,
strokeColor: UIColor.systemBlue.cgColor,
lineWidth: 2
)
markup.insertNewShape(configuration: shapeConfig, frame: CGRect(x: 50, y: 420, width: 200, height: 100), rotation: 0)
// Line with arrow end marker
let lineConfig = ShapeConfiguration(type: .line, fillColor: nil, strokeColor: UIColor.red.cgColor, lineWidth: 3)
markup.insertNewLine(
configuration: lineConfig,
from: CGPoint(x: 50, y: 550), to: CGPoint(x: 250, y: 550),
startMarker: false, endMarker: true
)
Shape types: .rectangle, .roundedRectangle, .ellipse, .line, .arrowShape, .star, .chatBubble, .regularPolygon.
Other Operations
markup.append(contentsOf: otherMarkup) // Merge another PaperMarkup
markup.append(contentsOf: pkDrawing) // Merge a PKDrawing
markup.transformContent(CGAffineTransform(...)) // Apply affine transform
markup.removeContentUnsupported(by: featureSet) // Strip unsupported elements
| Property | Description |
|---|---|
bounds | Coordinate space of the markup |
contentsRenderFrame | Tight bounding box of all content |
featureSet | Features used by this data model's content |
indexableContent | Extractable text for search indexing |
Use suggestedFrameForInserting(contentInFrame:) on the view controller to get a frame that avoids overlapping existing content.
Insertion Controllers
MarkupEditViewController (iOS, iPadOS, Mac Catalyst, visionOS)
Presents a popover menu for inserting shapes, text boxes, lines, and other elements.
func showInsertionMenu(from barButtonItem: UIBarButtonItem) {
let editVC = MarkupEditViewController(
supportedFeatureSet: paperVC.supportedFeatureSet,
additionalActions: []
)
editVC.delegate = paperVC // PaperMarkupViewController conforms to the delegate
editVC.modalPresentationStyle = .popover
editVC.popoverPresentationController?.barButtonItem = barButtonItem
present(editVC, animated: true)
}
MarkupToolbarViewController (macOS, Mac Catalyst)
Provides a toolbar with drawing tools and insertion buttons. Use it for native macOS and for Mac Catalyst toolbar-style UI; Catalyst apps that want a UIKit popover can use MarkupEditViewController.
let toolbar = MarkupToolbarViewController(supportedFeatureSet: paperVC.supportedFeatureSet)
toolbar.delegate = paperVC
addChild(toolbar)
toolbar.view.frame = toolbarContainerView.bounds
toolbarContainerView.addSubview(toolbar.view)
toolbar.didMove(toParent: self)
Both controllers must use the same FeatureSet as the PaperMarkupViewController.
FeatureSet Configuration
FeatureSet controls which markup capabilities are available.
| Preset | Description |
|---|---|
.latest | All current features — recommended starting point |
.version1 | Features from version 1 |
.empty | No features enabled |
Customizing
var features = FeatureSet.latest
features.remove(.stickers)
features.remove(.images)
// Or build up from empty
var features = FeatureSet.empty
features.insert(.drawing)
features.insert(.text)
features.insert(.shapeStrokes)
Available Features
| Feature | Description |
|---|---|
.drawing | Freeform PencilKit drawing |
.text | Text box insertion |
.images | Image insertion |
.stickers | Sticker insertion |
.links | Link annotations |
.loupes | Loupe/magnifier elements |
.shapeStrokes | Shape outlines |
.shapeFills | Shape fills |
.shapeOpacity | Shape opacity control |
HDR Support
Set colorMaximumLinearExposure above 1.0 on both the FeatureSet and PKToolPicker:
var features = FeatureSet.latest
features.colorMaximumLinearExposure = 4.0
toolPicker.colorMaximumLinearExposure = features.colorMaximumLinearExposure
Use view.window?.windowScene?.screen.potentialEDRHeadroom to match the device screen's capability. Use 1.0 for SDR-only.
Shapes, Inks, and Line Markers
features.shapes = [.rectangle, .ellipse, .arrowShape, .line]
features.inks = [.pen, .pencil, .marker]
features.lineMarkerPositions = .all // .single, .double, .plain, or .all
Integration with PencilKit
PaperKit accepts PKTool for drawing and can append PKDrawing content.
PaperKit is not a drop-in replacement for a low-level PKCanvasView when the app depends on custom brush behavior, raw PKDrawing / PKStroke analytics, or custom lasso-centric editing. Keep those workflows owned by PencilKit, and add PaperKit beside them for structured review markup such as callouts, arrows, text boxes, labels, image stamps, and system-standard insertion UI. Migrate or duplicate existing drawings into a PaperKit annotation layer with PaperMarkup.append(contentsOf: PKDrawing) only when the low-level editing path no longer needs to own that content.
import PencilKit
// Set drawing tool
paperVC.drawingTool = PKInkingTool(.pen, color: .black, width: 3)
// Merge existing PKDrawing into markup
markup.append(contentsOf: existingPKDrawing)
Tool Picker Setup
let toolPicker = PKToolPicker()
toolPicker.addObserver(paperVC)
paperVC.pencilKitResponderState.activeToolPicker = toolPicker
paperVC.pencilKitResponderState.toolPickerVisibility = .visible
Setting toolPickerVisibility to .hidden keeps the picker functional (responds to Pencil gestures) but not visible, enabling the mini tool picker experience.
Content Version Compatibility
FeatureSet.ContentVersion maps to PKContentVersion:
let pkVersion = features.contentVersion.pencilKitContentVersion
SwiftUI Integration
Wrap PaperMarkupViewController in UIViewControllerRepresentable:
struct MarkupView: UIViewControllerRepresentable {
@Binding var markup: PaperMarkup
let features: FeatureSet
func makeUIViewController(context: Context) -> PaperMarkupViewController {
let vc = PaperMarkupViewController(markup: markup, supportedFeatureSet: features)
vc.delegate = context.coordinator
let toolPicker = PKToolPicker()
toolPicker.addObserver(vc)
vc.pencilKitResponderState.activeToolPicker = toolPicker
vc.pencilKitResponderState.toolPickerVisibility = .visible
context.coordinator.toolPicker = toolPicker
return vc
}
func updateUIViewController(_ vc: PaperMarkupViewController, context: Context) {
if vc.markup != markup { vc.markup = markup }
}
func makeCoordinator() -> Coordinator { Coordinator(parent: self) }
class Coordinator: NSObject, PaperMarkupViewController.Delegate {
let parent: MarkupView
var toolPicker: PKToolPicker?
init(parent: MarkupView) { self.parent = parent }
func paperMarkupViewControllerDidChangeMarkup(
_ controller: PaperMarkupViewController
) {
if let markup = controller.markup { parent.markup = markup }
}
}
}
Initialize the bound PaperMarkup from the document or page size before creating the SwiftUI bridge:
struct DocumentMarkupScreen: View {
let pageSize: CGSize
@State private var markup: PaperMarkup
private let features = FeatureSet.latest
init(pageSize: CGSize) {
self.pageSize = pageSize
_markup = State(
initialValue: PaperMarkup(
bounds: CGRect(origin: .zero, size: pageSize)
)
)
}
var body: some View {
MarkupView(markup: $markup, features: features)
}
}
Common Mistakes
Mismatched FeatureSets
// DON'T
let paperVC = PaperMarkupViewController(markup: m, supportedFeatureSet: .latest)
let editVC = MarkupEditViewController(supportedFeatureSet: .version1, additionalActions: [])
// DO — use the same FeatureSet for both
let features = FeatureSet.latest
let paperVC = PaperMarkupViewController(markup: m, supportedFeatureSet: features)
let editVC = MarkupEditViewController(supportedFeatureSet: features, additionalActions: [])
Ignoring Content Version on Load
// DON'T
let markup = try PaperMarkup(dataRepresentation: data)
paperVC.markup = markup
// DO — check version compatibility
let markup = try PaperMarkup(dataRepresentation: data)
if markup.featureSet.isSubset(of: paperVC.supportedFeatureSet) {
paperVC.markup = markup
} else {
showVersionMismatchAlert()
}
Blocking Main Thread with Serialization
// DON'T — dataRepresentation() is async, don't try to work around it
// DO — save from an async context
func paperMarkupViewControllerDidChangeMarkup(_ controller: PaperMarkupViewController) {
guard let markup = controller.markup else { return }
Task {
let data = try await markup.dataRepresentation()
try data.write(to: fileURL)
}
}
Forgetting to Retain the Tool Picker
// DON'T — local variable gets deallocated
func viewDidLoad() {
let toolPicker = PKToolPicker()
toolPicker.addObserver(paperVC)
}
// DO — store as instance property
var toolPicker: PKToolPicker!
Wrong Insertion Controller for Platform
// DON'T — treat MarkupEditViewController as unavailable on Mac Catalyst
// DO — use the right UI for the presentation style
#if os(macOS)
let toolbar = MarkupToolbarViewController(supportedFeatureSet: features)
#elseif targetEnvironment(macCatalyst)
// Catalyst supports both: toolbar-style UI or UIKit popover insertion.
let toolbar = MarkupToolbarViewController(supportedFeatureSet: features)
let editVC = MarkupEditViewController(supportedFeatureSet: features, additionalActions: [])
#else
let editVC = MarkupEditViewController(supportedFeatureSet: features, additionalActions: [])
#endif
Review Checklist
-
import PaperKitpresent; deployment target is iOS 26+ / macOS 26+ / visionOS 26+ -
PaperMarkupinitialized with bounds matching content size - Same
FeatureSetused forPaperMarkupViewControllerand insertion controller -
dataRepresentation()called in async context -
PKToolPickerretained as a stored property - Delegate set on
PaperMarkupViewControllerfor change callbacks - Content version checked when loading saved data
- Correct insertion controller per platform (
MarkupToolbarViewControllerfor macOS/Catalyst toolbar UI;MarkupEditViewControllerfor UIKit/Catalyst popovers) -
MarkupErrorcases handled on deserialization - HDR:
colorMaximumLinearExposureset onFeatureSetandPKToolPicker.colorMaximumLinearExposure
References
- PaperKit documentation
- Integrating PaperKit into your app
- Meet PaperKit — WWDC25
- The
pencilkitskill covers PencilKit drawing, tool pickers, and PKDrawing serialization - references/paperkit-patterns.md — data persistence, rendering, multi-platform setup, custom feature sets
Related skills
More from dpearson2699/swift-ios-skills and the wider catalog.

passkit
Integrate Apple Pay payments and Wallet passes into iOS apps using PassKit.

pdfkit
Display, navigate, and annotate PDF documents in iOS with PDFKit.

pencilkit
Add Apple Pencil drawing, tool picker, and stroke serialization to iOS/iPadOS apps.

permissionkit
Request parental permission for child communication in iOS apps using PermissionKit.

photokit
Photo picking, camera capture, and media handling for iOS apps using PhotoKit and AVFoundation.

push-notifications
Implement and debug local and remote push notifications in iOS/macOS apps with APNs, rich content, and actions.