Content Formatting

Overview

Skayle uses BlockNote as its editor, storing content in a structured JSON format. When publishing to external CMS platforms, this content is converted to the appropriate format for each platform.

BlockNote Format

Content in Skayle is stored as BlockNote JSON:

{
  "type": "doc",
  "content": [
    {
      "type": "heading",
      "attrs": { "level": 2 },
      "content": [{ "type": "text", "text": "Introduction" }]
    },
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "This is " },
        { "type": "text", "marks": [{ "type": "bold" }], "text": "bold" },
        { "type": "text", "text": " text." }
      ]
    }
  ]
}

Conversion by Platform

WordPress
Sanity

Output: HTMLWordPress accepts standard HTML for post content:

<h2>Introduction</h2>
<p>This is <strong>bold</strong> text.</p>

Special handling:

Gutenberg blocks can be generated optionally
Images use WordPress media library URLs
Internal links are converted to WordPress permalinks

Output: Portable TextSanity uses Portable Text, a JSON-based rich text format:

[
  {
    "_type": "block",
    "style": "h2",
    "children": [{ "_type": "span", "text": "Introduction" }]
  },
  {
    "_type": "block",
    "style": "normal",
    "children": [
      { "_type": "span", "text": "This is " },
      { "_type": "span", "text": "bold", "marks": ["strong"] },
      { "_type": "span", "text": " text." }
    ]
  }
]

Webflow
Contentful

Output: Minified HTMLWebflow requires minified HTML to prevent rendering issues:

<h2>Introduction</h2><p>This is <strong>bold</strong> text.</p>

Why minified? Webflow’s CMS editor interprets newlines as line breaks, causing display issues especially with lists.

Output: Rich Text JSONContentful uses its own Rich Text format:

{
  "nodeType": "document",
  "content": [
    {
      "nodeType": "heading-2",
      "content": [{ "nodeType": "text", "value": "Introduction" }]
    },
    {
      "nodeType": "paragraph",
      "content": [
        { "nodeType": "text", "value": "This is " },
        { "nodeType": "text", "value": "bold", "marks": [{ "type": "bold" }] },
        { "nodeType": "text", "value": " text." }
      ]
    }
  ]
}

Supported Elements

BlockNote Element	WordPress	Sanity	Webflow	Contentful
Paragraph	`<p>`	`block`	`<p>`	`paragraph`
Heading 1-6	`<h1>`-`<h6>`	`h1`-`h6` style	`<h1>`-`<h6>`	`heading-1`-`heading-6`
Bold	`<strong>`	`strong` mark	`<strong>`	`bold` mark
Italic	`<em>`	`em` mark	`<em>`	`italic` mark
Underline	`<u>`	`underline` mark	`<u>`	`underline` mark
Strikethrough	`<s>`	`strike-through` mark	`<s>`	-
Code	`<code>`	`code` mark	`<code>`	`code` mark
Link	`<a>`	`link` mark	`<a>`	`hyperlink`
Bullet List	`<ul><li>`	`bullet` listItem	`<ul><li>`	`unordered-list`
Numbered List	`<ol><li>`	`number` listItem	`<ol><li>`	`ordered-list`
Blockquote	`<blockquote>`	`blockquote` style	`<blockquote>`	`blockquote`
Code Block	`<pre><code>`	`code` block	`<pre><code>`	-
Image	`<img>`	`image` block	`<img>`	`embedded-asset-block`
Horizontal Rule	`<hr>`	-	`<hr>`	`hr`

Image Handling

Images are handled differently by each platform:

WordPress

Images uploaded to WordPress Media Library
URLs replaced with WordPress media URLs
Alt text and captions preserved

Sanity

Images uploaded to Sanity’s asset pipeline
Referenced using asset IDs
Supports hotspot and crop data

Webflow

External URLs used directly
Or uploaded to Webflow’s asset manager
Alt text included in image object

Contentful

Images uploaded as Contentful assets
Referenced using asset links
Must be published before use

Code Block Languages

Syntax highlighting is preserved where supported:

// BlockNote stores language in attrs
{
  "type": "codeBlock",
  "attrs": { "language": "typescript" },
  "content": [{ "type": "text", "text": "const x = 1;" }]
}

Best Practices

Preview before publishing: Use the preview feature to see how content renders
Test complex content: Tables, nested lists, and embeds may vary by platform
Use supported elements: Stick to common elements for best compatibility
Check image sizes: Large images may need optimization for some platforms

Get Started

Connectors

Connector Guides

Overview

BlockNote Format

Conversion by Platform

Supported Elements

Image Handling

Code Block Languages

Best Practices

Next Steps

Scheduled Publishing

Taxonomy Sync

Get Started

Connectors

Connector Guides

​Overview

​BlockNote Format

​Conversion by Platform

​Supported Elements

​Image Handling

​Code Block Languages

​Best Practices

​Next Steps

Scheduled Publishing

Taxonomy Sync

Overview

BlockNote Format

Conversion by Platform

Supported Elements

Image Handling

Code Block Languages

Best Practices

Next Steps