Build for the notch in 12 lines of code
Every Flownotch widget is a tiny React component with a manifest. We handle the rendering, focus management, and the pet — you write the part that matters.
Write TypeScript. Ship to the notch.
The SDK is plain React. Use whatever state and styling you already know. The notch is just another surface.
import { Widget } from "@flownotch/sdk"
export default Widget({
id: "pomodoro",
render: () => {
const [t, setT] = useState(25 * 60)
return <Timer seconds={t} />
}
})
// -> installed in your notch.Your notch pet, your way.
Twelve skins, custom moods, and a behaviour engine that responds to your day — the pet naps when you're heads-down and waves when you wrap a meeting.
16ms to first paint.
Native Metal rendering with a 60fps budget. Widgets feel like part of the OS, not a webview.
Wired into the tools you already use.
First-class integrations with the things in your menu bar today. Read events, trigger Shortcuts, send messages — or wrap any of them in a widget.
Built-in widgets
Eight widgets ship with Flownotch on day one. Each one is open-source — fork it, tweak it, ship your own.
Three steps to your first widget
Install the SDK
npm i @flownotch/sdk — one package, zero config. TypeScript types are included.
Write a Widget
Export a default React component plus a 4-line manifest. Hot-reload runs live in your notch as you save.
Ship to the directory
flownotch publish bundles, signs, and submits. Earn 80% rev share on paid widgets.