One clinical-notes editor for web, mobile and desktop.

The product is a clinical-documentation tool for behavioral-health providers: faster, higher-quality notes, with terminology suggestions tuned to behavioral health, and a clean path from a session to a signed note. It ships in three forms (a web app, a mobile app, and an installable desktop app), all sharing one writing experience.

The client, a US-based IT partner to behavioral-health providers, brought us in as product owner. We were in every stage (requirements, design, development and QA) across all three runtimes, on a deliberately tight timeline.

We took the product-owner seat alongside the US team, joining user-feedback sessions, brainstorming features together, and turning ideas into shippable work. Our UI/UX designers ran a fast loop: mock up an idea, get user feedback, refine, hand to development. That tight loop, on top of a genuinely well-architected codebase, is what let a small team ship a broad product quickly.

On the web we built on Quill, customized with expansions, drop-ins and inline suggestions for a fast clinical writing flow. Then came the hard part: Quill is web-only, and React Native has no equivalent rich-text editor. Rewriting it natively (twice, for Android and iOS) would have fractured the experience and doubled the surface area for bugs.

Our out-of-the-box approach: run the same Quill build inside a WebView on mobile, and bridge it to React Native with asynchronous message-passing. Native code and the editor stay fully decoupled, posting only messages, so one editor, with the same rich features, runs identically on web, Android and iOS.

1// The rich-text editor is web-only, so we run the SAME Quill build inside a2// WebView and bridge it to React Native with async message-passing. Native and3// editor never touch directly; they only post messages to each other.4 5// ── native side (React Native) ──────────────────────────────────────────────6const editor = useRef<WebView>(null);7 8const send = (type: string, payload?: unknown) =>9  editor.current?.injectJavaScript(10    `window.__editor.receive(${JSON.stringify({ type, payload })}); true;`,11  );12 13<WebView14  ref={editor}15  source={{ uri: 'editor/index.html' }}          // bundled, offline Quill build16  onMessage={(e) => {17    const msg = JSON.parse(e.nativeEvent.data);18    if (msg.type === 'ready')  send('load', note);          // hydrate the editor19    if (msg.type === 'change') persistDelta(msg.payload);   // offline-first save20  }}21/>;22 23// ── editor side (inside the WebView) ────────────────────────────────────────24const RN = (window as any).ReactNativeWebView;25const quill = new Quill('#editor', { modules: { expansions, dropIns } });26 27quill.on('text-change', () =>28  RN.postMessage(JSON.stringify({ type: 'change', payload: quill.getContents() })),29);30(window as any).__editor = {31  receive: ({ type, payload }) => type === 'load' && quill.setContents(payload),32};33RN.postMessage(JSON.stringify({ type: 'ready' }));

Clinicians can create sessions and write notes with no connectivity; the device syncs the moment it reconnects. On the device, the app is locked behind biometric authentication and everything is encrypted at rest with crypto-js.

Drawing on what we learned building our earlier offline-first clinical app, we made the encryption frugal: rather than re-encrypt the whole note on every keystroke, we diff state and encrypt only the key-value pairs that actually changed: identical security guarantees, a fraction of the CPU, and a phone that stays cool and responsive.

1// Encrypting the whole note on every keystroke burns CPU on a phone. Instead we2// diff the persisted state and encrypt ONLY the key-value pairs that changed.3import AES from 'crypto-js/aes';4 5function persistDelta(next: NoteState) {6  const prev = store.getState().note;7  const changed = Object.keys(next).filter((k) => next[k] !== prev[k]);8 9  const patch = changed.reduce<Record<string, string>>((acc, k) => {10    acc[k] = AES.encrypt(JSON.stringify(next[k]), sessionKey).toString();11    return acc;                                  // same AES strength, far less work12  }, {});13 14  return db.notes.update(next.id, patch);        // SQLite, encrypted at rest15}

We packaged the web app as an installable desktop application with Electron. Same features, same code, a desktop-native launch, and no third runtime to maintain.

• A fast, fluid note-taking experience, the same on web, Android, iOS and desktop.
• Sessions and notes captured offline and synced on reconnect, encrypted at rest.
• Data turned into dashboards and customizable reports, not raw tables.
• A broad product delivered on a tight timeline through product ownership and a tight design loop.

The temptation with “works everywhere” is to rebuild the experience per platform and watch them drift. We did the opposite: shared the single hardest component, the editor, across every runtime, and let native code do only what it’s good at. The result is one product that feels consistent in a browser, in a clinician’s hand, and on a desktop, online or off.