📝 Document variables for static spaces (#1175)

* 📝 Document variables for static spaces

* 📝 Also add doc in spaces-sdks-static.md

* Apply suggestions from code review

Co-authored-by: Simon Brandeis <[email protected]>

* 📝 Add example space

* Update docs/hub/spaces-sdks-static.md

---------

Co-authored-by: Simon Brandeis <[email protected]>

docs/hub/spaces-overview.md

@@ -66,7 +66,11 @@ If your app requires environment variables (for instance, secret keys or tokens)
 </div>
 
 
-Variables are publicly accessible and viewable and will be automatically added to Spaces duplicated from your repository. They are exposed to your app as environment variables. For Docker Spaces, check out [environment management with Docker](./spaces-sdks-docker#secrets-and-variables-management).
+Variables are publicly accessible and viewable and will be automatically added to Spaces duplicated from your repository. They are exposed to your app as environment variables.
+
+For Static Spaces, they are available through client-side JavaScript in `window.huggingface.variables`.
+
+For Docker Spaces, check out [environment management with Docker](./spaces-sdks-docker#secrets-and-variables-management).
 
 Secrets are private and their value cannot be retrieved once set. They won't be added to Spaces duplicated from your repository. The secrets will be exposed to your app with [Streamlit Secrets Management](https://blog.streamlit.io/secrets-in-sharing-apps/) if you use Streamlit, and as environment variables in other cases. For Docker Spaces, please check out [environment management with Docker](./spaces-sdks-docker#secrets-and-variables-management). Users are warned when our `Spaces Secrets Scanner` [finds hard-coded secrets](./security-secrets).
 

docs/hub/spaces-sdks-static.md

@@ -6,3 +6,13 @@ Here are some examples of Spaces using custom HTML:
 
 * [Smarter NPC](https://huggingface.co/spaces/mishig/smarter_npc): Display a PlayCanvas project with an iframe in Spaces.
 * [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Display a Sketchfab model in Spaces.
+
+## Space variables
+
+Custom [environment variables](./spaces-overview#managing-secrets) can be passed to your Space. OAuth information such as the client ID and scope are also available as environment variables, if you have [enabled OAuth](./spaces-oauth) for your Space.
+
+To use these variables in JavaScript, you can use the `window.huggingface.variables` object. For example, to access the `OAUTH_CLIENT_ID` variable, you can use `window.huggingface.variables.OAUTH_CLIENT_ID`.
+
+Here is an example of a Space using custom environment variables and oauth enabled and displaying the variables in the HTML:
+
+* [Static Variables](https://huggingface.co/spaces/huggingfacejs/static-variables)