I recently published a very config-heavy graphics library for React, react-particles-webgl, and as I was building the demo page (go play with it!)I began realizing how convenient it would be to copy + paste the current config directly into your own code. I already had the entire particle config saved in React state for updating the particles as you change it's parameters. Luckily, all I needed was to get that object into the browser somehow.
After pouring over countless Stack Overflow and Google search results, I finally came across a package for solving this exact problem: stringify-object.
Usage is just as simple as
After generating this string via
stringifyObject(), one could simply run it through a syntax highlighter like I've detailed in my post building-react-code-blocks-with-prism to represent any object in the browser as it would appear in your code editor.