Search sidebar
A sidebar input calls findRows(query) on the server, which returns matching rows as JSON and renders them in a table in the sidebar.
What is HtmlService in Google Sheets?
HtmlService lets Apps Script show custom HTML as a dialog, sidebar, or full web app page inside or beside your spreadsheet. You design the UI with HTML and CSS, then call server functions with google.script.run to read and write sheet data without building a separate website.
When to use it
Use HtmlService when you need a friendlier interface than a raw grid: multi-step forms, search boxes, approval buttons, or dashboards that pull live data from the active sheet.
When to skip it
Skip HtmlService for tiny tasks a Browser.msgBox or custom menu item can handle. Full web apps with heavy traffic may need tighter security review than a simple sidebar.
How it works
-
1
Create an HTML file in the Apps Script project, for example Sidebar.html.
-
2
In Code.gs, return HtmlService.createHtmlOutputFromFile('Sidebar') or createTemplateFromFile for dynamic placeholders.
-
3
Show the UI with SpreadsheetApp.getUi().showSidebar(html) or showModalDialog(html, 'Title').
-
4
In the HTML, use google.script.run.withSuccessHandler(fn).serverFunction(args) to call functions in Code.gs.
-
5
Deploy as a web app when the page should open from a URL instead of inside Sheets.
-
6
Test permissions because server functions run with the same scopes as the rest of your script.
Examples in Google Sheets
Approval modal
A custom menu opens a modal dialog with Approve and Reject buttons that call updateRowStatus(rowId, status) on the active row.
Web app form
HtmlService serves a public form page that posts new entries to the sheet through a server function, without sharing the whole workbook.
Build this without starting from a blank cell
Use a Better Sheets tool for HtmlService, then watch a walkthrough when you want the full pattern.
Better Sheets resources
Common mistakes
- Putting API secrets in client-side script tags where users can view source.
- Not using withFailureHandler on google.script.run, so errors fail silently in the UI.
- Loading huge datasets into the browser at once instead of paging or filtering on the server.
- Forgetting XFrameOptionsMode when embedding breaks in iframes on external sites.
- Deploying a web app with Anyone access while server functions return private sheet data.
Frequently asked questions
- What is the difference between a sidebar and a dialog?
- A sidebar docks beside the sheet and stays open while users edit. A modal dialog blocks interaction until they close it.
- Can HtmlService use external CSS or JavaScript libraries?
- You can link CDN assets in HTML, but sandbox and CSP rules may limit some resources. Test in your target environment.
- How does google.script.run work?
- It calls a function in Code.gs asynchronously. Use success and failure handlers to update the page when the server responds.
- Can I use HtmlService without opening the sheet?
- As a deployed web app, yes. Users visit the deployment URL and server code still accesses the bound spreadsheet per deployment settings.
- Why is my sidebar blank?
- Check the HTML filename matches createHtmlOutputFromFile, open Executions for server errors, and look for JavaScript errors in the browser console.
- Does HtmlService work on mobile Sheets?
- Sidebars and dialogs are limited on mobile. Web app URLs in a mobile browser often work better for field use.
- Can HtmlService return JSON only?
- Web apps can return JSON from doGet without HTML, but HtmlService itself is for HTML UIs. ContentService handles plain text and JSON responses.
- How do I pass data from the sheet into HTML?
- Use a template file with <?= variable ?> placeholders, or call a server function on load that returns the data you need.
Related Tutorials
Watch how HtmlService works
Convert Google Sheets into a REST API
Sheet Styles A Free Google Sheet Add-on by Better Sheets
Embed a Headline in a Website from Google Sheets
Create Navigation Buttons in Sheets to Other Sheets
Ali Abdaal's Google Sheet | Year at a Glance
Add Click Tracking To Your Google Sheets | Bitly in a Google Sheet
Related blog posts
Guides that explain HtmlService in more depth.
How to Use Google Sheets as a Website Database
Did you know you can use Google Apps Script to turn a Google Sheet into a free, auto-syncing database for your website? This guide shows you exactly how to set it up. You’ll prepare your spreadsheet, write a few lines of code and publish your site. Don’t worry if you’re not a developer, we’ll walk you through it. Why Use Google Sheets as a Database? For small projects, Google Sheets offers many advantages over traditional databases: * Free hosting and storage * Easy to edit data without...
Read post →Quick Google Sheets Tips
Boost productivity and streamline your workflow in Google Sheets with our quick tips and free tools. Breathe new life into your spreadsheets today.
Read post →Are Google Sheets sexy now? Dropdown Chips might do the trick!
Replace typing with clicking. Instantly color-code options. Discover a revolutionary way to manage your lists with Google Sheets new dropdown feature!
Read post →Related glossary terms
Apps Script web apps
A web app turns your script into a URL that runs doGet or doPost when someone visits or posts data. The page can read and write your spreadsheet behind the scenes, which is useful for simple forms, internal tools, and lightweight APIs without standing up a separate server.
Read guide →Script Editor
The Script Editor is the Apps Script workspace inside your spreadsheet where you write JavaScript that talks to Sheets, Gmail, and other Google services. You open it from Extensions > Apps Script. Every function you save can be run manually, bound to a trigger, or linked from a custom menu.
Read guide →Google Sheets automation
Automation means work happens without repeating the same clicks every day: imports update, emails send, rows move, and dashboards refresh. In Sheets, automation usually stacks built-in features, Apps Script, and sometimes the Sheets API or add-ons. Start with the lightest tool that still solves the job.
Read guide →Google Sheets workflows
A workflow is the path work takes through your sheet: intake, review, approval, done. Good workflows use consistent columns, statuses everyone understands, and just enough automation to move tasks forward without hiding steps from the team.
Read guide →Done reading about HtmlService?
Membership unlocks 636+ tutorials, unlimited generators, and every template. Practical lessons. Zero fluff.
Need this once
Jump to a free tool or a single tutorial for this topic.
Learning Sheets for real
Unlock the full library, generators, and templates with membership.