https://github.com/oslabs-beta/nexus

NextJS VScode extension to visualize component tree.
https://github.com/oslabs-beta/nexus

component-architecture developer-tools nextjs reactjs vercel vscode-extension webpack webview

Last synced: 13 days ago
JSON representation

NextJS VScode extension to visualize component tree.

• Host: GitHub
• URL: https://github.com/oslabs-beta/nexus
• Owner: oslabs-beta
• License: mit
• Created: 2022-02-15T03:09:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-28T00:38:02.000Z (over 2 years ago)
• Last Synced: 2025-04-30T19:06:50.738Z (13 days ago)
• Topics: component-architecture, developer-tools, nextjs, reactjs, vercel, vscode-extension, webpack, webview
• Language: JavaScript
• Homepage: https://nexus-js.com/
• Size: 7.61 MB
• Stars: 69
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        







  

  	

  


Nexus


  


    A component tree extension for NextJS

    


    


    Report Bugs

    ·

    Request Features

  



  Table of Contents

  


    


      About The Project

      


        
Built With

      

    

    
Installation

    


      Getting Started

      


        
Prerequisites

      

    

    
Usage

    
Roadmap

    


      Steps to Contribute

      


        
Making Changes

      

    

    
License

    
The Nexus Team

    
Contact

  


## About The Project

Nexus is a VSCode Extension created for NextJS developers! As codebases scale in size and complexity, developers may feel overwhelmed as they keep track of tens of components and hundreds of props elements per file. Nexus aims to help developers overcome unnecessary mental strain through 3 main methods:

1. Displaying file-specific component hierarchy in your VSCode sidebar

2. Including component-specific state and props objects for parent and child components

3. Differentiating between server-side rendered and static-site generated components

We at Team Nexus hope that you enjoy our extension, taking advantage of a time-tested component tree model that integrates the unique features of NextJS!  

(back to top)


### Built With



  


      NextJS 

  

  


      React

  

  


      VSCode Extension API 

  

  


      Typescript 

  

  


      Webpack 

  

  


   Acorn-Parser 

  



## Installation

1. Install Nexus

2. A node tree icon should appear on your sidebar. You've now installed Nexus! Woot Woot! Now on to the "Getting Started" section below.

Note: If contributing, see the "Installation for Contributors" section below! 

## Getting Started

Congrats on installing Nexus! Now let's get it started.

### Prerequisites

Nexus supports OSX, Windows, and WSL

## Usage

1. Click the node tree icon on your sidebar. An "Input File Here" button should appear on your side panel!






  






2. Click the button and your file explorer window will open. Select a file and press "Ok".






  






3. Your side panel should now render a component tree that displays SSG or SSR status! Clicking on components will render child components if they exist and hovering over components will display their props objects. Enjoy!






  






## Roadmap

- [ ] Creating a webview to look deeper into structure of individual components

- [ ] Making the parser more dynamic and flexible

- [ ] Handling Link Components

- [ ] Error checking in the frontend to ensure that uploaded files are either NextJS or React

- [ ] Add status bar item for Nexus

- [ ] Store component tree memory in VSCode

See the [open issues](https://github.com/oslabs-beta/Nexus/issues) for a full list of proposed features (and known issues).

## Steps to Contribute

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork & Clone Nexus

2. Create your Feature Branch (`git checkout -b /`)

3. Make your Changes (See **Making Changes** below)

4. Commit your Changes (`git commit -m ''`)

5. Push to the Branch (`git push origin /`)

6. Open a Pull Request

### Making Changes

1. Make your changes!

2. Open /nexus/src/extension.ts and save any changes you made

3. Re-compile and re-build your extension using the command line: `npm run compile` & `npm run build`

4. Press F5. A new VSCode window should open. This is your debugging environment!

5. Repeat step 3 and refresh your debugging environment to test further changes

## License

Distributed under the MIT License. See `LICENSE` for more information.

## The Nexus Team

* Mike Hong [LinkedIn](https://www.linkedin.com/in/mykongee/) | [Github](https://github.com/mykongee)

* Brian Chiang [LinkedIn](https://www.linkedin.com/in/brian-chiang-849a181a7/) | [Github](https://github.com/BChiang4)

* David Lee [LinkedIn](https://www.linkedin.com/in/david-lee-39541411a/) | [Github](https://github.com/dplee123)

* Nico Flores [LinkedIn](https://www.linkedin.com/in/nicolasaflores/) | [Github](https://github.com/nicoflrs)

* Alex Hersler [LinkedIn](https://www.linkedin.com/in/alex-hersler/) | [Github](https://github.com/FoxEight)

## Contact Us

Email: [email protected]

Twitter: [@teamnexus_js](https://twitter.com/teamnexus_js) 

Website: [https://nexus-js.com/](https://nexus-js.com/)