Creating a Reusable PrettyPrint Debugging Tool in React for HubSpot Development

I've recently been getting into the exciting (and daunting) world of developing React modules and templates for Hubspot. One of the tricky things I found early on was understanding the data you're working with. Where in hubl, you'd use the pprint filter({{ this_var|pprint }}),I was a bit lost for an equivalent when developing react components. 

In particular, when you have a blob like fieldValues or hublParameters, you often don't know exactly what you're getting. Debugging becomes essential.

So, how do you quickly visualize that data?

Enter PrettyPrint.jsx - A React Debugging Helper

Here's the utility function I found myself writing again and again in various modules:

const prettyPrint = (obj) => {
  return (
    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
      {JSON.stringify(obj, null, 2)}
    </pre>
  );
};{% endraw %}

This gave me beautifully formatted, readable output directly in my module’s output—perfect for development, especially when you're unsure of the structure of fieldValues or similar props.

You’d use it like this:

return (
  <Layout>
    {prettyPrint(fieldValues)}
    <Island module={MenuBar} navLinks={fieldValues} />
  </Layout>
);

But copy/pasting is a pain

It didn’t take long before I realized: I was copy-pasting the same prettyPrint function into multiple React files—modules, partials, islands, etc.

So, to make things cleaner and more reusable, I extracted it into its own component: PrettyPrint.jsx.

// PrettyPrint.jsx
function PrettyPrint(item) {
  return (
    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
      {JSON.stringify(item, null, 2)}
    </pre>
  );
}
export default PrettyPrint;

{% endraw %}

Now, in any component where I need a quick peek at the data, I just import it:

import PrettyPrint from '../../PrettyPrint.jsx'; // Adjust the path as needed

And drop it in like so:

export function Component({ fieldValues = {}, hublParameters = {} }) {
  return (
    <Layout addClass="added_class">
      <PrettyPrint item={fieldValues} />// or you can continue to use {prettyPrint(fieldValues)}, both should work
    </Layout>
  );
}

export default Component;

Why This Is Useful for HubSpot Devs

When working in HubSpot, especially with HubL-powered fields and React-rendered components, having a quick, formatted display of your props helps:

• Debug unexpected behavior from the CMS side

• Inspect deeply nested objects like navigation structures, CTA modules, or image data

There you have it!

PrettyPrint.jsx, it's a small helper but it's saved me hours of guesswork!