React-xd: write jsx to render to your scenegraph


#1

After the XD Plugin event I got inspired to see if I could write a react renderer for creating shapes in the scenegraph (think “react-native for XD”), and I got something working with basic GraphicNodes. It looks something like this:

const Shapes = () => (
  <>
    <RedRectangle width={100} height={100} />
    <BlueEllipse radiusX={100} radiusY={100} />
    <text fontSize={40} x={100} y={600} fill={new Color("#000")}>
      This is some text content
    </text>
  </>
);

function createRectangle(selection) {
  ReactXD.render(<Shapes />, selection.insertionParent);
}

The above renders a red rectangle, a blue ellipse and black text to the selected artboard. The props on the elements map to the attributes you can set on the GraphicNodes, with x and y being used with placeInParentCoordinates.

Why is this useful?
If you’re creating a large set of elements to render onto an artboard, using the regular api means you have a ton of code to write (and maintain). Instead of

const rectangle = new Rectangle();
rectangle.fill = new Color('red');
rectangle.width = 100;
rectangle.height = 1000;

scenegraph.insertionParent.add(rectangle);
rectangle.placeInParentCoordinates({x:10,y:10;};

You can just write:

const Rectangle = <rectangle color={new Color('red')} width={100} height={100} x={10} y={10} />
ReactXD.render(<Rectangle />, selection.insertionParent);

That saves a ton of code and it’s more readable, so if you’re working on something like the “Persona’s” plugin, which generates a ton of layers, then using React-XD will keep your code more maintainable.

Just a first version
This is just a first version. I haven’t checked support for more complex shapes or nested shapes (Paths should work fine, but groups might be more difficult) but I’ll continue working on it :slight_smile:

I made an example plugin so it’s easy to get started and try it out, you can get it here: https://github.com/Kilian/react-xd-example/

If you just want to use the React-XD library in your own document, it’s here: https://github.com/Kilian/react-xd-example/blob/master/lib/react-xd.js and I’ll move it to its own repository soon.


#2

Fantastic idea & execution! Thanks.


#3

Oh wow, you actually made it @Kilian :slight_smile:

I remember you mentioning this as an idea in Amsterdam last week.