How can I programmatically set the position of an existing element?


I have made good progress with using the library to create a graphical representation of an object graph, and I allow users to move shapes around and then save those to my back end.

Users can now also move the startEvent - to which I’m attaching other nodes. While I can capture the move of the start event and save its position, when I try to re-render the diagram, I set the x and y on the start event, but it doesn’t move (though connections from it do move to the new position).

I’m doing this:

const bpmnFactory = modeler.get('bpmnFactory'),
	elementFactory = modeler.get('elementFactory'),
	elementRegistry = modeler.get('elementRegistry'),
	modeling = modeler.get('modeling');

const process = elementRegistry.get('Process');
const startEvent = elementRegistry.get('StartEvent');

if (script.startHasPosition) {
	startEvent.x = script.startLeft;
	startEvent.y = script.startTop;

What’s the trick to making this work?


You can have a look at the modeling.moveElements API to move elements around.

Great, thanks Niklas.

So, I now have this working (in case others encounter this):

if (script.startHasPosition) {
	modeling.moveElements([startEvent], {
		x: script.startLeft - startEvent.x,
		y: script.startTop - startEvent.y,


1 Like