# Standalone visual comparison of flows - in browser

**URL:** <https://discourse.nodered.org/t/standalone-visual-comparison-of-flows-in-browser/80021>\
**Category:** Share Your Projects\
**Created:** [23 July 2023 12:30 UTC](https://discourse.nodered.org/t/standalone-visual-comparison-of-flows-in-browser/80021 "2023-07-23T12:30:56Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [23 July 2023 14:52 UTC](https://discourse.nodered.org/t/standalone-visual-comparison-of-flows-in-browser/80021/3 "2023-07-23T14:52:44Z")

</div>

> [@Steve-Mcl](#):
>
> Great stuff - love seeing your progress.

Thanks Steve, it's been fun work using Node-RED for doing this.

> [@Steve-Mcl](#):
>
> Now you have this in a re-usable form outside of node-red, it would be great if it were an NPM module that others could import.

Can you point me in the direction of an example NPM package that does what you describe? I'm don't have many NPM experiences and I certainly don't know the best practices when it comes to creating packages.

> [@Steve-Mcl](#):
>
> Bonus points for a CDN.

That's just GitHub - [GitHub - gorenje/cdn.openmindmap.org: image content and discussions for blog.openmindmap.org](https://github.com/gorenje/cdn.openmindmap.org) - that was my [GitHub flow](https://discourse.nodered.org/t/github-commit-via-api-flow/79899), i.e. the reason I built it - so that I could get a cdn for free! 😉

> [@Steve-Mcl](#):
>
> PS: apart from visualising the node, text and position, is the diff supposed to highlight things like changed IDs or props?

IDs would become additions/deletions, props are compared and become changed node i.e. purple in colour. I use the [same comparison code](https://github.com/gorenje/cdn.openmindmap.org/blob/7dfcc123f25d7b992b10f6a3c97ccb3114c31ddb/compare.html#L470-L587) that Node-RED uses with some extensions though.

**Edit** : Apropo prop change, this [example](https://backup.openmindmap.org/?v1=bbcd0a76e5fd7626ac929d728e0b69ae065c71a4&v2=1589ceea613880dcb994251502503590f7d03095&flid=3b1289d7ccf9cb0f) is one -- click on the purple node "Git commit - Press Here" and you'll see a prop change.

 ![Screen Shot 2023-07-23 at 16.58.28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/3192a478d6aee1040a407e96f45a9eff316216b7.png)

(ignore the don't press here notice)

Prop comparison is done because of [this](https://github.com/gorenje/cdn.openmindmap.org/blob/7dfcc123f25d7b992b10f6a3c97ccb3114c31ddb/compare.html#L310-L314) else it was always `[object Object]`.

**Edit2** : for those interested in the codebase, it's once again a [Node-RED flow](https://demo.openmindmap.org/omm/#flow/3586922cb708a29c).

---

_[View the full topic](https://discourse.nodered.org/t/standalone-visual-comparison-of-flows-in-browser/80021)._