diff --git a/gatsby-config.js b/gatsby-config.js
index 2ab7dee74..710d816cf 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -381,6 +381,10 @@ module.exports = {
title: "Quickstart",
path: "guides/getting_started/quickstart.md",
},
+ {
+ title: "Code Playground",
+ path: "guides/getting_started/code_playground.md",
+ },
{
title: "Development tools",
path: "guides/getting_started/dev_tooling.md",
diff --git a/src/pages/guides/getting_started/code_playground.md b/src/pages/guides/getting_started/code_playground.md
new file mode 100644
index 000000000..b60d61307
--- /dev/null
+++ b/src/pages/guides/getting_started/code_playground.md
@@ -0,0 +1,94 @@
+---
+keywords:
+ - Adobe Express
+ - Express Add-on SDK
+ - Express Editor
+ - Adobe Express
+ - Add-on SDK
+ - SDK
+ - JavaScript
+ - Extend
+ - Extensibility
+ - API
+ - Add-on Manifest
+ - Add-on dev tool
+title: Code Playground
+description: How to access the Code Playground
+contributors:
+ - https://github.com/ErinFinnegan
+ - https://github.com/padmkris123
+---
+
+# Code Playground
+
+The Code Playground is an in-app lightweight code editor for fast and effortless prototyping. It lets you iterate on ideas directly by allowing you to experiment without any setup. Whether you're just getting started building add-ons or you want to test your concepts and ideas, this playground is for you.
+
+## Introduction
+
+Check out the video below for a quick introduction to the add-on playground.
+
+
+ VIDEO
+