May 7, 2026 4 min readFreeFlowCharts Team

Mobile Polish: A Smoother Flowchart Experience on Your Phone

FreeFlowCharts is now fully mobile-friendly. Slide-out sidebar drawer, scrollable toolbars, responsive modals, iOS safe-area support, and touch-optimized gestures — all without breaking the desktop experience.

mobile ux responsive polish ios

Flowchart tools are traditionally desktop-first. Giant canvases, tiny toolbars, drag-and-drop interactions that assume a mouse cursor — they feel broken on a phone. We just shipped a full mobile optimization pass that changes that.

What's new on mobile

Slide-out sidebar drawer: — the node palette and properties panel collapse behind a hamburger menu on phones. Tap the ☰ icon to add nodes or edit properties; the drawer auto-closes after you pick a node so you immediately see it land on the canvas.

Horizontally scrollable toolbar: — all toolbar icons (undo, redo, zoom, theme, AI, share, export, save) remain reachable via a quick horizontal swipe. Nothing is hidden or removed.

Responsive modals: — the AI assistant, version history, cover image picker, search, and feature request dialogs now fill the screen on phones instead of floating awkwardly in the center at desktop widths.

Touch-optimized canvas: — pinch-to-zoom and two-finger pan work natively. We set touch-action: none on the React Flow pane so the browser doesn't fight you with page-level scroll or zoom.

iOS safe-area support: — the bottom drawer respects the home-indicator bar on modern iPhones via env(safe-area-inset-bottom). The status bar blends seamlessly with viewport-fit=cover and a matching theme-color.

Bigger tap targets: — icon buttons get a minimum 36px hit area on mobile so you can actually tap them without zooming in.

How we did it (without breaking desktop)

Every change is gated behind Tailwind responsive prefixes (sm:, md:) or a lightweight useIsMobile() hook that checks window.matchMedia. The desktop experience is byte-for-byte unchanged — no conditional rendering overhead, no hydration mismatch. The sidebar is simply hidden md:flex on desktop and a fixed-position drawer on mobile.

The "no new packages" philosophy

We intentionally added zero new npm dependencies. The useIsMobile hook is 30 lines of vanilla React. The slide-in animation is a single CSS @keyframes rule. The scroll-hiding for the toolbar is one Tailwind utility class + a 4-line CSS override. This keeps the bundle identical in size and avoids version-lock headaches.

Try it

Open freeflowcharts.app on your phone right now. Tap the hamburger, drop a few nodes on the canvas, pinch to zoom, and tap a node to see its properties slide in. Then flip back to desktop and confirm nothing has changed — the sidebar is right there where it always was.

What's next

We're working on a dedicated mobile toolbar at the bottom of the screen for the most common actions (add node, undo, redo, zoom-to-fit), and offline support via a service worker so you can sketch flows without connectivity. Stay tuned.