A Tool For The Complete And Total Visualization For React

by React

Reactron

Empowering the Development Process from Top to Bottom.

A tool for the complete and total visualization of your React application

Reactron bolsters development by rendering three essentials parts of any project: the latest version of your application including functionality, a React Component Tree for a macroscopic view of your project, and single component rendering for a microscopic understanding.

Reactron is currently in active development so we welcome any constructive feedback or contributions to this product. Please follow this repo for contribution guidelines and our development road map.

View Documentation View Github

Current Features

  • [x] Rendering and functionality of your total React application
  • [x] Comprehensive visualization of your React Component Tree
  • [x] Selection and rendering of specific React components
  • [x] Storage for users with multiple projects

In Progress

  • [ ] Updating state view web-application interface
  • [ ] Selecting specific nodes to render specific components
  • [ ] Exporting updates to your VS Code
  • [ ] A VS Code extension for even greater developer experience

How to Use

Otherwise view a demo of our application by pressing 'Demo!'
After logging in:
  1. Upload your application when prompted: first your Styling File, then your Component Folder
  2. Afterwards, you should see a 'Next' button pop-up which will lead to your application
  3. Your screen will now feature all three visualizations of the project you uploaded
  4. Select individual components you wish to see rendered and broken down into it's different parts
  5. Repeat this process for any number of your components you wish to view
  6. Once you're finished, logout
  7. The next time you log in you will be able to pick back up where you left off