draw nested object like in chrome console using js in html [closed]

I have several js objects that look something like this:

const ih_t = { header : 0, body: Array.from({ length: 18 }, () => ({ val: 0 })) };

I would like to display them on an HTML page in the same way that Google Chrome displays objects in its console. I think many people have seen this display; it looks like this:

Let me say right away that I don't need these functions and the word “prototype.” (My objects don't contain functions.) I would like to display only what I have included in the object. And draw it in the form of a beautiful html tree in pure js without any libs (like in chrome dev tools)

It would be ideal to support field names. For example, the structure above could be:

<div> top level contain ih_t and have two child <div> header and body
header <div> contain "header" and value, bode <div> contain "body" and array
for each array memeber we have separate child <div>

is it possible?

for trinagle we can use svg with path:

<path xmlns="http://www.w3.org/2000/svg" d="M15,10l-9,5V5L15,10z"/>