expo-paperkit

Apple PaperKit markup experience for Expo/React Native — drawings, shapes, and annotations powered by PaperKit (iOS 26+, macOS 26+).

Features

• ✏️ Full PaperKit drawing canvas with Apple Pencil support
• 🔶 Shape, text box, and arrow/line insertion
• 💾 Save/restore markup data (base64 serialization)
• 🖼️ Export canvas as PNG or JPG
• ↩️ Undo/redo support
• ⚙️ Configurable feature sets, zoom, and canvas size
• 🎨 PKToolPicker integration (iOS) and MarkupToolbar (macOS)
• 🏞️ Background image support
• 👁️ Read-only mode for viewing saved markup

Requirements

• iOS 26.0+ or macOS 26.0+
• Expo SDK 54+
• React Native 0.81+

Installation

npm install expo-paperkit
or
yarn add expo-paperkit

Run npx expo prebuild to generate the native project, then build with npx expo run:ios or open the .xcworkspace in Xcode.

Note: This library requires native code and will not work in Expo Go.

macOS: For macOS support, use expo-desktop to set up your project. See the apps/macos-example/ directory for a working example.

Quick Start

import { PaperMarkupView, type PaperMarkupRef } from 'expo-paperkit';
import { useRef, useState } from 'react';
export default function App() {   const markupRef = useRef<PaperMarkupRef>(null);   const [savedData, setSavedData] = useState<string | null>(null);
const handleSave = async () => {     const data = await markupRef.current!.save();     setSavedData(data);   };
const handleExport = async () => {     const uri = await markupRef.current!.exportAsImage('png', 1.0);     console.log('Exported to:', uri);   };
return (     <PaperMarkupView       ref={markupRef}       style={{ flex: 1 }}       initialData={savedData ?? undefined}       allowFingerDrawing       featureSet={{         shapes: true,         textBoxes: true,         arrows: true,       }}       onMarkupChanged={() => console.log('Markup changed')}     />   ); }

Documentation

• API Reference — Full props, events, ref methods, and types documentation

License

MIT