React Component Viewer: Find Code from React UI, and vice versa!

Visualwind is a VSCode extension that allows you to see the code of a React component by clicking on the UI, and vice versa.

⚡ Isolated Component Rendering within VSCode

⚡ Code <-> UI highlighting

How to start

1. Open a typescript-react file(.tsx).

2. If this is your first run, a GEAR icon will appear in the top right corner of the editor.

   

3. Click it, and you will be guided to set the wrapper file.

4. Open a typescript-react file(.tsx), again.

5. This time, you will see an ARROW icon in the top right corner of the editor.

   

6. Click it, and you will see the ReactComponentViewer UI.

Known Limitations

• Position of <tr>, <td>, <th> tags are not displayed properly when its parent is position:static
• Elements rendered under React.createPortal() can NOT be tracked.

Contacts

If you have any difficulty, trouble, or issue, feel free to contact us: admin@n3rds.io You can checkout here for more info: www.visualwind.dev