Ergodox EZ Configurator Layer Manipulation

Ergodox EZ provides a great configurator; however, it doesn't provide all editing functions I need. Unfortunately, the source code disappeared from github (multiple unofficial documents have links to that repo so I assume the source was once available; this is rather disappointing, since the company made it look like that they are using all open source resources.)

One of the functions that I need the most is swapping the layers.

Here's what I did to achieve it:

Upon examining the minimized javascript, it was written against the React framework. Therefore, I installed the React debugger extension for chrome, in order to find and manipulate the variable that stores the layer information.

Once the extension is installed, reload the page, and open up the Developer Tools in Chrome.
Click on React to open the debugging panel.
Make sure the correct scope "App" is selected.
Now the variable $r will contain the React object, including the state, for editing.
The layers (including all key assignment) information is in the array: $r.state.layout.layers

Here's an example of swapping layer 3 and 4.


$r.state.layout.layers = [
$r.state.layout.layers[0],
$r.state.layout.layers[1],
$r.state.layout.layers[2],
$r.state.layout.layers[4],
$r.state.layout.layers[3],
$r.state.layout.layers[5],
$r.state.layout.layers[6],
$r.state.layout.layers[7],
]



Note that if there are layer switching keys, you'll also need to manually modify those from the GUI.

I also did some batch editing offline, and then re-assign the whole $r.state.layout.layers
by first converting the variable to JSON and write it to a local file, with this snippet.

Also when you copy/create a layer, make sure to use the GUI to first allocate the variable $r.state.layout.layers[x].keyboard_layout_id on their server and then carefully copy those values.

Here's my current setup, if you are interested.