codeparrot.ai

Why Website to React? The fastest way to select a component from any website and get maintainable React code, or simply Website to…

Latest Version

Version

1.2

Update

July 24, 2024

Size

99.98KiB

Developer

codeparrot.ai

Website To React - By CodeParrot.ai Extension

Why Website to React?

The fastest way to select a component from any website and get maintainable React code, or simply Website to React.

❔How it works

- Go to any website and open the plugin. Open CodeParrot Panel

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

- See the preview of the component. Click on Generate React Code.

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

🌟 Top 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 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,

- Resources like images, font files need to be added manually. We are working to solve this.

- 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.

For more such products, visit https://codeparrot.ai/

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Website To React - By CodeParrot.ai", "version": "1.2", "permissions": ["activeTab", "scripting"], "host_permissions": [ "https://supernova-otm3onubpa-uc.a.run.app/*" ], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "background": { "service_worker": "background.js" }, "web_accessible_resources": [ { "resources": ["lib/prism.js", "lib/prism.css","inspect-btn.png","loading.gif"], "matches": [""] } ], "action": { "default_popup": "popup/popup.html" }, "icons": { "48": "logo.png", "96": "logo.png" } }

Download CRX(99.98KiB)