Foblex Flow v18: Waypoints, Pinch-to-Zoom, and Better Control Flow Support

Foblex Flow v18 improves route editing and viewport control for Angular node editors with connection waypoints and first-class pinch-to-zoom support.

Today I’m shipping v18.0.0, and it’s a big one. The headline features are Connection Waypoints and Pinch-to-Zoom, plus a few important improvements for real-world Angular apps.

Connection Waypoints — Editable Paths for Any Connection Type

Until now, a connection path was mostly a builder decision (straight / segment / bezier / adaptive curve).

In v18 you can edit the connection route by adding and moving waypoints

What it feels like in the editor

Drag a candidate point to create a new waypoint (drag-to-add).
Drag an existing waypoint to adjust the route (drag-to-move).
Right click a waypoint to remove it (simple and fast, no extra selection state).

Waypoints are not a separate connection type — they work on top of your chosen type:

straight / segment / bezier / adaptive curve.

✅ Example: https://flow.foblex.com/examples/connection-waypoints

Connection Waypoints Example

Minimal usage

This keeps the data lives in your app”principle: Waypoints are just points, and you fully own them.

Pinch-to-Zoom — A First-Class Multi-Touch Zoom UX

Zooming used to be wheel/double-click/buttons — good for mouse users, but not enough for modern devices.

v18 adds pinch-to-zoom:

Trackpads (macOS / Windows precision touchpads)
Touch devices

✅ Example: https://flow.foblex.com/examples/zoom

Enable it the same way as normal zoom:

Better Compatibility with Angular Control Flow and Content Projection

Angular’s @if / @for are great — but real component trees + content projection can be tricky.

In v18 I updated the canvas projection slots, so you can wrap nodes/connections using grouped slots:

This makes “conditional rendering + content projection” much more predictable.

Custom Backgrounds — richer SVG patterns + new example

Backgrounds in flow editors matter more than people think: grid, dots, paper-like patterns, or fully custom SVG.

In v18:

better support for complex SVG patterns
plus a new example showing how to build advanced backgrounds

Release + demo

Release: https://github.com/Foblex/f-flow/releases/tag/v18.0.0
Waypoints example: https://flow.foblex.com/examples/connection-waypoints
Zoom example: https://flow.foblex.com/examples/zoom

Closing

Waypoints are one of those features that instantly level up any node editor:

users can make routes clean, readable, and intentional — without fighting the layout.

If you’re building a visual editor in Angular and want a native Angular solution (not a React wrapper) — take a look.

And if you like what I’m building, please consider starring the repo ⭐️

It helps the project a lot.