FlowDelta

Salesforce + CI

Visual diffs for Salesforce Flows and Lightning pages, right inside your code review workflow.

You need to understand the functionality or ui that changed in the Salesforce Flows of your team's Pull Requests. You shouldn't have to divine that from an XML diff. FlowDelta offers a visual, interactive, node-by-node, edge-by-edge diff, highlighting every added, deleted, or modified element and property. Now Salesforce Flows can get the reviews they deserve, in the same place your team reviews code.

Raw XML isn't just a Flow problem. The same package ships FlexiPageDelta, which does the same for Lightning pages — regions, components, and Dynamic Forms, drawn on a wireframe of the actual page template.

View on GitHub View on npm

A FlowDelta artifact: a Salesforce Flow rendered as a node graph. A newly added fault path and its edges are highlighted green, a modified decision node is outlined orange, and the detail panel on the right lists the per-property change on the modified node.

The generated artifact is a readable, interactive diff. Pan, zoom, and click into changed nodes to see detailed property changes.

// what it does

Visual Diffs

See the real differences — nodes added, deleted, rewired, and every property that changed.

A self-contained artifact

Each flow becomes one interactive HTML file. Filter to After, Before, or Changes only, click any node for its property detail. No server, no build step — just open it in a browser.

Built for code review

CI reporters post one sticky comment on GitLab MRs and GitHub PRs, with links straight into the hosted artifact — private repos included. Sample yaml you can copy into your CI configuration makes it easy to setup.

// per-node property deltas

Click any node and the panel breaks the change down to the property. Screen settings, decision outcomes, assignment operations, fault connectors — every field that moved is shown as added, removed, or changed, grouped into the sections that make sense for that node type. Flow-level attributes are diffed too, so "someone quietly set this flow to Draft" shows up as a change instead of a line buried in the XML.

A FlowDelta artifact showing an added Screen node highlighted green, a deleted connector as a red dashed edge, and the detail panel expanding the new node's Screen Settings and Field properties.

See it live on a real pull request

Two example projects have FlowDelta wired into CI. Open a merge request or pull request and read the diff comment it posted — artifacts and all.

Sample GitLab MR Sample GitHub PR

// flexipagedelta — lightning pages

Lightning page metadata is every bit as unreadable as a Flow, and the review problem is the same one. FlexiPageDelta ships in the same package and diffs .flexipage-meta.xml semantically: regions, components, fields, and nested Dynamic Forms, matched by identity so an inserted component doesn't cascade into a wall of false modifications.

The artifact renders two ways. The outline view is a hierarchical tree of the page; the wireframe view lays those regions out on the geometry of the actual page template — so you can see where on the page something changed, not just that it did.

A FlexiPageDelta wireframe artifact: a Lightning record page laid out as header, left sidebar, main, and right sidebar regions. An added rich text component is highlighted green in the header, a deleted detail panel is red in the right sidebar, and a modified activity panel is outlined orange in main.

The wireframe view: added, deleted, and modified components in the region they actually live in.

Same ergonomics as the Flow tooling — flexipage-delta for the diff, flexipage-delta-gitlab and flexipage-delta-github for the CI comment.

// run it

FlowDelta runs as a CLI in three modes: two local files, two git refs across a whole repo, or two Flow versions pulled straight from a Salesforce org. Point the CI reporters at the output directory and they'll post the review comment for you.

terminal — flow-delta

# diff two local files, also emit machine-readable diff.json
$ npx flow-delta --old before.flow-meta.xml --new after.flow-meta.xml \
    --out ./flow-delta-out --json

# or diff every changed flow between two git refs
$ npx flow-delta --repo . --from main --to my-branch \
    --path 'force-app/**/*.flow-meta.xml' --changed-only --out ./flow-delta-out --json

# or diff two Flow versions straight out of an org — no git required
$ npx flow-delta --org my-org --flow My_Flow \
    --from-version 1 --to-version 2 --out ./flow-delta-out

# Lightning pages, same shape
$ npx flexipage-delta --old before.flexipage-meta.xml --new after.flexipage-meta.xml \
    --out ./flexipage-delta-out --json

# in CI: post a sticky review comment from the artifacts
$ flow-delta-gitlab --in flow-delta-out
$ flow-delta-github --in flow-delta-out

Org mode

Diff version 3 against version 4 of a Flow without cloning anything. It reuses your existing sf CLI login and offers an interactive picker when you don't name a flow or versions.

Hosted artifacts

Reviewers shouldn't have to download a CI zip. Publish artifacts to your own R2 bucket — presigned URLs, or the included Cloudflare Worker template for a stable signed base URL — and the PR comment links right into the live render, private repos included.

View on GitHub → View on npm →

Inspired by Google's Flow Lens, and vendors its Flow parser under the Apache 2.0 license; FlowDelta-authored code is MIT.