diff --git a/.changeset/puny-games-bow.md b/.changeset/puny-games-bow.md
new file mode 100644
index 00000000..4094f93b
--- /dev/null
+++ b/.changeset/puny-games-bow.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-seo': patch
+---
+
+Add the first SEO devtools plugin release with React support, live SERP and social previews, JSON-LD inspection, heading and link analysis, and an overview score. The plugin now ignores devtools-owned DOM, refreshes key sections on route changes, and uses a more balanced overall health weighting.
diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html
index b63b73f6..e91aa16b 100644
--- a/examples/react/basic/index.html
+++ b/examples/react/basic/index.html
@@ -33,11 +33,23 @@
content="A basic example of using TanStack Devtools with React."
/>
+
+
+
A basic example of using TanStack Devtools with React.
+
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
index a2839d99..d2d3b877 100644
--- a/examples/react/basic/src/setup.tsx
+++ b/examples/react/basic/src/setup.tsx
@@ -1,6 +1,4 @@
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-
+import { TanStackDevtools } from '@tanstack/react-devtools'
import {
Link,
Outlet,
@@ -9,7 +7,8 @@ import {
createRoute,
createRouter,
} from '@tanstack/react-router'
-import { TanStackDevtools } from '@tanstack/react-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { PackageJsonPanel } from './package-json-panel'
const rootRoute = createRootRoute({
@@ -28,6 +27,7 @@ const rootRoute = createRootRoute({
),
})
+
const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
@@ -39,6 +39,7 @@ const indexRoute = createRoute({
)
},
})
+
function About() {
return (
@@ -46,15 +47,18 @@ function About() {
)
}
+
const aboutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/about',
component: About,
})
+
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
const router = createRouter({
routeTree,
})
+
export default function DevtoolsExample() {
return (
<>
@@ -79,11 +83,6 @@ export default function DevtoolsExample() {
name: 'Package.json',
render: () => ,
},
-
- /* {
- name: "The actual app",
- render: ,
- } */
]}
/>
diff --git a/examples/react/seo/index.html b/examples/react/seo/index.html
new file mode 100644
index 00000000..ebe85132
--- /dev/null
+++ b/examples/react/seo/index.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+ SEO Devtools Example - TanStack Devtools
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/react/seo/package.json b/examples/react/seo/package.json
new file mode 100644
index 00000000..96651397
--- /dev/null
+++ b/examples/react/seo/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@tanstack/react-devtools-seo-example",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port=3006",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test:types": "tsc"
+ },
+ "dependencies": {
+ "@tanstack/devtools-seo": "workspace:^",
+ "@tanstack/react-devtools": "^0.10.2",
+ "@tanstack/react-router": "^1.132.0",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0"
+ },
+ "devDependencies": {
+ "@tanstack/devtools-vite": "0.6.0",
+ "@types/react": "^19.2.0",
+ "@types/react-dom": "^19.2.0",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "^8.0.0"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
diff --git a/examples/react/seo/public/emblem-light.svg b/examples/react/seo/public/emblem-light.svg
new file mode 100644
index 00000000..a58e69ad
--- /dev/null
+++ b/examples/react/seo/public/emblem-light.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/examples/react/seo/src/App.tsx b/examples/react/seo/src/App.tsx
new file mode 100644
index 00000000..489488c3
--- /dev/null
+++ b/examples/react/seo/src/App.tsx
@@ -0,0 +1,56 @@
+import {
+ Link,
+ Outlet,
+ RouterProvider,
+ createRootRoute,
+ createRoute,
+ createRouter,
+} from '@tanstack/react-router'
+
+function AppShell() {
+ return (
+
+
+
+
+ )
+}
+
+const rootRoute = createRootRoute({
+ component: AppShell,
+})
+
+const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: () => {
+ return Home
+ },
+})
+
+const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ component: () => {
+ return About
+ },
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({
+ routeTree,
+})
+
+export default function App() {
+ return
+}
diff --git a/examples/react/seo/src/index.tsx b/examples/react/seo/src/index.tsx
new file mode 100644
index 00000000..dbaab1ae
--- /dev/null
+++ b/examples/react/seo/src/index.tsx
@@ -0,0 +1,12 @@
+import { createRoot } from 'react-dom/client'
+import { seoDevtoolsPlugin } from '@tanstack/devtools-seo/react'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <>
+
+
+ ,
+)
diff --git a/examples/react/seo/tsconfig.json b/examples/react/seo/tsconfig.json
new file mode 100644
index 00000000..a97ff8c1
--- /dev/null
+++ b/examples/react/seo/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/react/seo/vite.config.ts b/examples/react/seo/vite.config.ts
new file mode 100644
index 00000000..337335d2
--- /dev/null
+++ b/examples/react/seo/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+
+export default defineConfig({
+ plugins: [devtools(), react()],
+})
diff --git a/package.json b/package.json
index b8089b81..883ea377 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,11 @@
"test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
"test:knip": "knip",
"test:lib": "nx affected --targets=test:lib --exclude=examples/**",
- "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
+ "test:lib:dev": "pnpm test:lib && node -e \"require('node:fs').rmSync('.nx/workspace-data/d/disabled',{force:true})\" && NX_DAEMON=true nx daemon --start && NX_DAEMON=true nx watch --all -- pnpm test:lib",
"test:pr": "nx affected --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
"test:sherif": "sherif",
"test:types": "nx affected --targets=test:types --exclude=examples/**",
- "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
+ "watch": "pnpm run build:all && node -e \"require('node:fs').rmSync('.nx/workspace-data/d/disabled',{force:true})\" && NX_DAEMON=true nx daemon --start && NX_DAEMON=true nx watch --all -- pnpm run build:all"
},
"nx": {
"includedScripts": [
diff --git a/packages/devtools-seo/package.json b/packages/devtools-seo/package.json
new file mode 100644
index 00000000..54c332d5
--- /dev/null
+++ b/packages/devtools-seo/package.json
@@ -0,0 +1,78 @@
+{
+ "name": "@tanstack/devtools-seo",
+ "version": "0.1.0",
+ "description": "SEO overview panel for TanStack Devtools",
+ "author": "TanStack",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/TanStack/devtools.git",
+ "directory": "packages/devtools-seo"
+ },
+ "homepage": "https://tanstack.com/devtools",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "devtools",
+ "seo",
+ "solid-js"
+ ],
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "module": "dist/esm/index.js",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ }
+ },
+ "./react": {
+ "import": {
+ "types": "./dist/esm/react/index.d.ts",
+ "default": "./dist/esm/react/index.js"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "engines": {
+ "node": ">=18"
+ },
+ "files": [
+ "dist/",
+ "src"
+ ],
+ "scripts": {
+ "clean": "premove ./build ./dist",
+ "lint:fix": "eslint ./src --fix",
+ "test:eslint": "eslint ./src",
+ "test:types": "tsc",
+ "test:build": "publint --strict",
+ "build": "vite build"
+ },
+ "dependencies": {
+ "@tanstack/devtools-ui": "workspace:*",
+ "@tanstack/devtools-utils": "workspace:*",
+ "goober": "^2.1.16",
+ "solid-js": "^1.9.9"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "solid-js": ">=1.9.7"
+ },
+ "peerDependenciesMeta": {
+ "react": {
+ "optional": true
+ }
+ },
+ "devDependencies": {
+ "@tanstack/vite-config": "0.4.3",
+ "@types/react": "^19.2.0",
+ "react": "^19.2.0",
+ "vite": "^8.0.0",
+ "vite-plugin-solid": "^2.11.11"
+ }
+}
diff --git a/packages/devtools-seo/src/core.tsx b/packages/devtools-seo/src/core.tsx
new file mode 100644
index 00000000..340159c1
--- /dev/null
+++ b/packages/devtools-seo/src/core.tsx
@@ -0,0 +1,7 @@
+/** @jsxImportSource solid-js */
+
+import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+
+const [SeoDevtoolsCore] = constructCoreClass(() => import('./solid-panel'))
+
+export { SeoDevtoolsCore }
diff --git a/packages/devtools/src/hooks/use-head-changes.ts b/packages/devtools-seo/src/hooks/use-head-changes.ts
similarity index 100%
rename from packages/devtools/src/hooks/use-head-changes.ts
rename to packages/devtools-seo/src/hooks/use-head-changes.ts
diff --git a/packages/devtools-seo/src/hooks/use-location-changes.ts b/packages/devtools-seo/src/hooks/use-location-changes.ts
new file mode 100644
index 00000000..f5fd6540
--- /dev/null
+++ b/packages/devtools-seo/src/hooks/use-location-changes.ts
@@ -0,0 +1,76 @@
+import { onCleanup, onMount } from 'solid-js'
+
+const LOCATION_CHANGE_EVENT = 'tanstack-devtools:locationchange'
+
+type LocationChangeListener = () => void
+
+const listeners = new Set()
+
+let lastHref = ''
+let teardownLocationObservation: (() => void) | undefined
+
+function emitLocationChangeIfNeeded() {
+ const nextHref = window.location.href
+ if (nextHref === lastHref) return
+ lastHref = nextHref
+ listeners.forEach((listener) => listener())
+}
+
+function dispatchLocationChangeEvent() {
+ window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT))
+}
+
+function observeLocationChanges() {
+ if (teardownLocationObservation) return
+
+ lastHref = window.location.href
+
+ const originalPushState = window.history.pushState
+ const originalReplaceState = window.history.replaceState
+
+ const handleLocationSignal = () => {
+ emitLocationChangeIfNeeded()
+ }
+
+ function patchedPushState(...args: Parameters) {
+ originalPushState.apply(window.history, args)
+ dispatchLocationChangeEvent()
+ }
+
+ function patchedReplaceState(...args: Parameters) {
+ originalReplaceState.apply(window.history, args)
+ dispatchLocationChangeEvent()
+ }
+
+ window.history.pushState = patchedPushState
+ window.history.replaceState = patchedReplaceState
+
+ window.addEventListener('popstate', handleLocationSignal)
+ window.addEventListener('hashchange', handleLocationSignal)
+ window.addEventListener(LOCATION_CHANGE_EVENT, handleLocationSignal)
+
+ teardownLocationObservation = () => {
+ if (window.history.pushState === patchedPushState) {
+ window.history.pushState = originalPushState
+ }
+ if (window.history.replaceState === patchedReplaceState) {
+ window.history.replaceState = originalReplaceState
+ }
+ window.removeEventListener('popstate', handleLocationSignal)
+ window.removeEventListener('hashchange', handleLocationSignal)
+ window.removeEventListener(LOCATION_CHANGE_EVENT, handleLocationSignal)
+ teardownLocationObservation = undefined
+ }
+}
+
+export function useLocationChanges(onChange: () => void) {
+ onMount(() => {
+ observeLocationChanges()
+ listeners.add(onChange)
+
+ onCleanup(() => {
+ listeners.delete(onChange)
+ if (listeners.size === 0) teardownLocationObservation?.()
+ })
+ })
+}
diff --git a/packages/devtools-seo/src/index.ts b/packages/devtools-seo/src/index.ts
new file mode 100644
index 00000000..c0f4286c
--- /dev/null
+++ b/packages/devtools-seo/src/index.ts
@@ -0,0 +1,6 @@
+export { SeoTab } from './tabs/seo-tab'
+export type {
+ SeoDetailView,
+ SeoIssue,
+ SeoSectionSummary,
+} from './utils/seo-section-summary'
diff --git a/packages/devtools-seo/src/react/SeoDevtools.tsx b/packages/devtools-seo/src/react/SeoDevtools.tsx
new file mode 100644
index 00000000..a34db45c
--- /dev/null
+++ b/packages/devtools-seo/src/react/SeoDevtools.tsx
@@ -0,0 +1,11 @@
+import { createReactPanel } from '@tanstack/devtools-utils/react'
+import { SeoDevtoolsCore } from '../core'
+
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
+
+export interface SeoDevtoolsReactInit extends DevtoolsPanelProps {}
+
+const [SeoDevtoolsPanel, SeoDevtoolsPanelNoOp] =
+ createReactPanel(SeoDevtoolsCore)
+
+export { SeoDevtoolsPanel, SeoDevtoolsPanelNoOp }
diff --git a/packages/devtools-seo/src/react/index.ts b/packages/devtools-seo/src/react/index.ts
new file mode 100644
index 00000000..2275c367
--- /dev/null
+++ b/packages/devtools-seo/src/react/index.ts
@@ -0,0 +1,9 @@
+'use client'
+
+export {
+ SeoDevtoolsPanel,
+ SeoDevtoolsPanelNoOp,
+ type SeoDevtoolsReactInit,
+} from './SeoDevtools'
+
+export { seoDevtoolsPlugin, seoDevtoolsNoOpPlugin } from './plugin'
diff --git a/packages/devtools-seo/src/react/plugin.ts b/packages/devtools-seo/src/react/plugin.ts
new file mode 100644
index 00000000..3b7985c4
--- /dev/null
+++ b/packages/devtools-seo/src/react/plugin.ts
@@ -0,0 +1,9 @@
+import { createReactPlugin } from '@tanstack/devtools-utils/react'
+import { SeoDevtoolsPanel } from './SeoDevtools'
+
+const [seoDevtoolsPlugin, seoDevtoolsNoOpPlugin] = createReactPlugin({
+ name: 'TanStack SEO',
+ Component: SeoDevtoolsPanel,
+})
+
+export { seoDevtoolsPlugin, seoDevtoolsNoOpPlugin }
diff --git a/packages/devtools-seo/src/solid-panel.tsx b/packages/devtools-seo/src/solid-panel.tsx
new file mode 100644
index 00000000..f037a73d
--- /dev/null
+++ b/packages/devtools-seo/src/solid-panel.tsx
@@ -0,0 +1,19 @@
+/** @jsxImportSource solid-js */
+
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { SeoTab } from './tabs/seo-tab'
+
+type SeoPluginPanelProps = {
+ theme: 'light' | 'dark'
+ devtoolsOpen: boolean
+}
+
+export default function SeoDevtoolsSolidPanel(props: SeoPluginPanelProps) {
+ void props.devtoolsOpen
+
+ return (
+
+
+
+ )
+}
diff --git a/packages/devtools-seo/src/tabs/heading-structure-preview.tsx b/packages/devtools-seo/src/tabs/heading-structure-preview.tsx
new file mode 100644
index 00000000..7fed0894
--- /dev/null
+++ b/packages/devtools-seo/src/tabs/heading-structure-preview.tsx
@@ -0,0 +1,267 @@
+import {
+ For,
+ Show,
+ createMemo,
+ createSignal,
+ onCleanup,
+ onMount,
+} from 'solid-js'
+import { Section, SectionDescription } from '@tanstack/devtools-ui'
+import { useSeoStyles } from '../utils/use-seo-styles'
+import { pickSeverityClass } from '../utils/seo-severity'
+import { isInsideDevtools } from '../utils/devtools-dom-filter'
+import { useLocationChanges } from '../hooks/use-location-changes'
+import type { SeoSeverity } from '../utils/seo-severity'
+import type { SeoSectionSummary } from '../utils/seo-section-summary'
+
+type HeadingItem = {
+ id: string
+ level: 1 | 2 | 3 | 4 | 5 | 6
+ tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+ text: string
+}
+
+type HeadingIssue = {
+ severity: SeoSeverity
+ message: string
+}
+
+function extractHeadings(): Array {
+ const nodes = Array.from(
+ document.body.querySelectorAll('h1,h2,h3,h4,h5,h6'),
+ ).filter((node) => !isInsideDevtools(node))
+
+ return nodes.map((node, index) => {
+ const tag = node.tagName.toLowerCase() as HeadingItem['tag']
+ const level = Number(tag[1]) as HeadingItem['level']
+
+ return {
+ id: node.id || `heading-${index}`,
+ level,
+ tag,
+ text: node.textContent.trim() || '',
+ }
+ })
+}
+
+function validateHeadings(headings: Array): Array {
+ if (headings.length === 0) {
+ return [
+ { severity: 'error', message: 'No heading tags found on this page.' },
+ ]
+ }
+
+ const issues: Array = []
+ const h1Count = headings.filter((h) => h.level === 1).length
+ if (h1Count === 0) {
+ issues.push({
+ severity: 'error',
+ message: 'No H1 heading found on this page.',
+ })
+ } else if (h1Count > 1) {
+ issues.push({
+ severity: 'error',
+ message: `Multiple H1 headings detected (${h1Count}).`,
+ })
+ }
+
+ if (headings[0] && headings[0].level !== 1) {
+ issues.push({
+ severity: 'error',
+ message: `First heading is ${headings[0].tag.toUpperCase()} instead of H1.`,
+ })
+ }
+
+ for (let index = 0; index < headings.length; index++) {
+ const current = headings[index]!
+ if (!current.text) {
+ issues.push({
+ severity: 'error',
+ message: `${current.tag.toUpperCase()} is empty.`,
+ })
+ }
+ if (index > 0) {
+ const previous = headings[index - 1]!
+ if (current.level - previous.level > 1) {
+ issues.push({
+ severity: 'error',
+ message: `Skipped heading level from ${previous.tag.toUpperCase()} to ${current.tag.toUpperCase()}.`,
+ })
+ }
+ }
+ }
+
+ return issues
+}
+
+/**
+ * Heading hierarchy issues and count for the SEO overview.
+ */
+export function getHeadingStructureSummary(): SeoSectionSummary {
+ const headings = extractHeadings()
+ const issues = validateHeadings(headings)
+ return {
+ issues,
+ hint: `${headings.length} heading(s)`,
+ }
+}
+
+function headingIndentClass(
+ s: ReturnType>,
+ level: HeadingItem['level'],
+): string {
+ switch (level) {
+ case 1:
+ return s.seoHeadingTreeIndent1
+ case 2:
+ return s.seoHeadingTreeIndent2
+ case 3:
+ return s.seoHeadingTreeIndent3
+ case 4:
+ return s.seoHeadingTreeIndent4
+ case 5:
+ return s.seoHeadingTreeIndent5
+ case 6:
+ return s.seoHeadingTreeIndent6
+ }
+}
+
+function headingTagClass(
+ s: ReturnType>,
+ level: HeadingItem['level'],
+): string {
+ const base = s.seoHeadingTag
+ switch (level) {
+ case 1:
+ return `${base} ${s.seoHeadingTagL1}`
+ case 2:
+ return `${base} ${s.seoHeadingTagL2}`
+ case 3:
+ return `${base} ${s.seoHeadingTagL3}`
+ case 4:
+ return `${base} ${s.seoHeadingTagL4}`
+ case 5:
+ return `${base} ${s.seoHeadingTagL5}`
+ case 6:
+ return `${base} ${s.seoHeadingTagL6}`
+ }
+}
+
+export function HeadingStructurePreviewSection() {
+ const styles = useSeoStyles()
+ const [tick, setTick] = createSignal(0)
+ const rescan = () => setTick((t) => t + 1)
+
+ useLocationChanges(rescan)
+
+ onMount(() => {
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ const target = mutation.target
+ if (target instanceof Element && isInsideDevtools(target)) continue
+ if (target.parentElement && isInsideDevtools(target.parentElement))
+ continue
+ rescan()
+ break
+ }
+ })
+
+ observer.observe(document.body, {
+ childList: true,
+ characterData: true,
+ subtree: true,
+ })
+
+ onCleanup(() => observer.disconnect())
+ })
+
+ const headings = createMemo(() => {
+ void tick()
+ return extractHeadings()
+ })
+
+ const issues = createMemo(() => validateHeadings(headings()))
+ const s = styles()
+
+ const issueBulletClass = (sev: SeoSeverity) =>
+ `${s.seoIssueBullet} ${pickSeverityClass(sev, {
+ error: s.seoIssueBulletError,
+ warning: s.seoIssueBulletWarning,
+ info: s.seoIssueBulletInfo,
+ })}`
+
+ const issueBadgeClass = (sev: SeoSeverity) =>
+ `${s.seoIssueSeverityBadge} ${pickSeverityClass(sev, {
+ error: s.seoIssueSeverityBadgeError,
+ warning: s.seoIssueSeverityBadgeWarning,
+ info: s.seoIssueSeverityBadgeInfo,
+ })}`
+
+ return (
+
+
+ Visualizes heading structure (`h1`-`h6`) in DOM order and highlights
+ common hierarchy issues. This section refreshes as the page changes.
+
+
+
+
+
0}
+ fallback={
+
+ No headings found on this page.
+
+ }
+ >
+
+
+ {(heading) => (
+ -
+
+ {heading.tag.toUpperCase()}
+
+
+ {heading.text || '(empty)'}
+
+
+ )}
+
+
+
+
+
Structure issues
+
+
+ {(issue) => (
+ -
+ ●
+ {issue.message}
+
+ {issue.severity}
+
+
+ )}
+
+
+
+
+
0}
+ fallback={
+
+
+ (no fields to preview)
+
+
+ }
+ >
+
+
+ {(row) => (
+
+ {row.label}
+ {row.value}
+
+ )}
+
+
+
+
+
+
+ {props.entry.parsed
+ ? JSON.stringify(props.entry.parsed, null, 2)
+ : props.entry.raw || 'No JSON-LD content found.'}
+
+ }
+ >
+
+
+ {(entity) => }
+
+
+
+ Raw JSON
+
+ {JSON.stringify(props.entry.parsed, null, 2)}
+
+
+
+
+
0}>
+
+
+ {(issue) => (
+ -
+ ●
+ {issue.message}
+ {issue.severity}
+
+ )}
+
+
+
+
+ ✓ No validation issues
+
+