Tip for debugging/visualising data in Bubble

When I’m writing code I often use a code block to display data objects in an easy to read way, rather than logging them to the console (inspired by the SuperDebug component that is a part of the Superforms library).

I’ve started doing the same with my Bubble work as well using my CodeBlock plugin. It makes it so much easier to read data from various sources (workflows, plugin states, api responses, etc) that I’m needing to see and interact with.

Particularly helpful when you want to see the shape of data before building out your UI!

ScreenRecording2025-06-18at16.03.15-ezgif.com-speed

1 Like

Kind of hard to see and understand what it is doing with that quick video. Is it that you are uploading a screen shot of your bubble custom data type and then it shows you the json representation of it? I’m confused on what it does.

Yeah, that’s a fair point :see_no_evil_monkey:

The example was poorly chosen, but in the recording I’m showing the state of the plugin that is a JSON object. Normally this is an object as a single string, which can get pretty hard to read.

I put together an example in my demo app (See “Use case”) that highlights this a bit better - Code Block | Jake Bennett Tech