How to Integrate Retool with Google Docs

Navigate to Google Cloud Console → APIs & Services → Library and search for Google Docs API. Click it and press Enable if it is not already active. For Retool integration, the recommended authentication approach is OAuth 2.0 with your personal Google account. In Google Cloud Console → APIs & Services → Credentials, click Create Credentials → OAuth client ID. Set the application type to Web application. In the Authorized redirect URIs section, add Retool's OAuth callback URL: https://oauth.retool.com/oauth/user/oauthcallback for Retool Cloud (or your self-hosted instance's equivalent URL: https://YOUR_DOMAIN/oauth/user/oauthcallback). Download or copy the Client ID and Client Secret from the credentials details. You will also need to configure the OAuth consent screen if it is not already set up — go to APIs & Services → OAuth consent screen, set User Type to Internal for Google Workspace accounts (this skips the app verification requirement), add the scope https://www.googleapis.com/auth/documents for full read/write access or https://www.googleapis.com/auth/documents.readonly for read-only. Save the consent screen configuration. For automated workflows using service accounts instead, create a service account, assign it the Editor role on specific Google Drive folders, and download the JSON key — then generate Bearer tokens using the same pattern as other Google Cloud APIs.

Navigate to the Resources tab in Retool's left sidebar and click Add Resource. Select REST API from the resource type list. Name the resource Google Docs API. In the Base URL field, enter https://docs.googleapis.com/v1. In the Authentication section, select OAuth 2.0 from the dropdown. Fill in the OAuth configuration fields: set Authorization URL to https://accounts.google.com/o/oauth2/auth, Token URL to https://oauth2.googleapis.com/token, enter your Client ID and Client Secret from the credentials you created, and set the Scope to https://www.googleapis.com/auth/documents (or space-separated if adding multiple scopes). Set the Access Token URL to the same token URL. Click Save Resource and then click the Connect button that appears to trigger the OAuth flow — Retool opens a Google sign-in popup where you authorize the app and grant the requested scopes. After successful authorization, the resource shows as connected with your account email. If multiple team members will use this resource, enable Share OAuth 2.0 credentials between users in the resource settings — this means your single authentication token is used for all Retool app users, which is appropriate for service-account-like access. Save the resource and verify it shows a Connected status.

Open or create a Retool app and click + to create a new query in the Code panel. Select the Google Docs API resource. Set the HTTP method to GET and enter the path as /documents/DOCUMENT_ID — replace DOCUMENT_ID with the actual ID from your Google Doc's URL (the long alphanumeric string between /d/ and /edit in the URL, e.g., 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms). Click Run to execute the query. The Google Docs API returns a comprehensive JSON object representing the full document structure including the title, body (as a sequence of structural elements), lists, tables, and inline objects. The response is deeply nested: document.body.content is an array of StructuralElements, each of which can be a paragraph, table, sectionBreak, or tableOfContents. Paragraphs contain elements which contain textRun objects with the actual text content. Create a JavaScript transformer to extract readable text from this nested structure. Drag a Text component onto the canvas and bind it to the transformed output to display the document text. For a document management panel, also query the document title from document.title and display it as a heading.

1// Transformer: extract plain text from Google Docs API response
2function extractText(content) {
3  if (!content || !content.body || !content.body.content) return '';
4  
5  return content.body.content
6    .filter(el => el.paragraph)
7    .map(el => {
8      return (el.paragraph.elements || [])
9        .filter(e => e.textRun)
10        .map(e => e.textRun.content)
11        .join('');
12    })
13    .join('')
14    .trim();
15}
16
17const plainText = extractText(data);
18return {
19  title: data.title || 'Untitled',
20  text: plainText,
21  word_count: plainText.split(/\s+/).filter(w => w.length > 0).length,
22  revision_id: data.revisionId
23};

Create a form in Retool for document generation. Add Text Input components for the document title and key fields like client name, date, and project details. Add a Create Document button. Create a new query named createDocument, set the HTTP method to POST, and set the path to /documents. Set the body type to JSON and use the request body: { "title": "{{ titleInput.value }}" }. This creates a blank document with the specified title and returns the new document ID and URL. In the query's On Success event handler, add a second query called populateDocument. In populateDocument, set the method to POST and the path to /documents/{{ createDocument.data.documentId }}:batchUpdate. The batchUpdate body contains a requests array of operation objects. To insert text into the new document at position 1 (the beginning), use an insertText request with the full content built from your form fields. Structure the body as a JSON object with a requests array containing the desired text operations. After populating, display the document URL in a Text component: https://docs.google.com/document/d/{{ createDocument.data.documentId }}/edit — make this a clickable Link component so users can open the generated document directly from Retool.

1// batchUpdate request body for populating a new document
2// Set as the POST body for the /documents/{docId}:batchUpdate query
3{
4  "requests": [
5    {
6      "insertText": {
7        "location": { "index": 1 },
8        "text": "{{ titleInput.value }}\n\nPrepared for: {{ clientNameInput.value }}\nDate: {{ dateInput.value }}\n\n{{ scopeInput.value }}"
9      }
10    }
11  ]
12}

The most powerful pattern for document generation is template replacement. Create a Google Doc template that contains placeholder strings in double braces like {{CLIENT_NAME}}, {{PROJECT_TITLE}}, {{TOTAL_VALUE}}, and {{START_DATE}}. Format the template with proper headings, tables, and styling — the API preserves all formatting during text replacement. Save the template document ID. In Retool, first create a Google Drive Resource (separate from the Docs Resource) with the scope https://www.googleapis.com/auth/drive to enable file copying. Create a query named copyTemplate using the Drive API: POST to https://www.googleapis.com/drive/v3/files/TEMPLATE_DOC_ID/copy with a JSON body containing { "name": "Proposal - {{ clientInput.value }}" }. This duplicates the template into the authenticated user's Drive. On success, use the returned id from the copy operation to run a batchUpdate on the new document. The batchUpdate body contains multiple replaceAllText requests — one for each placeholder — that swap placeholder strings with actual values from your Retool form and database queries. This approach is more reliable than manual text insertion because it maintains the template's exact formatting, fonts, table structures, and page layout. Add a Retool Workflow step to move the generated document to a specific shared Drive folder using the Drive API move endpoint for organized document storage.

1// batchUpdate body for template placeholder replacement
2// Use this after copying the template document
3{
4  "requests": [
5    {
6      "replaceAllText": {
7        "containsText": { "text": "{{CLIENT_NAME}}", "matchCase": true },
8        "replaceText": "{{ clientInput.value }}"
9      }
10    },
11    {
12      "replaceAllText": {
13        "containsText": { "text": "{{PROJECT_TITLE}}", "matchCase": true },
14        "replaceText": "{{ projectInput.value }}"
15      }
16    },
17    {
18      "replaceAllText": {
19        "containsText": { "text": "{{TOTAL_VALUE}}", "matchCase": true },
20        "replaceText": "${{ valueInput.value }}"
21      }
22    },
23    {
24      "replaceAllText": {
25        "containsText": { "text": "{{START_DATE}}", "matchCase": true },
26        "replaceText": "{{ startDateInput.value }}"
27      }
28    },
29    {
30      "replaceAllText": {
31        "containsText": { "text": "{{GENERATED_DATE}}", "matchCase": true },
32        "replaceText": "{{ moment().format('MMMM D, YYYY') }}"
33      }
34    }
35  ]
36}