gitlab-org--gitlab-foss/changelogs/unreleased/ide-codesandbox-poc.yml

---
title: Added live preview for JavaScript projects in the Web IDE
merge_request: 19764
author:
type: added
Web IDE & CodeSandbox This enables JavaScripts projects to have live previews straight in the browser without requiring any local configuration. This uses the CodeSandbox package `sandpack` to compile it all inside of an iframe. This feature is off by default and can be toggled on in the admin settings. Only projects with a `package.json` and a `main` key are supported. Updates happen in real-time with hot-reloading. We just watch for changes to files and then send them to `sandpack` to allow it to reload the iframe. The iframe includes a very simple navigation bar, the text bar is `readonly` to stop users navigating away from the preview and the back and forward buttons just pop/splice the navigation stack which is tracked by a listener on `sandpack` There is a button inside the iframe which allows the user to open the projects inside of CodeSandbox. This button is only visible on public projects. On private or internal projects this button get hidden to protect private code being leaked into an external public URL. Closes #47268 2018-06-13 12:06:35 -04:00			`---`
			`title: Added live preview for JavaScript projects in the Web IDE`
			`merge_request: 19764`
			`author:`
			`type: added`