Export .df Runtime Files

Overview

Use the EditorCore .df export API to produce:

• validated DfDocument JSON structure
• packed binary bytes (Uint8Array)
• downloadable Blob (application/x-designful-df)

For an end-to-end UI flow (editor export -> runtime playback), use the standalone docs demo at:

• /docs/api/managers/df-export (DfExportPlaybackDemo)

API

const documentResult = editor.exportAsDfDocument({
  mode: 'warn',
  embedFonts: true,
  fontSources: [
    {
      family: 'Inter',
      weight: 600,
      style: 'normal',
      src: 'data:font/woff2;base64,...',
    },
  ],
  fontSubsetter: ({ source, text }) => subsetToWoff2DataUrl(source, text),
  embedImages: true,
  stripEditorMetadata: true,
})

const binaryResult = editor.exportAsDfBinary({
  mode: 'warn',
  embedFonts: true,
  fontSources: [
    {
      family: 'Inter',
      weight: 600,
      style: 'normal',
      src: 'data:font/woff2;base64,...',
    },
  ],
  fontSubsetter: ({ source, text }) => subsetToWoff2DataUrl(source, text),
  embedImages: true,
  minifyJsonSections: true,
})

const blob = editor.exportAsDfBlob({
  mode: 'warn',
  embedFonts: true,
  fontSources: [
    {
      family: 'Inter',
      src: 'data:font/woff2;base64,...',
    },
  ],
  fontSubsetter: ({ source, text }) => subsetToWoff2DataUrl(source, text),
  embedImages: true,
})

What Gets Exported

• Objects from editor.getAllObjects()
• Animation data from editor.getAnimationData()
• Manifest metadata (generator, sourceAppVersion, version) when provided

Diagnostics

mode: 'warn' returns diagnostics and continues export.

mode: 'strict' throws when export errors are present.

Typical diagnostics include unsupported track properties, missing references, invalid keyframe values, and runtime-unsupported visuals (for example image filters or background blur). Unknown object types are also reported explicitly as OBJECT_TYPE_UNSUPPORTED_PLACEHOLDER instead of being grouped under HTML warnings.

In the demo UI, diagnostics are shown immediately after each export so unsupported features are not silent.

When embedFonts: true is enabled:

• data-URL WOFF2 font sources are embedded into .df binary buffers and rewritten to bufferId
• fontSources controls which URLs/data-URLs are attached to exported font assets
• fontSubsetter can generate a per-font subset source from used text glyphs before embedding
• exporter reports FONT_EMBED_UNAVAILABLE if a font has no embeddable source/buffer
• exporter reports FONT_EMBED_WOFF2_REQUIRED when a font data URL is not WOFF2
• exporter reports FONT_SUBSET_UNAVAILABLE if fontSubsetter does not return a usable source

When embedImages: true is enabled:

• image assets with data-URL src are embedded into .df binary buffers section
• runtime image assets are rewritten to bufferId references for portable/offline playback
• non-data-URL sources keep URL mode and report IMAGE_EMBED_UNAVAILABLE

When stripEditorMetadata: true is enabled:

• object names are removed from scene.objects
• manifest authoring metadata (generatedAt, sourceAppVersion) is removed

When minifyJsonSections: false is enabled:

• .df JSON sections are encoded in stable pretty JSON for inspection/debugging
• default remains compact minified JSON for smaller payload size

Notes

• HTML objects are exported as placeholder shapes with a warning.
• Image filters and background blur are currently stripped for runtime playback.
• Boolean-operation result shapes must be baked to runtime pathData; strict mode throws BOOLEAN_OPERATION_UNBAKED when missing.
• Use mode: 'strict' when you want unsupported runtime features to fail export immediately.
• Text nodes require matching font assets in .df; exporter collects and writes used font families automatically.
• Exported binary can be validated/loaded with runtime packages (@designful/df-format, @designful/df-runtime-core).
• .df version policy at load: major mismatch hard-fails; same-major minor/patch versions are accepted, and migrate can backfill runtime defaults when needed.