I wonder, is it possible to create a visual no-code builder to work with JS components (e.g. React JSX) if them are manually hard-coded before?

Let me explain what I mean.

Suppose a simple React component pages/index.js previously written by a developer manually:

function HomePage() {
    return <div>Welcome to Next.js!</div>
}

export default HomePage

How can we change such a component in the front-end using a visual builder?

For example, we want to add a new HTML element (e.g. H1) inside the existing div.

As I can understand, the builder first needs to know in which JS file the HTML markup is stored to update it. So we can add id="homepage" to the div first and then store a relation as a config like

{"homepage": "pages/index.js"}

And now if we add a new element inside <div id="homepage">, the builder adds the element to the DOM of the div at the client, then takes the whole updated DOM of the div and writes back to the file index.js according to the config

Ok, but the file contains not only HTML markup - it's JS (React) code.

How to keep all the JS code e.g. function HomePage(), return, export default and so on ?

As an option, we can separately load all the JS code as HTML including non-HTML code as #text nodes. Then update the DOM and re-write everything back to the file.

But it sounds complicated and may cause unexpected issues.

So what solution would be the best?

Or maybe there is a ready React-specific solution?

Or maybe it's a bad idea at all to parse and re-write manually hard-coded components by visual builder and the only solution is to store everything as JSON like "homepage":{"div", {"class":""}, "Welcome..."} which is more easy for re-writing ? (but requires a new render)