Edit in GitHubLog an issue

Available APIs

Adobe XD provides several categories of APIs:

  • APIs for interacting with XD itself, especially its document model, the scenegraph

  • The UXP runtime, which provides all the capabilities that aren't XD-specific:

    • A browser-like HTML and CSS engine which drives actual XD native UI components -- it is not a complete browser engine, but lets you build your UI using familiar web APIs and frameworks.
    • Network APIs similar to the web standard XHR, fetch, and WebSocket found in browsers.
    • The storage API, offering sandboxed filesystem access.
  • The usual core JavaScript language APIs you see in all JS runtimes, such as setTimeout() and Date.

  • A simple module-loader require() API

Read below for how to access XD and UXP APIs...

XD-specific APIs#

Most XD APIs are accessed by loading a module via require(), but some are passed directly to your plugin's handler functions. See the XD specific APIs page for a full list of modules. Below are some examples of modules available via the API:

  • selection - Indicates the selected nodes and related context
    • This object is passed as an argument to your command handler function (see above)
  • scenegraph - APIs available on document nodes
    • Typically you use scenegraph objects by simply accessing the arguments passed to your command's handler function (selection and documentRoot).
    • To create new nodes in the document, load this module explicitly to access the constructor functions:
      Copied to your clipboard
      1let Rectangle = require("scenegraph").Rectangle;
      2let node = new Rectangle();
  • commands - Invoke commands to change the document structure and perform other complex operations.
    • let commands = require("commands");
  • interactions - Data model for interactive prototyping features (also accessible from scenegraph nodes).
    • let interactions = require("interactions");
  • application - APIs for exporting content, initiating edits from panel UI, and getting version / locale info.
    • let application = require("application");
  • clipboard - Copy text to the clipboard.
    • let clipboard = require("clipboard");

UXP#

  • HTML DOM APIs -- access just as in a browser, via the global document. Each plugin in XD gets its own document tree.

  • Network APIs -- access just as in a browser, via the global classes XMLHttpRequest and WebSocket, and the global function fetch()

  • Storage APIs -- access via const fs = require("uxp").storage.localFileSystem;

Was this helpful?
Copyright © 2021 Adobe. All rights reserved.