🧩 tsx-schema-markup

A package for adding schema markup to your TSX pages — typed, composable, and SEO-friendly.

Overview

tsx-schema-markup is a library of TypeScript + React components that help you add schema.org structured data to your web pages in a clean, strongly typed way. It's built on top of schema-dts and is compatible with Google's Search Gallery recommendations.

This package makes it easy to:

• Embed valid JSON-LD inside <script type="application/ld+json">
• Compose markup with ergonomic, typed React components
• Use a general-purpose fallback component for custom types

✨ Features

• ✅ Componentized Markup — Just use <ProfilePage ... />, <Article />, <Breadcrumb />, etc.
• 🔒 Fully Typed with schema-dts — Autocomplete + validation in your editor.
• 🌍 SEO-Friendly — Produces valid markup for rich search results.
• ⚙️ Custom Support — Use <StructuredMarkup thing={...} /> for ad-hoc data.

📦 Installation

npm install tsx-schema-markup
# or
yarn add tsx-schema-markup

🚀 Usage

Prebuilt Components

Use prebuilt components like <ProfilePage />, <Article />, <Breadcrumb />, etc., for common structured data types supported by Google.

import { ProfilePage } from "tsx-schema-markup/dist/profile-page";
import type { Person } from "schema-dts";

const person: Person = {
  "@type": "Person",
  name: "Jane Doe",
  sameAs: ["https://twitter.com/janedoe"],
};

<ProfilePage
  dateCreated={new Date().toISOString()}
  dateModified={new Date().toISOString()}
  mainEntity={person}
/>;

This renders:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ProfilePage",
    "dateCreated": "...",
    "dateModified": "...",
    "mainEntity": {
      "@type": "Person",
      "name": "Jane Doe",
      "sameAs": ["https://twitter.com/janedoe"]
    }
  }
</script>

Generic Component

For any valid schema.org object, use:

import { StructuredMarkup } from "tsx-schema-markup/dist/structured-markup";
import type { Person } from "schema-dts";

const person: Person = {
  "@type": "Person",
  name: "John Doe",
  url: "https://example.com",
};

<StructuredMarkup thing={person} />;

📚 Included Components

All recommended structured data types from Google Search Gallery are supported, including:

• Article
• BreadcrumbList
• Event
• FAQPage
• HowTo
• JobPosting
• LocalBusiness
• Product
• ProfilePage
• Recipe
• Review
• VideoObject
• ...and more.

🧪 Type Safety

All components are strongly typed using schema-dts, a comprehensive TypeScript definition of schema.org. This gives you:

• Full autocomplete and validation in your editor
• Precise typing for all structured data fields
• Confidence that your markup adheres to spec

Heads-up: schema-dts is huge — it includes every schema.org type and property. This can occasionally make editors (especially VS Code) wheeze, particularly in larger projects or on slower machines.

🧘‍♂️ Fortunately, this affects only the developer experience — the typing is completely erased at compile time and has no impact on your runtime bundle.

If you're familiar with splitting TypeScript type definitions or managing large .d.ts files more efficiently, contributions are very welcome!

📄 License

ISC