HTML Service: Best Practices

Creating user interfaces with the HTML service follows many of the same patternsand practices as other types of web development. However, there are some aspectsthat are unique to the Apps Script environment or are otherwise worthhighlighting. Below we'll cover some best practices you should keep in mind whendeveloping your own HTML-service UIs.

Separate HTML, CSS, and JavaScript

Keeping all the HTML, CSS, and JavaScript code in one file can make your projectdifficult to read and develop. While Apps Script does require client-side codeto be placed in .html files, you can still separate your CSS and client-sideJavaScript into different files and then include them in the main HTML pagewith a custom function.

The example below defines a custom server-sideinclude() function in theCode.gs file to import the Stylesheet.html and JavaScript.html file contentinto the Page.html file. When called usingprinting scriptlets,this function imports the specified file content into the current file. Noticethat the included files contain<style> and<script> tags becausethey're HTML snippets and not pure .css or .js files.

Code.gs

function doGet(request) {  return HtmlService.createTemplateFromFile('Page')      .evaluate();}function include(filename) {  return HtmlService.createHtmlOutputFromFile(filename)      .getContent();}

Page.html

<!DOCTYPE html><html>  <head>    <base>    <?!= include('Stylesheet'); ?>  </head>  <body>    <h1>Welcome</h1>    <p>Please enjoy this helpful script.</p>    <?!= include('JavaScript'); ?>  </body></html>

Stylesheet.html

<style>p {  color: green;}</style>

JavaScript.html

<script>window.addEventListener('load', function() {  console.log('Page is loaded');});</script>

Load data asynchronously, not in templates

Templated HTML can be used to quicklybuild simple interfaces, but its use should be limited to ensure your UI isresponsive. The code in templates is executed once when the page is loaded, andno content is sent to the client until the processing is complete. Havinglong-running tasks in your scriptlet code can cause your UI to appear slow.

Use scriptlet tags for quick, one-time tasks such as including other contentor setting static values. All other data should be loaded usinggoogle.script.run calls.Coding in this asynchronous manner is more difficult but allows the UI to loadmore quickly and gives it the opportunity to present a spinner or otherloading message to the user.

Don't — load in templates

<p>List of things:</p><? var things = getLotsOfThings(); ?><ul>  <? for (var i = 0; i < things.length; i++) { ?>    <li><?= things[i] ?></li>  <? } ?></ul>

Do — load asynchronously

<p>List of things:</p><ul>    <li>Loading...</li></ul><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>// The code in this function runs when the page is loaded.$(function() {  google.script.run.withSuccessHandler(showThings)      .getLotsOfThings();});function showThings(things) {  var list = $('#things');  list.empty();  for (var i = 0; i < things.length; i++) {    list.append('<li>' + things[i] + '</li>');  }}</script>

Load resources using HTTPS

If your page is served using the newerIFRAMEsandbox mode, includingJavaScript or CSS files not served using HTTPS will result in errors like theone below.

Mixed Content: The page at 'https://...' was loaded over HTTPS, butrequested an insecure script 'http://...'. This request has been blocked;the content must be served over HTTPS.

Most popular libraries support both HTTP and HTTPS, so switching is usuallyjust a matter of inserting an addition 's' into the URL.

Use the HTML5 document type declaration

If your page is served using the newerIFRAMEsandbox mode, make sureto include the following snippet of code at the top of your HTML file.

<!DOCTYPE html>

This document type declations tells the browser that you designed the page formodern browsers, and that it shouldn't render your page usingquirks mode. Even if you don't planto take advantage of modern HTML5 elements or JavaScript APIs, this will helpensure your page is displayed correctly.

Load JavaScript last

Many web developers recommend loading JavaScript code at the bottom of the pageto increase responsiveness, and this is even more important with the HTMLservice. Moving your<script> tags to the end of your page will let HTMLcontent render before the JavaScript is processed, allowing you to present aspinner or other message to the user.

Take advantage of jQuery

jQuery is a popular JavaScript library that simplifiesmany common tasks in web development.

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.