Website to React: CodeParrot Chrome Plugin

Why Website to React?

Often we need to create React components without a Design File like Figma, and we look at our favourite websites to find inspiration. Wouldn't it be cool if there was a way to select a component from any website and get maintainable React code, or simply Website to React. Now there is - use CodeParrot Chrome plugin.

How it works

Install the CodeParrot chrome plugin from chrome webstore. Now go to any website and open the plugin

Open CodeParrot Panel 

Select your component

Click on the select icon and then browse the website to choose the component you want to copy.  You will see a bounding box to show the component you are selecting. 

Observe the preview of the component. Click on Generate React Code.

Copy the Code

Copy the code using Copy Button. This will give you a good starting point which you can modify to get the desired output.

Use Cases

Anytime you need to create React components without a Design file. Most common use cases are -  

• Building v1 of the products 
• Internal Tools / Dashboards
• Proof of Concepts

Limitations

The plugin uses the html, css properties of the selected component and its parents to generate code. This information is used by our AI models to generate maintainable React Code. What you should expect from it is a very good starting point, you still need to modify the code to get the desired output but it'll fast track your development significantly. 

Known limitations - 

• Javascript based interactions - Interactions like hover, responsiveness when defined in Javascript like the example below, will not work as we don't pull information from Js scripts.

•  Parent css rules - Some css rules like color, font are inherited from parent. They will not be part of generated code. We are working to solve this.

• Images and font files need to scraped manually (Will be solved soon) - Resources like images, font files are not auto downloaded. Need to be added manually. 

• Larger elements may have low accuracy - AI models work well with limited context. Sometimes css or html elements can be huge. Example - list tags might have lot of items in html even if they are not visible. Such large elements will give incomplete / inaccurate results. 

Roadmap

Over the next few weeks, we'll add the following to improve Website to React functionality. Please join our discord for any feature requests / issues

• Improve accuracy by adding more classes from parent elements
• Improve accuracy by using screenshots along with html/css
• Add fonts and images automatically
• Add ability to choose component library like material ui

For more such products, visit CodeParrot AI