Ask HN: Injecting a visual editor into existing codebases
Hey HN,<p>I&#x27;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&#x2F;Webflow that works with many different web frameworks. Currently supporting Next.js and Sveltekit.<p>I want to validate my current approach and pitfalls with you all. Would love to hear your thoughts.<p>How it works currently:
 - Run script (e.g. `npx wrapper-lib`)<p>- Script parses through codebase, build a sourcemap and find relevant files (e.g `.svelte`, `.jsx`, etc)<p>- Statically create a builder page and import pages&#x2F;components (example below)<p>- Add the wrapper file in a new route (e.g. `&#x2F;builder`)<p>- Open in localhost on the new page<p>- Use builder and write changes back to mapped pages&#x2F;components at the end.<p>Example statically generated builder page:<p>```<p>import BuilderWrapper from &#x27;builder-lib&#x2F;next.js-wrapper&#x27;<p>&#x2F;&#x2F; Generated imports based on directory structure<p>import Page1 from &#x27;routes&#x2F;page1&#x2F;page.js&#x27;<p>import Page2 from &#x27;routes&#x2F;page2&#x2F;page.js&#x27;<p>&#x2F;&#x2F; Generated objects based on directory structure<p>const pages = [
    {component: Page1, source: &#x27;routes&#x2F;page1&#x2F;page.js&#x27;, ...},
    {component: Page2, source: &#x27;routes&#x2F;page2&#x2F;page.js&#x27;, ...} 
]<p>...<p>export default function Page() {<p><pre><code>    return &lt;BuilderWrapper pages={pages} &#x2F;&gt;
</code></pre>
}<p>```<p>With this anyone can run the script and use the builder on a new page (e.g. `localhost:8080&#x2F;builder`).
I&#x27;m omitting a lot of details here for brevity but what are some thoughts on this pattern?<p>I&#x27;m also considering how Storybook works which is to bundle the pages&#x2F;components and run on a separate server. This seems a lot more complicated and less flexible to handle other frameworks like Sveltekit.