GUI Editor - export UI design as Javascript file

(copied from question here )

Hello all, Ive been using the Babylon online GUI editor and it is great, but was wondering if there is anyway to get a javascript document of what you create there, rather then a JSON that need to be parsed? I’m thinking something similar to how the Node Material Editor works - just so I can create things more dynamically and swap out certain values.

In addition to the nested json object that you currently get exported, that looks something like this:

{
  "root": {
    "tags": null,
    "renderToIntermediateTexture": false,
    "maxLayoutCycle": 3,
    "adaptHeightToChildren": false,
    "adaptWidthToChildren": false,
    "background": "",
    "metadata": {
      "_previousCenter": {
        "x": 1,
        "y": 1
      }
    },
    "isHitTestVisible": true,
... etc etc

I would like something that is closer to the code you would use to create the GUI elements in Javascript, ie:

  const textGUI = new TextBlock(name, text);

  textGUI.color = 'white';
  textGUI.fontSize = 24;
  textGUI.textVerticalAlignment = 1;
  textGUI.textHorizontalAlignment = 1;
  textGUI.textWrapping = true;
  textGUI.paddingRight = 20;
  textGUI.paddingBottom = 20;
  textGUI.isPointerBlocker = false;
  textGUI.isHitTestVisible = false;

So, this is similar to how the node material editor can export both a json file (when clicking ‘Save’) and a javascript file where every node block is imported from the library as an object and then connected, and wrapped as a function that returns the material (when clicking ‘Get Code’).

It would be great to have a similar approach in the GUI editor where I have a series of GUI elements declared and parented, as they have been organised in the online editor, and then returning a container that has this GUI element hierarchy attached, but could be extracted into functions with parameters that would make it more reusable.

1 Like

cc @carolhmj

1 Like

GUI Editor Code Export · Issue #14317 · BabylonJS/Babylon.js (github.com) issue created so it can be prioritized

1 Like