
How to Make an App Like Notability

How to Make an App Like Notability
Notability turned a simple idea — let people write, sketch, and annotate the way they would on paper — into one of the most beloved productivity apps on iPad. It sits at the intersection of handwriting recognition, PDF markup, audio recording, and cloud sync, which makes it a deceptively complex piece of engineering.
If you're planning to build a digital note-taking app of your own, this guide walks through the features, architecture, tech stack, timeline, and cost considerations involved.
Why Build a Note-Taking App?
The digital note-taking market keeps expanding because the audience keeps expanding. Students take lecture notes on tablets. Doctors annotate patient charts. Architects mark up blueprints on-site. Lawyers redline contracts with a stylus. Each of these groups has slightly different needs, and that's exactly where opportunity lives.
The generalist space is crowded — Notability, GoodNotes, OneNote, Notion, and Apple Notes all compete there. The winning strategy for a new entrant is usually vertical specialisation: a note app built specifically for medical residents, or field engineers, or music students, with workflows the generalists will never bother building.
Core Feature Set
1. The Ink Engine
This is the heart of the product, and it's where most clones fail. Users can instantly feel the difference between good ink and bad ink.
What "good ink" requires:
- Low latency. Target under 20ms from stylus contact to pixel on screen. Anything higher and the stroke feels like it's chasing the pen.
- Pressure and tilt sensitivity. Apple Pencil and S Pen both report pressure, altitude, and azimuth. Map these to stroke width and opacity.
- Stroke smoothing. Raw touch input is jittery. Apply Catmull-Rom splines or a Bézier fitting pass to produce clean curves without introducing lag.
- Palm rejection. Distinguish stylus input from the heel of a hand resting on the glass. On iOS,
UIPencilInteractionand touch type filtering handle most of this. - Predictive stroke rendering. Draw a short predicted segment ahead of the actual touch position to mask perceived latency.
2. Pen, Highlighter, and Eraser Tools
Offer a genuine variety of instruments: fountain pen, ballpoint, pencil with grain texture, highlighter that multiplies rather than overwrites, and both a pixel eraser and a whole-stroke eraser. Let users save favourite tool presets with custom colours and widths.
3. Typed Text Alongside Handwriting
Users want to mix modalities on the same page. That means resizable text boxes, font selection, rich text formatting, and sensible reflow behaviour when a text box is resized.
4. PDF Import and Annotation
An enormous share of Notability usage is marking up imported documents — lecture slides, worksheets, contracts. You'll need:
- PDF rendering with fast page virtualisation
- Ink layers stored separately from the source document
- Export that flattens annotations or preserves them as standard PDF annotation objects
- Form filling and signature support
5. Audio Recording Synced to Notes
This is Notability's signature feature. While recording, the app timestamps every stroke. Later, tapping any word replays the audio from the moment it was written. Implementation requires storing a monotonic timestamp with each stroke point and building a seek index against the audio track.
6. Handwriting Recognition and Search
On-device recognition is now viable and privacy-friendly. Apple's Vision framework handles handwriting OCR on iOS; Google's ML Kit Digital Ink Recognition covers Android. Index the recognised text so handwritten notes become searchable, and offer optional conversion of handwriting to typed text.
7. Organisation
Notes need a home. Provide subjects or folders, nested dividers, tags, favourites, an archive, and a fast search that queries titles, typed text, and recognised handwriting together.
8. Sync and Multi-Device Continuity
Users expect to start a note on a tablet and finish it on a laptop. Sync must be incremental, conflict-tolerant, and functional offline.
9. Sharing and Export
Export to PDF, PNG, RTF, and a native format. Add shareable links, collaborative viewing, and integrations with Google Drive, Dropbox, and OneDrive.
10. Templates and Paper Styles
Ruled, grid, dotted, music staff, isometric, storyboard, and custom imported templates. Cheap to build, and users love them.
Technical Architecture
Data Model
Do not store notes as flat images. Store them as vector stroke data. A workable schema:
Note
├─ id, title, createdAt, updatedAt
├─ Pages[]
│ ├─ id, index, paperTemplate, size
│ ├─ Strokes[]
│ │ ├─ id, toolType, colour, baseWidth
│ │ ├─ points[] { x, y, pressure, tilt, timestamp }
│ │ └─ zIndex, createdAt
│ ├─ TextBoxes[]
│ ├─ Images[]
│ └─ PDFBacking (optional)
└─ AudioTracks[]
Vector storage keeps files small, enables infinite zoom without pixelation, makes handwriting recognition possible, and allows stroke-level undo and eraser operations.
Rendering Pipeline
Rendering thousands of strokes per page at 120Hz demands GPU work, not UIKit views.
- iOS: Metal, with Core Graphics for static layer caching
- Android: Vulkan or OpenGL ES via a
SurfaceView - Cross-platform: Skia directly, or Flutter's
CustomPainterover Impeller
A common optimisation is layer flattening: rasterise all completed strokes into a cached bitmap and render only the in-progress stroke live. Re-flatten when a stroke completes or when zoom level changes significantly.
Sync Strategy
Treat each stroke as an immutable, append-only event with a unique ID. This turns sync into a straightforward merge problem rather than a conflict nightmare — two people writing on the same page simply produce two sets of strokes. Deletes become tombstone records.
For real-time collaboration, layer a CRDT over the stroke list. Yjs and Automerge both work well for the text and metadata portions.
Storage and Backend
- Object storage (S3, GCS, or Cloudflare R2) for PDFs, images, and audio blobs
- Document or relational database for note metadata and stroke batches
- CDN for template and asset delivery
- End-to-end encryption as a premium tier — increasingly a purchase driver in regulated professions
Choosing a Tech Stack
| Layer | Recommended Options |
|---|---|
| iOS / iPadOS | Swift, SwiftUI, PencilKit or custom Metal renderer |
| Android | Kotlin, Jetpack Compose, Vulkan/OpenGL |
| Cross-platform | Flutter with Impeller, or React Native with a native ink module |
| Desktop | Catalyst, Electron with WASM core, or native Swift/C++ |
| Shared core | Rust or C++ compiled to all targets |
| Backend | Node.js or Go, PostgreSQL, Redis |
| Sync | CloudKit, Firebase, or custom WebSocket service |
| OCR | Apple Vision, Google ML Kit, or MyScript iink SDK |
A strong pattern for serious note apps is a shared C++ or Rust ink core wrapped in thin platform-specific UI layers. This guarantees identical stroke behaviour across devices while still letting each platform feel native.
If your priority is shipping fast to validate the idea, Flutter with a carefully optimised custom painter gets you to a testable product in a fraction of the time — though you should expect to eventually replace the rendering hot path with native code.
UX Principles That Matter
Get out of the way. The canvas should dominate the screen. Tools appear when needed and recede when not.
Make the toolbar reachable. Users hold tablets in unpredictable ways. Let the toolbar dock to any edge or float.
Never lose a stroke. Autosave continuously, on every stroke completion. Crash recovery should restore the exact canvas state.
Support gestures thoughtfully. Two-finger tap to undo, pinch to zoom, two-finger swipe to change pages. Keep them discoverable but never accidental.
Respect the stylus. Double-tap on Apple Pencil should switch tools. Hover preview on newer Pencils should show the cursor position.
Monetisation Models
- One-time purchase. Notability originally used this. Simple, but limits recurring revenue.
- Freemium subscription. Free tier with limited notes or basic tools; subscription unlocks sync, audio, handwriting search, and premium pens. This is now the dominant model.
- Education and institutional licensing. Bulk seats for schools and universities, often the most lucrative channel.
- Template and content marketplace. Sell planners, journals, and specialised paper packs.
- Enterprise tier. Admin controls, SSO, audit logs, and compliance certifications for healthcare and legal customers.
Development Timeline and Cost
| Phase | Scope | Duration |
|---|---|---|
| Discovery and UX design | Research, wireframes, prototypes | 3–5 weeks |
| Ink engine prototype | Latency, pressure, smoothing validation | 4–6 weeks |
| Core MVP | Canvas, tools, organisation, local storage | 10–14 weeks |
| Sync and cloud backend | Accounts, incremental sync, conflict handling | 6–8 weeks |
| PDF and audio features | Import, annotate, timestamped recording | 6–8 weeks |
| OCR and search | Recognition, indexing, search UI | 4–5 weeks |
| QA and launch | Device testing, performance tuning, store submission | 4–6 weeks |
A single-platform MVP with a solid ink engine and local storage typically lands in the $45,000–$80,000 range. A polished cross-platform product with sync, PDF annotation, audio, and handwriting search more realistically sits between $120,000 and $250,000, depending on team location and the depth of native optimisation required.
Budget for ongoing work as well. Note apps live or die on performance, and each new OS release, stylus generation, and screen refresh rate demands attention.
Common Pitfalls
Underestimating the ink engine. Teams routinely allocate two weeks to drawing and six months to everything else. Reverse that instinct. Prototype the ink first and test it with real stylus users before building anything else.
Storing notes as images. It's tempting because it's easy. It destroys searchability, zoom quality, file size, and editability.
Ignoring large documents. A 400-page annotated PDF must scroll smoothly. Build page virtualisation from day one, not as a patch.
Sync as an afterthought. Retrofitting sync onto a local-only data model is one of the most expensive rewrites in mobile development. Design the data model for sync even if you ship local-only first.
Feature parity chasing. You will not out-feature GoodNotes in version one. Pick one audience and serve it unreasonably well.
Validating Before You Build
Before committing to full development, put a rough ink prototype in front of twenty target users. Ask them to write a paragraph and draw a diagram. Watch their faces. If the ink feels wrong, nothing else about the app will matter — and if it feels right, you've de-risked the single hardest part of the project.
Final Thoughts
Building an app like Notability is a genuine engineering challenge, but a tractable one. The technology stack is mature, on-device OCR is finally good, and stylus hardware is excellent across both major platforms. What's still scarce is careful craft: the obsessive latency tuning, the thoughtful toolbar placement, the sync that never loses a stroke.
Start with the ink. Pick a specific audience. Design for sync from the first commit. Do those three things well, and you have a real shot in a market that rewards quality far more than it rewards feature count.
Have a project in mind? Contact Sodio Technologies to discuss your requirements and explore the right technology solution for your business.
/// Work with us
Talk to the engineers who'd build it
You'll get a technical scope, timeline and cost estimate from the people doing the work, not an account manager. In-house team, no subcontracting, since 2016.
