Ask HN: 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 <BuilderWrapper pages={pages} /> } ``` 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.