Product Schema Generator (JSON-LD) Generate Schema.org Product JSON-LD with price, availability, ratings, and review data.

The tool works under the hood by using React to manage state changes and generate JSON-LD output based on user input. It utilizes the `useState` hook from React to store values for product properties such as name, description, image URL, brand, SKU, GTIN, price, currency, availability, and condition. When the user interacts with the interface, these state values are updated and used to construct a JSON object that conforms to Schema.org's Product schema. The `generateSchema` function is responsible for creating this JSON object, which includes properties like `@context`, `@type`, and `name`, as well as nested objects for offers and aggregate ratings.

The tool uses JavaScript's built-in `JSON.stringify` method to convert the generated JSON object into a string format, with an indentation of 2 spaces for readability. This output is then displayed in a `<pre>` element on the page, allowing users to easily copy and paste the code into their own websites. The `copyToClipboard` function from the `@/lib/utils` module is used to handle the copying process when the user clicks the "Copy with Script Tag" button. This function takes the generated JSON-LD output, wraps it in a `<script>` tag with the type set to `application/ld+json`, and copies it to the user's clipboard.

In terms of data structures, the tool relies heavily on JavaScript objects to represent product data and Schema.org properties. It also uses arrays to store values for select elements, such as currency options and availability statuses. The tool does not rely on any external libraries or frameworks beyond React, instead using native browser APIs and JavaScript features to generate and manipulate JSON-LD output. By leveraging these technologies and following Schema.org guidelines, the tool provides a robust solution for generating product schema markup that meets Google's requirements for rich snippets and product listings.