✍️ Submission & 🖍️ Annotation System — Built with Google Apps Script

A while ago, I shared a basic proof-of-concept for annotating images in Glide using WebView and AI components. It worked for light use cases but lacked structure and scalability.
:link: Earlier post

Now, I’m introducing a full-featured image annotation app built entirely with Google Apps Script. Designed to embed seamlessly into Glide via WebView, it provides a robust system to collect, review, and annotate image (and single-page PDF) submissions—powered by Google Drive.


:rocket: Key Features

:wrench: Tech Stack

View components
Google Apps Script Google Apps Script – Backend logic & automation
HTML5 Canvas – Native drawing layer for annotation
Fabric.js Fabric.js – Drawing & annotation canvas
Tailwind CSS – Responsive design
Google Drive Google Drive – Centralized storage

:locked_with_key: Authentication & Workflow

  • Session-based authentication – Uses userID and userName, with role-based access (Admin, Reviewer, Uploader).
  • User whitelist – Access is validated against the "Registered Users" sheet.
  • Real-time sync – Collaborators are notified when edits are saved.
  • Multilanguage support – Built-in translator for UI and content.

:artist_palette: Annotation Tools

  • Freehand drawing, shapes (lines, arrows, rectangles, circles).
  • Text labels, magnifier, color/size adjustments.
  • Dark mode, export (download/print), and sharing.

:open_file_folder: File Management

  • Supports images and single-page PDFs (auto-converted to images).
  • Organized Drive folders:
    1. Uploads
    2. Annotations
    3. Final exports
    4. User photos

:hammer_and_wrench: Admin Controls

  • Toggle features via app or connected Google Sheet.
  • Set deadlines with date pickers.
  • Roles: Admin (full access), Reviewer (annotate/view), Uploader (own files).

:trophy: Use Cases

How Glide community can leverage this tool:

  • Field Surveyors: Mark issues directly on-site photos for inspections or audits
  • Education: Grade image-based assignments with direct markup
  • Healthcare: Discuss medical scans with precise annotation tools
  • Business: Streamline design approvals from stakeholders

:camera: Preview

Submission Manager


A clean role-based submission interface with full CRUD support.


Accordion Table

Expandable accordion with integrated image preview. Currently optimizing layout flow and transition performance.


Admin Panel


Centralized control for deadlines and user permissions


Annotation Canvas


Real-time markup tools with draggable toolbar


Feature Control Panel


Toggle annotation features per project requirements


:link: Try It Out

Embed in Glide via WebView, or open directly:

:backhand_index_pointing_right: Scrawlify Live Demo


:pushpin: Summary

A no-host-required annotation solution for Glide, combining:
:check_mark: Clean UI
:check_mark: Role-based collaboration
:check_mark: Native Drive integration
:check_mark: Real-time sync

:red_exclamation_mark: Still collecting feedback for WebView performance—feel free to test and share thoughts!

7 Likes

Wow that’s cool!.

Thanks!
Have you tried embedding it inside a webview element? You just need to paste the URL into the component. You might need a bit of custom CSS to make the iframe go full-screen.

I did actually and it looks amazing, no need for the custom CSS


here’s the mobile view, which isn’t that good, too big for the small screen.

1 Like

It seems that Glide has a global scaling setting for mobile view. Unfortunately, I can’t check it right now.
If you open it directly through a browser, it might look like this:

1 Like