Google Apps Script (GAS) is a powerful tool for automating tasks and building applications within the Google Workspace ecosystem. However, when it comes to creating user interfaces, GAS can be somewhat limited. This is where Svelte comes in.
I know that Svelte simply generates raw HTML, Javascript, and CSS when you run the Svelte compiler. Its output doesn’t require any additional dependencies like React. So I figured it should be possible to build a UI in Svelte, compile it, and upload the files to Google Apps Script. This totally works, but there are a few tricks. Read on to learn more, or just jump to my skeleton repo: svelte-google-apps-script
There are two tricks with using Svelte with Google Apps Script: running locally vs in the GAS environment and dealing with images.
Running Locally
When you run Svelte locally, it uses a development server that serves your files. This is great for development, but it won’t work in the GAS environment if you are trying to call GAS server methods, which is the whole point of running in GAS after all.
My repo injects a mocked GAS server into the Svelte app when running locally. This allows you to call GAS server methods while running locally, and then when you deploy to GAS, it will use the real GAS server methods.
Simply add your mocked functions to src/lib/mocks.ts.
Images
GAS does not allow you to serve image files or any other non-HTML or non-JavaScript files. This means that if you want to use images in your Svelte app, you will need to convert them to base64 and embed them directly in your HTML or CSS.
In my repo, I’ve updated the Vite settings to covert any images less than 50K to base64. Any images greater than 50K will cause the build to break with a warning to use smaller images.
If you need to host larger images, you can use an image hosting service like imgbb and then use the hosted image URL in your Svelte app.
Example Apps
If you are wondering what kinds of things you can build with Svelte and Google Apps Script, here are two apps I built using this approach:
- Google Sheets + Svelte Roadmap - a visually appealing roadmap, built with Svelte, which pulls data from Google Sheets and lets the user drag and drop items to edit them. The new info is then saved back to Google Sheets.
- Apps Script RTO Checker - a simple tool to check the status of your compliance with your company’s return to office (RTO) policy. It uses Svelte for the UI and Google Apps Script to fetch data from your working location data in Google Calendar.