DEV Community: Rutvik Panchal

I built a MacBook notch app in SwiftUI. Here's what the notch taught me

Rutvik Panchal — Mon, 12 Oct 2026 20:28:09 +0000

The notch on my MacBook Pro was just sitting there, a black rectangle in the middle of the menu bar. Meanwhile I spent my days doing two things over and over: checking when my next call starts, and digging for something I copied ten minutes ago.

So I built NotchDesk: hover the notch and you get your next meeting with a live countdown and a Join button, plus a private clipboard history you can paste from in any app. It's a native Mac app (SwiftUI + AppKit, macOS 14+), and it launches this week.

This post isn't a sales pitch. It's the handful of things I had to figure out that I couldn't find written down in one place. If you're thinking of building anything that lives in or around the notch, I hope it saves you a weekend.

1. Finding the notch (and measuring it)

There's no NSScreen.hasNotch. What you do get, since macOS 12, is safeAreaInsets and two "auxiliary" areas: the strips of menu bar to the left and right of the camera housing. The notch is whatever's left in the middle:

if screen.safeAreaInsets.top > 0 {
    let left = screen.auxiliaryTopLeftArea?.width ?? 0
    let right = screen.auxiliaryTopRightArea?.width ?? 0
    let width = screen.frame.width - left - right
    notchSize = CGSize(width: width > 0 ? width : 200,
                       height: screen.safeAreaInsets.top)
} else {
    // No notch: external display, lid closed, or an older Mac.
    // Draw a small "island" under the menu bar instead.
    let menuBarHeight = screen.frame.maxY - screen.visibleFrame.maxY
    notchSize = CGSize(width: 130, height: max(menuBarHeight, 24))
}

Two things bit me:

The notch moves between screens. Close the lid with an external display attached and the notched screen disappears. Listen for NSApplication.didChangeScreenParametersNotification and re-place your window every time.
Plenty of your users don't have a notch. M1 Airs, external displays, the new MacBook Neo. Decide early what your app looks like without one. I went with a small island at the top centre of the main display, and it ended up being a setting people actually use on their external monitors.

2. A window that lives above the menu bar

The notch overlay is a borderless NSPanel that never steals focus:

let panel = NSPanel(contentRect: rect,
                    styleMask: [.borderless, .nonactivatingPanel],
                    backing: .buffered, defer: false)
panel.level = NSWindow.Level(rawValue: NSWindow.Level.mainMenu.rawValue + 3)
panel.collectionBehavior = [.canJoinAllSpaces, .stationary,
                            .fullScreenAuxiliary, .ignoresCycle]
panel.isOpaque = false
panel.backgroundColor = .clear
panel.hasShadow = false

.nonactivatingPanel means clicking the notch doesn't pull focus away from the app you're typing in. Essential if you ever want to paste into that app.
.canJoinAllSpaces + .stationary keep it on every Space without animating along with Mission Control.
.ignoresCycle keeps it out of ⌘-backtick window cycling.

The tricky part is mouse pass-through. When the notch is expanded, the panel is bigger than the shape the user sees, and you don't want it swallowing clicks meant for menu bar items next to it. I poll the mouse position every 50 ms while it's open and flip ignoresMouseEvents depending on whether the pointer is over the drawn shape. Crude, but rock solid, and cheaper than it sounds because the timer returns immediately unless the panel is expanded.

3. Clipboard history: there is no "clipboard changed" notification

NSPasteboard has no notification for changes. Every clipboard manager on the Mac polls changeCount:

pollTimer = Timer.scheduledTimer(withTimeInterval: 0.4, repeats: true) { [weak self] _ in
    MainActor.assumeIsolated { self?.poll() }
}

func poll() {
    guard pasteboard.changeCount != lastChangeCount else { return }
    lastChangeCount = pasteboard.changeCount
    // read the new item…
}

0.4 s is a good balance: fast enough that nothing feels missed, cheap enough to be invisible in Activity Monitor.

The part that matters more is what you refuse to record. There's a long-standing convention at nspasteboard.org: apps add marker types to tell clipboard managers how to treat a copy.

static let ignoredTypes: Set<String> = [
    "org.nspasteboard.ConcealedType",     // passwords: never store
    "org.nspasteboard.TransientType",     // only there for a moment
    "org.nspasteboard.AutoGeneratedType", // not copied by the user
    "com.agilebits.onepassword",          // 1Password's own marker
]

If any of these are on the item, skip it. I also exclude password apps by bundle ID (1Password, Bitwarden, Apple Passwords, Keychain Access and friends) because not every app sets the markers, and I run a small on-device detector for things that look like secrets (card numbers, one-time codes, API keys) so they're masked and auto-deleted.

4. The dictation trap

This one came from a user. Dictation apps like Wispr Flow "type" by putting your words on the clipboard, pasting, and then putting back whatever was there before. A naive clipboard manager sees two new copies: the dictation and the restore. Worse: if you'd copied a password just before dictating, the restored copy comes back without its Concealed marker, so it gets saved in plain text.

The fix is a small guard: when a private (Concealed) write is followed quickly by an unmarked write, treat the second one as a restore and don't record it. Getting the timing window right took a test harness that replays the exact sequence of pasteboard writes, which I'd recommend for anything clipboard-related. It's very hard to reason about by hand.

5. Finding a screenshot by what it says

Every image and screenshot in the history goes through Vision on the Mac:

let request = VNRecognizeTextRequest()
request.recognitionLevel = .accurate
request.usesLanguageCorrection = true
try VNImageRequestHandler(cgImage: image).perform([request])
let text = (request.results ?? []).compactMap { $0.topCandidates(1).first?.string }

Run it off the main thread, store the text next to the clip, and searching "gate 22" finds the boarding pass. It's all on device, which made the privacy story easy: nothing leaves the Mac.

6. Shipping outside the App Store

A notch overlay, global shortcuts and pasting into other apps don't fit the sandbox, so NotchDesk ships as a Developer ID app, notarized by Apple. A few things I learned the hard way:

Notarize the DMG, then staple it (xcrun notarytool submit --wait, then xcrun stapler staple) so it opens even offline.
Store notary credentials in a keychain profile and check it exists before you start a release build. Mine vanished twice. I'm moving to an App Store Connect API key.
Don't send your DMG over WhatsApp. One tester got "NotchDesk can't be opened" with no Open button. The kernel log said the file was quarantined by WhatsApp and "created without user consent", because the chat app saved it automatically. macOS refuses to run those at all, notarized or not. A browser download works fine. I added that to the support page.

Where it's at

NotchDesk launches on Thursday 15 October: meeting countdown and one-click Join (Meet, Zoom, Teams, Webex, FaceTime, Slack huddles), clipboard history with Quick Paste (⌃⌘V), a file shelf with AirDrop, and a few small tools in the notch. No account, no analytics. There's a 14-day free trial; the first 100 buyers get a lifetime license.

👉 https://notchdesk.com/?utm_source=devto&utm_medium=social&utm_campaign=launch

If you've built something for the notch, or you've fought NSPasteboard yourself, I'd love to hear how you handled it in the comments.

Disclosure: an AI assistant drafted this post from NotchDesk's real code and my notes, and I used AI coding assistants while building the app. The code snippets and the war stories are from the real project.

Adding 70-language translation to an image API without paying per word

Rutvik Panchal — Tue, 09 Jun 2026 16:03:04 +0000

I run PixelDrive, an API + editor that turns templates
into branded images. You design once, mark layers as variables, then POST data
and get a PNG. The most common request was localization: teams were making the
same graphic in 10 languages by hand.

Here's how I built translation into the render pipeline, and why I self-hosted
it instead of calling a cloud translation API.

The shape of the problem

Translation here is not "translate documents." It's short, repetitive design
copy (headlines, CTAs, labels) rendered onto images, on a server that's
already CPU-bound doing the actual rendering. Two facts drove every decision:

The text is tiny and cacheable. Translate "Spring Sale" -> es once, store it, and every future use is a sub-millisecond cache hit.
The box has no spare CPU and no GPU. Anything I run competes with the image renderer.

Why self-host

With caching, the per-word cost of a paid API basically disappears, so cost was
not the deciding factor. The deciding factors were control and not wanting a
network hop in the render path. The trade-off is you have to pick a model that
is small, fast on CPU, and good on short copy.

The sweet spot:

Model: facebook/nllb-200-distilled-1.3B (200 languages, purpose-built for translation).
Runtime: CTranslate2 with int8 quantization. This is the key piece. It shrinks the model to ~1.3 GB and runs CPU inference fast. Do not run raw transformers on CPU for this.

A multi-stage Docker build does the conversion once, so the runtime image
carries no torch:

# stage 1: convert + quantize (needs torch, thrown away)
FROM python:3.11-slim AS converter
RUN pip install ctranslate2 "transformers[sentencepiece]" torch \
    --extra-index-url https://download.pytorch.org/whl/cpu
RUN ct2-transformers-converter \
      --model facebook/nllb-200-distilled-1.3B \
      --quantization int8 --output_dir /models/nllb-ct2

# stage 2: runtime (ctranslate2 + tokenizer only)
FROM python:3.11-slim
RUN pip install ctranslate2 "transformers[sentencepiece]" fastapi "uvicorn[standard]"
COPY --from=converter /models /models

The service itself is a tiny FastAPI app with /translate and
/translate_batch. NLLB uses FLORES-200 codes (spa_Latn), so I map ISO codes
(es) and normalize typographic punctuation (em dashes, curly quotes) that the
tokenizer would otherwise drop as <unk>.

Wiring it into rendering

The render service is the only place that needs translation, and it already has
a Redis/Kvrocks cache. The flow:

A text field can carry a language: { "headline": { "text": "Spring Sale", "lang": "es" } }.
The render cache key already includes the full payload (so es and fr are different cache entries). On a cache miss only, translate.
translatePayload() collects every text value with a lang, checks the cache (tr:<lang>:<sha(text)>), batches the misses to the translation service, writes results back to the cache, and swaps the text in.
The harness draws the translated text. The same cache key is used by the editor, so a translation done in the editor is reused at render time and vice versa.

Two operational details that mattered:

The translation container is CPU-capped (a couple of cores). Even a burst of cache misses can't starve the renderer.
It's best-effort: if the service is unavailable, it falls back to the original text. Translation never breaks a render.

The result

POST /v1/render
{
  "templateId": "...",
  "payload": {
    "headline": { "text": "Welcome to our spring sale", "lang": "es" }
  }
}

renders "Bienvenido a nuestra venta de primavera" onto the image. In the
editor there's a one-click "translate the whole template" button with a
searchable 70-language picker, and the bulk-CSV flow supports a per-row lang
column so a single upload can render a batch across markets.

Because every (text, language) pair is cached forever, the model only runs on
genuinely new strings, which for marketing copy is rare after warmup. A small
CPU model plus aggressive caching turned out to be a better fit than a cloud API
for this particular shape of problem.

If you want to see it in action: pixeldrive.pro.
Happy to answer questions about the setup in the comments.

Building an Open-Source Polotno Alternative (Canva-like Editor)

Rutvik Panchal — Tue, 14 Apr 2026 18:48:45 +0000

In the past few weeks, I built an open-source design editor that works similarly to Polotno — and decided to open-source it as OpenPolotno.

The goal was simple: create a Canva-like editor that developers can fully control, customize, and self-host.

🚀 Why I Built This

Polotno is a great tool, especially for quickly building design editors.

But while working with it, I felt a few limitations:

Limited control over customization
Dependency on a proprietary ecosystem
Constraints when scaling or extending features

I wanted something that:

Gives full ownership of the editor
Allows deep customization
Can be self-hosted without restrictions

So I decided to build an alternative — compatible with Polotno, but fully open.

🧠 The Idea

Instead of reinventing everything, I focused on:

👉 Compatibility

If developers are already using Polotno, they shouldn’t need to rewrite everything.

So OpenPolotno supports:

Similar API structure
Template compatibility
Familiar data format

This makes migration or integration much easier.

✨ Features

Here’s what the editor currently supports:

🎨 Drag-and-drop canvas editor
🖼️ Text, images, and layer management
🧩 Polotno-compatible templates
🔌 Similar API structure
💾 JSON-based import/export
⚡ Fast and lightweight performance
🔓 Fully open-source
🧱 Challenges I Faced

Building a design editor is not trivial. Some of the biggest challenges were:

Canvas Rendering Performance

Handling multiple elements (text, images, layers) while keeping the editor smooth required careful optimization.

Data Structure Compatibility

Making the system compatible with Polotno templates while keeping it flexible internally was tricky.

UX Complexity

Even small features (like dragging, resizing, layering) require a lot of edge-case handling.

Scalability

Designing the architecture so it can grow into a full product (plugins, extensions, etc.) took planning.

🎯 What This Can Be Used For

OpenPolotno can be used to build:

Canva-like SaaS products
Social media design tools
Internal design platforms
Marketing automation tools

Basically, anything that requires a visual editor.

🔗 Links

GitHub: https://github.com/therutvikp/OpenPolotno
NPM: https://www.npmjs.com/package/openpolotno

💬 Feedback Welcome

This is just the beginning. I’d love feedback from developers who:

Have used Polotno
Are building design tools
Need a customizable editor

If you have suggestions or ideas, feel free to share 🙌