https://github.com/jeshicawang/envision-jsx

A developer tool for visualizing a React application's component hierarchy.
https://github.com/jeshicawang/envision-jsx

acorn ast chai component css d3 hierarchy html jsx mocha mustache node-module nodejs npm npm-package react svg template-engine tree-structure

Last synced: about 1 month ago
JSON representation

A developer tool for visualizing a React application's component hierarchy.

• Host: GitHub
• URL: https://github.com/jeshicawang/envision-jsx
• Owner: jeshicawang
• Created: 2017-02-07T20:53:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-28T02:25:53.000Z (almost 8 years ago)
• Last Synced: 2024-12-15T06:38:14.854Z (about 1 month ago)
• Topics: acorn, ast, chai, component, css, d3, hierarchy, html, jsx, mocha, mustache, node-module, nodejs, npm, npm-package, react, svg, template-engine, tree-structure
• Language: JavaScript
• Homepage:
• Size: 59.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![](https://travis-ci.org/jeshicawang/envision-jsx.svg?branch=master) ![](https://badge.fury.io/js/envision-jsx.svg)

![](http://g.recordit.co/JMZWz74YRt.gif)

# ENVISION 

A developer tool for visualizing a React application's component hierarchy.

## Usage

Install globally for usage anywhere on your system.

    $ npm install -g envision-jsx

    

Once installed, cd into the directory that contains your source file, and pass in the path to the root component you want to begin with (Typically where your ReactDOM.render call is). Envision will generate a tree diagram visualizing your application's React JSX component hierarchy.

    $ envision 

## Prerequisites

For now... envision will only understand your *unbundled* source code and assumes you are using JSX.