Static HTML Spaces

Spaces also accommodate custom HTML for your app instead of using Streamlit or Gradio. Setsdk: static inside theYAML block at the top of your SpacesREADME.md file. Then you can place your HTML code within anindex.html file.

Here are some examples of Spaces using custom HTML:

• Smarter NPC: Display a PlayCanvas project with an iframe in Spaces.
• Huggingfab: Display a Sketchfab model in Spaces.
• Diffuse the rest: Draw and diffuse the rest

Adding a build step before serving

Static Spaces support adding a custom build step before serving your static assets. This is useful for frontend frameworks like React, Svelte and Vue that require a build process before serving the application. The build command runs automatically when your Space is updated.

Addapp_build_command inside theYAML block at the top of your SpacesREADME.md file, andapp_file.

For example:

• app_build_command: npm run build
• app_file: dist/index.html

Example spaces:

• Svelte App
• React App

Under the hood, it willlaunch a build, storing the generated files in a specialrefs/convert/build ref.

Space variables

Customenvironment variables can be passed to your Space. OAuth information such as the client ID and scope are also available as environment variables, if you haveenabled OAuth for your Space.

To use these variables in JavaScript, you can use thewindow.huggingface.variables object. For example, to access theOAUTH_CLIENT_ID variable, you can usewindow.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