Export to IDML - SvelteKit

Export your design as an IDML document with its available fonts for continued editing in Adobe InDesign.

7 mins

estimated time

The independently released @imgly/idml-exporter package exports every page of the current scene. An IDML document references fonts rather than embedding them. exportIdmlPackage() adds the available fonts in an adjacent Document fonts folder and returns the handoff as a ZIP.

import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
import {
  BlurAssetSource,
  ImageColorsAssetSource,
  ColorPaletteAssetSource,
  CropPresetsAssetSource,
  DemoAssetSources,
  EffectsAssetSource,
  FiltersAssetSource,
  PagePresetsAssetSource,
  StickerAssetSource,
  TextAssetSource,
  TextComponentAssetSource,
  TypefaceAssetSource,
  UploadAssetSources,
  VectorShapeAssetSource
} from '@cesdk/cesdk-js/plugins';
import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor';
import packageJson from './package.json';

import { exportIdmlPackage } from '@imgly/idml-exporter';

class Example implements EditorPlugin {
  name = packageJson.name;

  version = packageJson.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (!cesdk) {
      throw new Error('CE.SDK instance is required for this plugin');
    }

    await cesdk.addPlugin(new DesignEditorConfig());
    await cesdk.addPlugin(new BlurAssetSource());
    await cesdk.addPlugin(new ImageColorsAssetSource());
    await cesdk.addPlugin(new ColorPaletteAssetSource());
    await cesdk.addPlugin(new CropPresetsAssetSource());
    await cesdk.addPlugin(
      new UploadAssetSources({ include: ['ly.img.image.upload'] })
    );
    await cesdk.addPlugin(
      new DemoAssetSources({
        include: [
          'ly.img.templates.blank.*',
          'ly.img.templates.presentation.*',
          'ly.img.templates.print.*',
          'ly.img.templates.social.*',
          'ly.img.image.*'
        ]
      })
    );
    await cesdk.addPlugin(new EffectsAssetSource());
    await cesdk.addPlugin(new FiltersAssetSource());
    await cesdk.addPlugin(new PagePresetsAssetSource());
    await cesdk.addPlugin(new StickerAssetSource());
    await cesdk.addPlugin(new TextAssetSource());
    await cesdk.addPlugin(new TextComponentAssetSource());
    await cesdk.addPlugin(new TypefaceAssetSource());
    await cesdk.addPlugin(new VectorShapeAssetSource());

    const engine = cesdk.engine;
    await engine.scene.loadFromArchiveURL(
      new URL('./assets/strategy-quote.imgly', import.meta.url).href,
      false,
      true
    );
    const page = engine.scene.getCurrentPage();
    if (page === null) throw new Error('The design has no page');
    await engine.scene.zoomToBlock(page, { padding: 40 });

    cesdk.ui.registerComponent(
      'ly.img.idml-export.navigationBar',
      ({ builder, state }) => {
        const exporting = state('exporting', false);

        builder.Button('download-idml-package', {
          label: 'Download IDML package',
          color: 'accent',
          variant: 'regular',
          isLoading: exporting.value,
          isDisabled: exporting.value,
          onClick: async () => {
            if (exporting.value) return;
            exporting.setValue(true);
            try {
              const { zip, logger, skippedFonts } = await exportIdmlPackage(
                engine,
                { name: 'design' }
              );

              const messages = logger.getMessages();
              const needsReview =
                skippedFonts.length > 0 ||
                messages.some((message) => message.type !== 'info');
              if (needsReview) {
                console.warn('IDML export needs review:', {
                  messages,
                  skippedFonts
                });
              }

              downloadFile(
                new Blob([zip.slice().buffer], { type: 'application/zip' }),
                'design-idml.zip'
              );

              cesdk.ui.showNotification({
                type: needsReview ? 'warning' : 'success',
                message: needsReview
                  ? 'Download ready. Some content or fonts need review. Check the document in InDesign.'
                  : 'Download ready. Unzip the package and keep the fonts beside the document.',
                duration: needsReview ? 'infinite' : 'medium'
              });
            } catch (error) {
              console.error('IDML export failed:', error);
              cesdk.ui.showNotification({
                type: 'error',
                message: 'The design could not be exported. Please try again.'
              });
            } finally {
              exporting.setValue(false);
            }
          }
        });
      }
    );
    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
      'ly.img.undoRedo.navigationBar',
      'ly.img.spacer',
      'ly.img.zoom.navigationBar',
      'ly.img.idml-export.navigationBar'
    ]);
  }
}

function downloadFile(blob: Blob, filename: string): void {
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement('a');
  anchor.href = url;
  anchor.download = filename;
  document.body.appendChild(anchor);
  anchor.click();
  anchor.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

export default Example;

This guide covers the editor download workflow, package export, font collection, and diagnostics.

Download a Package from the Editor#

Edit the sample design, then select Download IDML package. The button shows that export is running and becomes available again when the operation finishes. A notification indicates when content or fonts need review. Check the exported document in InDesign.

Unzip design-idml.zip, then open design/design.idml in InDesign. Keep the Document fonts folder beside the IDML file so InDesign can activate the packaged fonts. Include only fonts you are permitted to share.

Import the Exporter#

Install @imgly/idml-exporter alongside your CE.SDK installation. The exporter has its own release schedule and version number.

import { exportIdmlPackage } from '@imgly/idml-exporter';

Load a Design#

Load the scene and wait for its resources before exporting. The visible page is framed in the editor; the package includes all pages.

const engine = cesdk.engine;
await engine.scene.loadFromArchiveURL(
  new URL('./assets/strategy-quote.imgly', import.meta.url).href,
  false,
  true
);
const page = engine.scene.getCurrentPage();
if (page === null) throw new Error('The design has no page');
await engine.scene.zoomToBlock(page, { padding: 40 });

Export the Document and Fonts#

Call exportIdmlPackage() with the engine and a package name. The returned zip is a Uint8Array containing the IDML file and every font that could be collected and converted.

const { zip, logger, skippedFonts } = await exportIdmlPackage(
  engine,
  { name: 'design' }
);

With name: 'design', the ZIP contains design/design.idml and font files under design/Document fonts/. A standalone exportIdml(engine) call returns { idml, logger } without collecting the adjacent fonts. Prefer the package API when handing a document to someone else.

Review Export Diagnostics#

Inspect both the export messages and skippedFonts. Messages describe conversions, unsupported features, and raster fallbacks. skippedFonts lists font URIs that could not be fetched or converted; those fonts need to be supplied separately or replaced.

const messages = logger.getMessages();
const needsReview =
  skippedFonts.length > 0 ||
  messages.some((message) => message.type !== 'info');
if (needsReview) {
  console.warn('IDML export needs review:', {
    messages,
    skippedFonts
  });
}

Download the ZIP#

Wrap the ZIP bytes in a browser Blob and start a file download.

downloadFile(
  new Blob([zip.slice().buffer], { type: 'application/zip' }),
  'design-idml.zip'
);

Connect the Download Button#

Register the download button in the editor navigation bar. Builder state updates the loading indicator and prevents another export while one runs. Warnings and errors appear as notifications.

cesdk.ui.registerComponent(
  'ly.img.idml-export.navigationBar',
  ({ builder, state }) => {
    const exporting = state('exporting', false);

    builder.Button('download-idml-package', {
      label: 'Download IDML package',
      color: 'accent',
      variant: 'regular',
      isLoading: exporting.value,
      isDisabled: exporting.value,
      onClick: async () => {
        if (exporting.value) return;
        exporting.setValue(true);
        try {
          const { zip, logger, skippedFonts } = await exportIdmlPackage(
            engine,
            { name: 'design' }
          );

          const messages = logger.getMessages();
          const needsReview =
            skippedFonts.length > 0 ||
            messages.some((message) => message.type !== 'info');
          if (needsReview) {
            console.warn('IDML export needs review:', {
              messages,
              skippedFonts
            });
          }

          downloadFile(
            new Blob([zip.slice().buffer], { type: 'application/zip' }),
            'design-idml.zip'
          );

          cesdk.ui.showNotification({
            type: needsReview ? 'warning' : 'success',
            message: needsReview
              ? 'Download ready. Some content or fonts need review. Check the document in InDesign.'
              : 'Download ready. Unzip the package and keep the fonts beside the document.',
            duration: needsReview ? 'infinite' : 'medium'
          });
        } catch (error) {
          console.error('IDML export failed:', error);
          cesdk.ui.showNotification({
            type: 'error',
            message: 'The design could not be exported. Please try again.'
          });
        } finally {
          exporting.setValue(false);
        }
      }
    });
  }
);
cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
  'ly.img.undoRedo.navigationBar',
  'ly.img.spacer',
  'ly.img.zoom.navigationBar',
  'ly.img.idml-export.navigationBar'
]);

Editability and Runtime Compatibility#

Supported text, shapes, images, and groups remain editable. When IDML cannot represent a paint or text feature, such as an unsupported effect or curved text, the exporter may preserve its appearance as an image. Line shapes currently preserve their native appearance as images. Rasterized content loses that editability; review the exported document before delivery.

The exporter accepts CE.SDK engine versions from 1.83.0. That minimum describes API compatibility. Font availability, text layout, and raster fallbacks also depend on the installed CE.SDK runtime. Updating the JavaScript exporter does not update the engine or supply fixes from a later SDK release. Check the exported document in the receiving application; CE.SDK and InDesign can render the same editable content differently.

Troubleshooting#

Fonts are missing or substituted — Review skippedFonts, verify the browser can fetch the font resources, and keep the collected Document fonts folder beside the IDML file. Standalone IDML files do not include that folder.

Text or an effect is an image — Review the export messages for a raster fallback. Use a supported editable style if editability is required.

An image or font cannot be read — Check its URL and cross-origin access settings. Export needs access to the source resources.

The document looks different in InDesign — Compare the loaded fonts and text layout, then inspect the export diagnostics in the browser console. Verify the installed CE.SDK runtime as well as the exporter version.

API Reference#

Method / Result	Description
`exportIdmlPackage(engine, { name }?)`	Export all pages and available fonts as a ZIP
`exportIdml(engine)`	Export all pages as standalone IDML bytes
`logger.getMessages()`	Read messages with `type`, `code`, `message`, and optional `meta`
`skippedFonts`	Font URIs that could not be fetched or converted
`engine.scene.loadFromArchiveURL(source, false, true)`	Load a design and wait for its resources
`engine.scene.zoomToBlock(page, options)`	Frame a page in the editor
`cesdk.ui.registerComponent(id, render)`	Register download controls
`cesdk.ui.setComponentOrder(context, order)`	Position the controls in the navigation bar
`cesdk.ui.showNotification(notification)`	Report completion or failure