portable-text-conversion

Konvertieren Sie HTML- und Markdown-Inhalte in Portable Text-Blöcke für Sanity. Verwenden Sie dies beim Migrieren von Inhalten aus Legacy-CMS, beim Importieren von HTML oder Markdown in Sanity,…

npx skills add https://github.com/sanity-io/agent-toolkit --skill portable-text-conversion

Portable Text Conversion

Convert external content (HTML, Markdown) into Portable Text for Sanity. Three main approaches:

  1. markdownToPortableText — Convert Markdown directly using @portabletext/markdown (recommended for Markdown)
  2. htmlToBlocks — Parse HTML into PT blocks using @portabletext/block-tools (for HTML migration)
  3. Manual construction — Build PT blocks directly from any source (APIs, databases, etc.)

Portable Text Specification

Understand the target format before converting. PT is an array of blocks:

[
  {
    "_type": "block",
    "_key": "abc123",
    "style": "normal",
    "children": [
      {"_type": "span", "_key": "def456", "text": "Hello ", "marks": []},
      {"_type": "span", "_key": "ghi789", "text": "world", "marks": ["strong"]}
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "jkl012",
    "style": "h2",
    "children": [
      {"_type": "span", "_key": "mno345", "text": "A heading", "marks": []}
    ],
    "markDefs": []
  },
  {
    "_type": "image",
    "_key": "pqr678",
    "asset": {"_type": "reference", "_ref": "image-abc-200x200-png"}
  }
]

Key rules:

  • Every block and span needs _key (unique within the array)
  • _type: "block" is for text blocks; custom types use their own _type
  • markDefs holds annotation data; marks on spans reference markDefs[*]._key or are decorator strings
  • Lists use listItem ("bullet" | "number") and level (1, 2, 3...) on regular blocks

Conversion Rules

Read the rule file matching your source format:

  • Markdown → Portable Text: rules/markdown-to-pt.md — @portabletext/markdown with markdownToPortableText (recommended)
  • HTML → Portable Text: rules/html-to-pt.md — @portabletext/block-tools with htmlToBlocks
  • Manual PT Construction: rules/manual-construction.md — build blocks programmatically from any source

Note: @sanity/block-tools is the legacy package name. Always use @portabletext/block-tools for new projects. The API is the same.

Mehr Skills von sanity-io

tdd
sanity-io
Testgetriebene Entwicklung mit dem Rot-Grün-Refaktor-Zyklus. Verwenden, wenn der Benutzer Funktionen entwickeln oder Fehler mit TDD beheben möchte, "Rot-Grün-Refaktor" erwähnt, möchte…
performance-optimization
sanity-io
Optimiert die Anwendungsleistung. Verwenden Sie, wenn Leistungsanforderungen bestehen, wenn Sie Leistungsrückgänge vermuten oder wenn Core Web Vitals oder Ladezeiten…
content-experimentation-best-practices
sanity-io
Strukturierte Anleitung für die Konzeption, Durchführung und Analyse von Content-Experimenten zur Verbesserung von Conversion und Engagement. Behandelt Hypothesen-Frameworks, Metrikauswahl, Stichprobengrößenberechnung und statistische Signifikanztests bei A/B- und multivariaten Experimenten. Enthält detaillierte Ressourcen zu p-Werten, Konfidenzintervallen, Power-Analyse und Bayes'schen Methoden zur Ergebnisinterpretation. Bietet CMS-Integrationsmuster für die Verwaltung von Varianten auf Feldebene und die Anbindung externer...
content-modeling-best-practices
sanity-io
Strukturierte Content-Modellierungsanleitung für Schema-Design, Wiederverwendbarkeit und Multi-Channel-Auslieferung. Behandelt Kernprinzipien: Behandlung von Inhalten als Daten statt als Seiten, Aufrechterhaltung einzelner Quellen der Wahrheit, Design für zukünftige Kanäle und Optimierung für Redaktionsworkflows. Enthält Entscheidungsrahmen für Referenzen versus eingebettete Objekte, Trennung von Belangen und Content-Wiederverwendungsmuster. Bietet Taxonomie- und Klassifikationsanleitung für flache, hierarchische und facettierte Ansätze. Gilt für...
portable-text-serialization
sanity-io
Portable Text in React, Svelte, Vue, Astro, HTML, Markdown und Klartext rendern und serialisieren. Verwenden Sie dies bei der Implementierung von Portable Text Rendering in einem beliebigen Frontend…
sanity-best-practices
sanity-io
Umfassende Best Practices und Integrationsleitfäden für die Sanity CMS-Entwicklung über Frameworks und Themen hinweg. Behandelt über 10 Framework-Integrationen, darunter Next.js, Nuxt, Astro, Remix, SvelteKit und Angular mit frameworkspezifischen Mustern und Einrichtungsanleitungen. Enthält Themenleitfäden für Schema-Design, GROQ-Abfrageoptimierung, Visual Editing, Portable Text, Bilder, TypeGen, Lokalisierung und Content-Migrationen. Bietet eine Kurzreferenzstruktur zum Laden nur relevanter Leitfäden basierend auf dem Aufgabentyp,...
sanity-migration
sanity-io
Plant, implementiert und überprüft Migrationen von anderen CMS- und Contentsystemen nach Sanity. Verwenden bei Migration oder Replatforming zu Sanity von AEM, Adobe Experience Manager, Contentful, Strapi, Webflow, WordPress, Payload, Drupal, Markdown/MDX/Frontmatter-Dateien, WXR/XML-Exporten, CMS-APIs, Datenbank-Dumps, statischem HTML oder beim Entwerfen von Extraktions-, Transformations-, Portable-Text-Konvertierungs-, Asset-Migrations-, Redirect-, Validierungs- und Cutover-Workflows.
data-analysisdatabasedevelopment
seo-aeo-best-practices
sanity-io
Umfassende SEO- und AEO-Optimierungsanleitung, die Metadaten, strukturierte Daten, EEAT und KI-Bereitschaft abdeckt. Behandelt sowohl traditionelle Suchmaschinenoptimierung (SEO) als auch KI-Antwortmaschinenoptimierung (AEO) für Google, ChatGPT, Perplexity und ähnliche Plattformen. Enthält technische SEO-Grundlagen: Metadaten, Open-Graph-Tags, Sitemaps, robots.txt, hreflang und internationale SEO-Konfiguration. Bietet JSON-LD-Strukturdatenmuster für Artikel-, FAQ-, Breadcrumb- und Produkt-Schemas. Implementiert...