JSON-LD
Renders a safely serialized application/ld+json script tag.
The script tag is in the document. Its escaped contents:
{
"@context": "https://schema.org",
"@type": "SocialMediaPosting",
"@id": "https://social.example/users/ada/posts/1",
"text": "Structured data ships with the markup \u003c/script\u003e",
"author": {
"@type": "Person",
"name": "Ada Okoye"
}
}Installation
npx shadcn@latest add https://ui.uptoolkit.com/r/json-ld.jsonUsage
Emits structured data as an application/ld+json script tag. Works in a server component, a client
component, or anywhere else you can render an element.
import { JsonLd } from "@/components/json-ld";
<JsonLd data={{ "@context": "https://schema.org", "@type": "Person", name: "Ada Okoye" }} />Pass an array to emit several nodes at once. null, undefined, and empty arrays render nothing, so
you can hand it optional data without guarding the call site.
Escaping
JSON.stringify alone is not safe to interpolate into HTML. serializeJsonLd escapes <, >, and
& so a value containing </script> cannot terminate the tag early, and escapes U+2028 / U+2029,
which are legal in JSON but not inside a JavaScript string literal.
serializeJsonLd({ text: "</script><script>alert(1)</script>" });
// {"text":"</script><script>alert(1)</script>"}Pass space to pretty-print while debugging, and id if your framework needs to dedupe or replace
the tag between navigations.