jsm-treeify

A library to display JavaScript objects as colorized, tree-like structures in the console using ANSI colors. It's especially helpful for debugging complex objects and data structures.

Installation

npm install jsm-treeify

Usage

Import the jsmTreeify function and call it with the object you want to visualize:

JavaScript

import jsmTreeify from 'jsm-treeify';

const myObject = {
  name: 'John Doe',
  age: 30,
  isAdmin: false,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zip: '12345',
  },
  hobbies: ['reading', 'hiking', 'coding'],
  active: true,
  lastLogin: new Date('2023-08-17T12:34:56.789Z'),
  emptyObject: {},
  emptyArray: [],
  deeplyNested: {
      level1: {
          level2: {
              level3: {
                  value: 'Finally!'
              }
          }
      }
  }
};

console.log(jsmTreeify(myObject));

Output:

The output will be a colorized tree representation of the object, printed to the console. The colors used are:

• Cyan: Strings
• Yellow: Numbers
• Green: Boolean true
• Red: Boolean false
• Blue: Dates (ISO format)
• Gray: null, empty arrays (empty array), empty objects (empty object), tree connectors, and other elements

└─ name: 'John Doe'
└─ age: 30
└─ isAdmin: false
└─ address:
│   └─ street: '123 Main St'
│   └─ city: 'Anytown'
│   └─ zip: '12345'
└─ hobbies:
│   └─ 'reading'
│   └─ 'hiking'
│   └─ 'coding'
└─ active: true
└─ lastLogin: 2023-08-17T12:34:56.789Z
└─ emptyObject: (empty object)
└─ emptyArray: (empty array)
└─ deeplyNested:
    └─ level1:
        └─ level2:
            └─ level3:
                └─ value: 'Finally!'

API

jsmTreeify(obj: any): string

Transforms a JavaScript object into a colored, tree-like string representation suitable for console output.

Parameters:

• obj: The JavaScript object you want to visualize as a tree. It can be any valid JavaScript object, including nested objects, arrays, primitives, dates, null, and undefined.

Returns:

A formatted string that represents the object as a tree, including ANSI color codes for visual enhancement in supported terminals.

Contributing

Contributions are welcome! If you find a bug or want to add a feature, please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/my-new-feature

3. Make your changes and commit them:

   git commit -am 'Add some feature'

4. Push to the branch:

   git push origin feature/my-new-feature

5. Submit a pull request.

Please ensure your code adheres to the existing code style and includes appropriate tests.

License

MIT

Author

Salmi AHmed

Sources and Related Content