Skip to content

Draft: Stackblitz webcontainer spike.

Chad Woolley requested to merge caw-webcontainer-preview into main

Related: Investigate a WASM or client-based approach to ... (gitlab#360865 - closed)

Spike of embedding Stackblitz, which uses a Webcontainer, into the Web IDE as a "preview" pane, via a VS Code extension command using a webview.

Goals:

  • Embed a hardcoded iframe project (svelte demo) in a Web IDE VS Code tab
  • Use the StackBlitz JS API to embed the project instead of a hardcoded iframe.
  • Hook the existing Web IDE filesystem up to the Stackblitz embedded webcontainer via applyfsdiff API call

Note that this currently embeds all of stackblitz, including their VS Code editor instance, so we have "VS Code inside VS Code":

vs-code-inception

We can hide everything but the stackblitz preview pane by default, but the user can still re-display the editor with the bottom-right editor or both buttons.

Therefore, this would not be a viable approach for a user-facing GitLab Web IDE preview pane feature.

Stackblitz does have a webcontainer API, which could possibly allow us to embed only the preview Webcontainer, but it is currently in a closed alpha. We are currently in the process of requesting access.

Edited by Chad Woolley

Merge request reports