Ask HN: Injecting a visual editor into existing codebases
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.