Skip to content
Example Adobe XD plugin that uses the React-XD reconciler
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


React-XD Example

Work-In-Progress, not ready for production

An example plugin for Adobe XD that uses a custom React reconciler so you can declaratively write out the elements to render to an artboard.

Nowhere near feature complete and lib/react-xd.js will move to it's own repository soon.

What works

Right now you can style and place GraphicNodes onto a selected artboard.

Shapes are written in lowercase per React convention (so new Rectangle() becomes <rectangle />). Positioning shapes with x/y is always relative to their parent.

I haven't tested nesting, groups or anything other than GraphicNodes

Working with this example

First, install xdpm:

npm install -g @adobe/xdpm

Then clone the repository and install the dependencies with npm install or yarn.

In one terminal run npm run watch, and in another run xdpm watch. This will recompile your plugin every time you make a change in the src folder and sync it to the Adobe XD plugin folder.

Once in XD, reload your plugins and you can execute your plugin. Any errors will show up in the developer console of XD.

You can’t perform that action at this time.