Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
thing-to-html
Advanced tools
Thing To HTML
Convert JavaScript objects and arrays to HTML!
thingToHTML will take an object or an array (no matter how deeply nested) and create an HTML structure on you're page that is collapsible at each level - similar to what the JSONview plugin for Chrome does for JSON objects. Optionally, you can have it create a collapse / un-collapse all button at the top of the generated tree. Objects do not need to be JSON, meaning that double-quotes are not needed for everything (ugly!), and property values can be functions. There are two themes supplied, light & dark, for your syntax-viewing pleasure :).
Installation
via NPM
npm install thing-to-html
Include thing.css in your page's <head>:
<head>
...
<link rel="stylesheet" href="node_modules/thing-to-html/thing.css">
</head>
Include thingToHTML.js just before your closing <body> tag:
<body>
...
<script src="node_modules/thing-to-html/thingToHTML.js"></script>
</body>
Manually
Download thing.css and thingToHTML.js.
Include thing.css in your page's <head>:
<head>
...
<link rel="stylesheet" href="thing.css">
</head>
Include thingToHTML.js just before your closing <body> tag:
<body>
...
<script src="thingToHTML.js"></script>
</body>
Usage
thingToHTML({
thing: <{an: object} OR [an, array]>,
container: '.any-css-selector',
button: true, // optional
theme: 'dark' // optional - 'dark' or 'light'
});
thingToHTML takes an object as its only argument with 2 necessary properties (thing, container) and 2 optional properties (button, theme).
thing
An object or an array. The fun starts when you have deeeeeeply nested objects & arrays.
{some: 'Object'} or ['some', 'array']
container
Any valid CSS selector as a string. thingToHTML will use document.querySelector to grab it.
Example selectors:
'.some-class''#some-id''body''.some-class .in-another-class'- etc...
button
This property is optional. Pass in true if you would like to generate the "Collapse / Un-Collapse All" button, omit it if not. The button will toggle all levels of your object to be open or closed.
theme
This property is optional. There are two themes supplied in the CSS file: 'light' and 'dark'. Pass one in to get that theme (see examples below) or omit this property altogether for no styling. The themes will provide syntax highlighting for everything except functions.
Examples
Object example
var myObject = {
string: 'This is a string.',
boolean: true,
null: null,
undefined: undefined,
numbers: 1234567890,
url: 'https://github.com/qodesmith',
email: 'someone@example.com',
array: ['one', 'two', 'three'],
object: {property: 'value'},
singleLineFxn: function() { return 'I am a single-line function!'; },
multiLineFxn: function() {
var x = ['Notice', 'how', 'your', 'indentation', 'is', 'preserved?'];
x.map(function(word) {
console.log(word);
});
return 'Awesome';
},
arrayOfObjects: [
{arrays: 'can', be: 'nested'},
{as: 'deep', as: ['you', {would: 'like'}]},
{this: {reminds: {me: {of: 'Inception'}}}}
]
};
thingToHTML({
thing: myObject,
container: '#some-id',
button: true,
theme: 'dark'
});
This renders out on the screen like this (dark theme):
Open
Closed
Array example
var myArray = [
'Various types have CSS styling for syntax highlighting.',
'Functions are the only types not syntax highlighted',
function singleLine() { return 'This is a single line function.' },
function multiLine() {
var line1 = 'This is a multi-line function ';
var line2 = 'in an array.';
return line1 + line2;
},
{numbers: 1234567890, moreNumbers: 0987654321},
{this: {obj: {can: {be: {nested: ['like', 'crazy', {deep: undefined}]}}}}},
['array', ['within', 'arrays'], ['within' ['more', 'arrays']]]
];
thingToHTML({
thing: myArray,
container: '.some-class',
button: true,
theme: 'light'
});
This renders out on the screen like this (dark theme):
Open
Closed
Contact
Questions? Comments? Issues? Feature requests?
I'm all ears...
FAQs
Convert objects & arrays to HTML!
We found that thing-to-html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 14 Aug 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026