Added docs for Web IDE Client Evaluation

Closes #50143

3 files changed, 32 insertions, 0 deletions

diff --git a/doc/user/project/web_ide/img/admin_clientside_evaluation.png b/doc/user/project/web_ide/img/admin_clientside_evaluation.png
new file mode 100644
index 00000000000..1cffaf09005
--- /dev/null
+++ b/doc/user/project/web_ide/img/admin_clientside_evaluation.png
diff --git a/doc/user/project/web_ide/img/clientside_evaluation.png b/doc/user/project/web_ide/img/clientside_evaluation.png
new file mode 100644
index 00000000000..56b65dde73a
--- /dev/null
+++ b/doc/user/project/web_ide/img/clientside_evaluation.png
diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index 511ac2d7e79..992f97e2284 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -72,5 +72,37 @@ leaving the Web IDE. Click the dropdown in the top of the sidebar to open a list
 of branches. You will need to commit or discard all your changes before
 switching to a different branch.
 
+## Clientside Evaluation
+
+> [Introduced in](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/19764) [GitLab Core][ce] 11.2.
+
+The Web IDE can be used to preview JavaScript projects right in the browser. This
+feature uses CodeSandbox to compile and bundle the JavaScript used to preview.
+On public projects, a `Open in CodeSandbox` button visible which will take
+the files and contents of the project and load it into a CodeSandbox project.
+**Note** this button is not visible on private or internal projects.
+
+![Web IDE Clientside Evaluation](img/clientside_evaluation.png)
+
+### Enabling Clientside Evaluation
+
+The Clientside Evaluation feature needs to be enabled inside of the GitLab instances
+admin settings.
+
+![Admin Clientside Evaluation setting](img/admin_clientside_evaluation.png)
+
+Once it has been enabled in application settings, projects with a `package.json` file
+and a `main` entry point can be previewed inside of the Web IDE. An example `package.json`
+is below.
+
+```json
+{
+  "main": "index.js",
+  "dependencies": {
+    "vue": "latest"
+  }
+}
+```
+
 [ce]: https://about.gitlab.com/pricing/
 [ee]: https://about.gitlab.com/pricing/