Dev Team Restyled a Third-Party React Plugin for Austrian Animal Shelter Without Editing Its Code

A developer working for Austrian animal shelter Arche Noah built a CSS and vanilla JavaScript augmentation layer to reshape a commercial WordPress plugin's React app without modifying its source code. The plugin, which pulls pet adoption data from an external SaaS called Pet-Manager, had design inconsistencies and missing UI elements that needed fixing for the shelter's audience. Because the plugin updates would overwrite any direct changes and the React bundle is minified, the team used a MutationObserver-based approach to modify the app from the outside. A key lesson emerged when React's reconciliation process silently broke the UI after users navigated between animals, caused by the team moving DOM nodes that React believed it owned. The solution was to hide unwanted elements rather than remove them, and to append new custom nodes instead of reparenting React's own, ensuring changes survived repeated re-renders.