Injecting a visual editor into existing codebases

Hey HN,

I'm working on an injectable visual editor (like a WebFlow) that creates a wrapper around existing web UI. The usecase is to create a home grown, self-hosting Framer/Webflow that works with many different web frameworks. Currently supporting Next.js and Sveltekit.

I want to validate my current approach and pitfalls with you all. Would love to hear your thoughts.

How it works currently: - Run script (e.g. `npx wrapper-lib`)

- Script parses through codebase, build a sourcemap and find relevant files (e.g `.svelte`, `.jsx`, etc)

- Statically create a builder page and import pages/components (example below)

- Add the wrapper file in a new route (e.g. `/builder`)

- Open in localhost on the new page

- Use builder and write changes back to mapped pages/components at the end.

Example statically generated builder page:

```

import BuilderWrapper from 'builder-lib/next.js-wrapper'

// Generated imports based on directory structure

import Page1 from 'routes/page1/page.js'

import Page2 from 'routes/page2/page.js'

// Generated objects based on directory structure

const pages = [ {component: Page1, source: 'routes/page1/page.js', ...}, {component: Page2, source: 'routes/page2/page.js', ...} ]

...

export default function Page() {

    return 

}

```

With this anyone can run the script and use the builder on a new page (e.g. `localhost:8080/builder`). I'm omitting a lot of details here for brevity but what are some thoughts on this pattern?

I'm also considering how Storybook works which is to bundle the pages/components and run on a separate server. This seems a lot more complicated and less flexible to handle other frameworks like Sveltekit.