Asset Content JSON Schema

Asset content JSON files define the structure and metadata for assets that CE.SDK loads into asset sources. This schema supports images, videos, audio, fonts, templates, colors, shapes, and effects.

Manifest Structure#

Every content.json file requires three top-level fields:

{
  "version": "2.0.0",
  "id": "my.custom.source",
  "assets": []
}

Asset Definition#

Each asset in the assets array follows this structure:

Localization#

Labels and tags use locale codes as keys (e.g., "en", "de", "fr"). CE.SDK selects the appropriate translation based on the user’s locale.

{
  "id": "mountain-photo",
  "label": {
    "en": "Mountain Landscape",
    "de": "Berglandschaft"
  },
  "tags": {
    "en": ["nature", "mountain"],
    "de": ["natur", "berg"]
  },
  "groups": ["landscapes", "nature"]
}

Asset Metadata#

The meta object contains content-specific information for loading and applying assets.

Content Properties#

Define URIs and file information for loading the asset content. The uri property points to the main asset file, while thumbUri and previewUri provide optimized versions for UI display.

{
  "meta": {
    "uri": "{{base_url}}/images/photo.jpg",
    "thumbUri": "{{base_url}}/thumbnails/photo-thumb.jpg",
    "previewUri": "{{base_url}}/previews/photo-preview.jpg",
    "filename": "photo.jpg",
    "mimeType": "image/jpeg"
  }
}

Dimension Properties#

Specify the pixel dimensions of the asset. CE.SDK uses these values for layout calculations and aspect ratio preservation when inserting assets into a design.

{
  "meta": {
    "width": 1920,
    "height": 1280
  }
}

Block Creation Properties#

Control what design block CE.SDK creates when the asset is applied. These properties determine how the asset integrates into the design structure.

{
  "meta": {
    "blockType": "//ly.img.ubq/graphic",
    "fillType": "//ly.img.ubq/fill/image",
    "shapeType": "//ly.img.ubq/shape/rect",
    "kind": "image"
  }
}

Block Type Values:

Fill Type Values:

Shape Type Values:

Media Properties#

Configure playback behavior for time-based media like video and audio. Use duration to specify length and looping to enable repeat playback for background music or ambient video.

{
  "meta": {
    "duration": "30",
    "looping": true,
    "vectorPath": "M10 10 L90 90"
  }
}

Effect Properties#

Define visual effects that can be applied to design blocks. Effects include filters, blurs, and color adjustments.

{
  "meta": {
    "effectType": "//ly.img.ubq/effect/lut_filter",
    "blurType": "//ly.img.ubq/blur/uniform"
  }
}

Responsive Sources#

The sourceSet property defines multiple resolutions for responsive loading. This enables CE.SDK to load an appropriately sized image based on the display context, reducing bandwidth for thumbnails while providing full resolution when needed.

{
  "meta": {
    "sourceSet": [
      { "uri": "{{base_url}}/small.jpg", "width": 640, "height": 480 },
      { "uri": "{{base_url}}/medium.jpg", "width": 1280, "height": 960 },
      { "uri": "{{base_url}}/large.jpg", "width": 1920, "height": 1440 }
    ]
  }
}

When a user browses assets in the library panel, CE.SDK loads the smallest appropriate resolution. When the asset is added to the canvas and zoomed in, higher resolutions are loaded on demand. This pattern significantly improves initial load times for asset libraries with many items.

Asset Payload#

The payload object contains structured data for specialized asset types like colors, fonts, and presets.

Color Payload#

Colors support three color spaces: sRGB, CMYK, and Spot Color. Use sRGB for screen-based designs, CMYK for print workflows, and Spot Color for brand-specific colors that require exact color matching.

sRGB Color:

{
  "payload": {
    "color": {
      "colorSpace": "sRGB",
      "r": 0.2,
      "g": 0.4,
      "b": 0.8
    }
  }
}

sRGB is the standard color space for web and digital displays. Component values range from 0 to 1, where { r: 1, g: 0, b: 0 } represents pure red.

CMYK Color:

{
  "payload": {
    "color": {
      "colorSpace": "CMYK",
      "c": 0.75,
      "m": 0.25,
      "y": 0.0,
      "k": 0.1
    }
  }
}

CMYK is used for print production. Component values represent ink percentages from 0 to 1, where higher values mean more ink coverage.

Spot Color:

{
  "payload": {
    "color": {
      "colorSpace": "SpotColor",
      "name": "Pantone 286 C",
      "externalReference": "pantone://286-c",
      "representation": {
        "colorSpace": "sRGB",
        "r": 0.0,
        "g": 0.22,
        "b": 0.62
      }
    }
  }
}

Spot colors reference named colors from systems like Pantone. The representation provides a screen preview while the actual color is defined by the external reference for accurate print reproduction.

Typeface Payload#

Defines a font family with multiple font files for different weights and styles. This enables CE.SDK to load the correct font file when text formatting changes.

{
  "payload": {
    "typeface": {
      "name": "Roboto",
      "fonts": [
        {
          "uri": "{{base_url}}/Roboto-Regular.ttf",
          "subFamily": "Regular",
          "weight": "normal",
          "style": "normal"
        },
        {
          "uri": "{{base_url}}/Roboto-Bold.ttf",
          "subFamily": "Bold",
          "weight": "bold",
          "style": "normal"
        },
        {
          "uri": "{{base_url}}/Roboto-Italic.ttf",
          "subFamily": "Italic",
          "weight": "normal",
          "style": "italic"
        }
      ]
    }
  }
}

Each font entry in the fonts array represents a single font file. When a user applies bold formatting, CE.SDK automatically selects the font entry with weight: "bold". Include all weight and style combinations you want to support.

Typeface Properties:

Font Properties:

Font Weight Values: "thin", "extraLight", "light", "normal", "medium", "semiBold", "bold", "extraBold", "heavy"

Font Style Values: "normal", "italic"

Transform Preset Payload#

Defines page size or aspect ratio presets for templates, canvases, and crop tools. Use these to provide users with common format options like social media dimensions or print sizes.

Fixed Size:

{
  "payload": {
    "transformPreset": {
      "type": "FixedSize",
      "width": 1080,
      "height": 1920,
      "designUnit": "Pixel"
    }
  }
}

Fixed size presets lock both width and height to specific values. Use designUnit to specify whether dimensions are in pixels (for digital), millimeters, or inches (for print).

Fixed Aspect Ratio:

{
  "payload": {
    "transformPreset": {
      "type": "FixedAspectRatio",
      "width": 16,
      "height": 9
    }
  }
}

Fixed aspect ratio presets maintain proportions while allowing flexible sizing. The width and height values represent the ratio components, not pixel dimensions.

Free Aspect Ratio:

{
  "payload": {
    "transformPreset": {
      "type": "FreeAspectRatio"
    }
  }
}

Free aspect ratio presets allow unrestricted resizing without maintaining proportions.

Base URL Placeholder#

The {{base_url}} placeholder enables portable asset definitions. CE.SDK replaces this placeholder with the actual base path when loading:

• From URL: The parent directory of the JSON file becomes the base URL
• From string: You provide the base URL explicitly when loading

{
  "meta": {
    "uri": "{{base_url}}/images/photo.jpg",
    "thumbUri": "{{base_url}}/thumbnails/photo.jpg"
  }
}

Asset Type Examples#

Image Asset#

Standard image assets are the most common type, used for photos, illustrations, and background images. They require a blockType of graphic with an image fill.

{
  "id": "photo-001",
  "label": { "en": "Mountain Landscape" },
  "tags": { "en": ["nature", "mountain"] },
  "meta": {
    "uri": "{{base_url}}/mountain.jpg",
    "thumbUri": "{{base_url}}/mountain-thumb.jpg",
    "mimeType": "image/jpeg",
    "blockType": "//ly.img.ubq/graphic",
    "fillType": "//ly.img.ubq/fill/image",
    "width": 1920,
    "height": 1280
  }
}

Video Asset#

Video assets include duration information and use a video fill type. Set looping to true for videos that should repeat continuously.

{
  "id": "video-001",
  "label": { "en": "Intro Animation" },
  "meta": {
    "uri": "{{base_url}}/intro.mp4",
    "thumbUri": "{{base_url}}/intro-thumb.jpg",
    "mimeType": "video/mp4",
    "blockType": "//ly.img.ubq/graphic",
    "fillType": "//ly.img.ubq/fill/video",
    "width": 1920,
    "height": 1080,
    "duration": "5",
    "looping": false
  }
}

Audio Asset#

Audio assets use the audio block type and don’t require visual dimensions. Set looping to true for background music that should repeat continuously throughout the design.

{
  "id": "audio-001",
  "label": { "en": "Background Music" },
  "meta": {
    "uri": "{{base_url}}/music.mp3",
    "mimeType": "audio/mpeg",
    "blockType": "//ly.img.ubq/audio",
    "duration": "120",
    "looping": true
  }
}

Sticker Asset#

Stickers are vector graphics that maintain quality at any size. They use the vector_path shape type and typically reference SVG files.

{
  "id": "sticker-001",
  "label": { "en": "Star Badge" },
  "meta": {
    "uri": "{{base_url}}/star.svg",
    "thumbUri": "{{base_url}}/star-thumb.png",
    "mimeType": "image/svg+xml",
    "blockType": "//ly.img.ubq/graphic",
    "shapeType": "//ly.img.ubq/shape/vector_path",
    "width": 200,
    "height": 200
  }
}

Template Asset#

Templates are complete design scenes that can be loaded as starting points. Use kind: "template" to identify them in the UI.

{
  "id": "template-001",
  "label": { "en": "Social Media Story" },
  "meta": {
    "uri": "{{base_url}}/story-template.scene",
    "thumbUri": "{{base_url}}/story-thumb.jpg",
    "kind": "template",
    "width": 1080,
    "height": 1920
  }
}

Crop Preset Asset#

Crop presets define aspect ratios for the crop tool. Use transformPreset in the payload to specify the ratio without fixed pixel dimensions.

{
  "id": "crop-square",
  "label": { "en": "Square" },
  "groups": ["social"],
  "payload": {
    "transformPreset": {
      "type": "FixedAspectRatio",
      "width": 1,
      "height": 1
    }
  }
}

Page Format Preset Asset#

Page format presets define canvas sizes for new designs. Use FixedSize to specify exact dimensions in pixels, millimeters, or inches.

{
  "id": "format-instagram-story",
  "label": { "en": "Instagram Story" },
  "groups": ["social"],
  "meta": {
    "thumbUri": "{{base_url}}/instagram-story-thumb.jpg"
  },
  "payload": {
    "transformPreset": {
      "type": "FixedSize",
      "width": 1080,
      "height": 1920,
      "designUnit": "Pixel"
    }
  }
}

Troubleshooting#