How can I integrate SVG-EDIT with a JS application I am creating?

[1001QAdotNET]

Hi guys
I need to add some SVG overlay to an image, practically add rectangles over an image and then use this in the HTML page I am editing
I know that it is possible to call the SVG-EDIT page and pass the link to the image I am editing as argument via the URL like so index.html?"link to the image"
How can I get the results back into my application? Is there was to configure SVG-Edit to call back the parent application that opened the editor and passed the initial link to the picture ? My app is a browser side app

[1001QAdotNET]

After reading through documentation I think I need to use to add my code to sent the svg back to the parent window
However svgEditor.setCustomHandlers does not see to be a valid method anymore

svgEditor.setCustomHandlers({
save (_win, _data) {
// Save svg
}
})

[1001QAdotNET]

It seems that svgedit5 still has the ES6 version that can be used without Node.js and served from the same server (Flask in my case) as my app so I should be good using that version. svgedit5 still has the setCustomHandlers method so I should be OK. I still need to see what baugs and security flaws might still affect this older version. I am not sure if svgedit7 is much better in this respect. It is certainly nicer integrated in the browser than svgedit5

[jfhenon]

I'm not sure I understand very well what you want to achieve. Nodejs is not required to run svgedit7. You should be able to integrate svgedit pretty easily in your application. You need at one point to use a div and load svgedit inside this div.

// code in the hosting application 

// you can create any function as a callback
const myCallback = (myArg) => {
      console.log('mycallback', myArg)
      localStorage.setItem(`oimotion-${name}`, JSON.stringify(animations))
    }
    // your application need a div to host svgEdit
    const svgEditor = new Editor( document.getElementById( 'container' ) )
    svgEditor.init()
    svgEditor.setConfig( {
      extensions: [],
      noDefaultExtensions: false,
      // you can create an extension to exchange between svgedit and your application
      userExtensions: [
        {
          pathName: '..../myextension.js',
          config: { loadAnimations, saveAnimations }
        }
      ]
    } )

myextension.js would look like this:

export default {
  name,
  async init (config) {
    console.log('init with config:', config)
    return {
      name,
      eventBased: true, // if eventbased is true, the extensions needs to listen to svgedit events
      callback (config) {
        config.myCallback('hello from SVG-Edit') 
        ......

      }
    }
  }
}

[1001QAdotNET]

Sorry for the delayed answer, I was busy at work and I am now getting back to this side project.
Here is what I am trying to achieve:
I have an HTML editor where I edit some HTML pages that have images
I would like to be able to select an image on that WYSIWYG HTML Editor and open that picture in svg-edit
For that I tried to use SVG-edit7 and Node.js and I passed the references to the picture that I am editing to the svg-edit using a link like below (5001 was the port used by node.js)
http://127.0.01:5001/dtatic/svgedit7/src/editor/index.html?picture_url=http://127.0.0.1:5000/static/uploads/image.png&width=168&height=206
I use JS to get the above and set the string that will be used with svgEditor.loadFromString(svg_file_string)
This approach worked fine in Svg-edit7 I was able to open the image, set the canvas size and add (overlay) a couple of svg elements over the picture that was now part of an SVG being edited
The next step would have been to send the svg code back to the parent window (the HTML editor mentioned in the beginning)
In order to do that I figured I could use the custom handler I am referring to in this post
#751
It seems that the setCustomHandlers method was not tested and it is not available in SVG-Edit7 so I reverted to SVG-Edit5 where this is available (hence my third comment in this thread)

Regarding your reply: I am glad to hear that it is possible to use SVG-edit7 directly without Node.js but your reply it probably above my JS knowledge. (note that below I am not using port 5000 anymore)
If I am trying to access http://127.0.0.1/static/svgedit7/src/editor/index.html I am getting the below errors, I am not sure how I should load the svgedit ver 7 without Node.js

[jfhenon]

I believe this is because you run the version from the source folder (src)
Could you try using the version built in the dist folder: http://127.0.0.1/static/svgedit7/src/editor/index.htm
(if it is not present, you need to build the project - npm run build but this operation requires nodejs (just for the build not for the runtime)

[1001QAdotNET]

thank you!
I will give it a try and report back here if that fixed the problem
I am not sure about what this does in your code snippets posted above
localStorage.setItem(oimotion-${name}, JSON.stringify(animations))
I suspect it stores some animation code in the local storage
In my case I need to push the results back to the parent window because I am opening SVGEditor in a separate window

[jfhenon]

localStorage.setItem(oimotion-${name}, JSON.stringify(animations)) was indeed a test for SVG animations but it should not have been committed to SVGEdit.