HTML Service: Create and Serve HTML

TheHTML service lets you serve web pages thatcan interact with server-side Apps Script functions. It is particularly usefulfor building web apps or adding custom user interfaces in Google Docs, Sheets,and Forms. You can even use it to generate the body of an email.

Create HTML files

To add an HTML file to your Apps Script project, follow these steps:

  1. Open the Apps Script editor.
  2. At the left, click Add a file >HTML.

Within the HTML file, you can write most standard HTML, CSS, and client-sideJavaScript. The page will be served as HTML5, although some advanced features ofHTML5 are not available, as explained inRestrictions.

Your file can also include template scriptlets that are processed on the serverbefore the page is sent to the user — similar to PHP — as explained in thesection ontemplated HTML.

Serve HTML as a web app

To create a web app with the HTML service, your code must include adoGet()function that tells the script how to serve the page. The function must returnanHtmlOutput object, as shown inthis example.

Code.gs

function doGet() {  return HtmlService.createHtmlOutputFromFile('Index');}

Index.html

<!DOCTYPE html><html>  <head>    <base>  </head>  <body>    Hello, World!  </body></html>

Once that basic framework is in place, all you have to do issave a version of your script, thendeploy your script as a web app.

After the script is deployed as a web app, you can alsoembed it in a Google Site.

Serve HTML as a Google Docs, Sheets, Slides, or Forms user interface

The HTML service can display adialog or sidebarin Google Docs, Sheets, Slides, or Forms if your script iscontainer-bound to the file. (In Google Forms,custom user interfaces are only visible to an editor who opens the form tomodify it, not to a user who opens the form to respond.)

Unlike a web app, a script that creates a user interface for a document,spreadsheet, or form does not need adoGet() function specifically, and you donot need to save a version of your script or deploy it. Instead, the functionthat opens the user interface must pass your HTML file as anHtmlOutput object to theshowModalDialog()) orshowSidebar() methods of theUi object for the active document, form, orspreadsheet.

These examples include a few extra features for convenience: theonOpen()function creates acustom menu that makes it easyto open the interface, and the button in the HTML file invokes a specialclose() method of thegoogle.script.host API to close theinterface.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.function onOpen() {  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.      .createMenu('Dialog')      .addItem('Open', 'openDialog')      .addToUi();}function openDialog() {  var html = HtmlService.createHtmlOutputFromFile('Index');  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.      .showModalDialog(html, 'Dialog title');}

Index.html

<!DOCTYPE html><html>  <head>    <base>  </head>  <body>    Hello, World!    <input type="button" value="Close"        />  </body></html>

Note that the first time you want to display this user interface, you musteither run theonOpen() functionmanually in the script editoror reload the window for the Docs, Sheets, or Forms editor (which will close thescript editor). After that, the custom menu should appear within a few secondsevery time you open the file. ChooseDialog > Open to see theinterface.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-06-04 UTC.