Edit Google Docs, Sheets, and Slides in Lovable
You can embed editable Google Docs, Sheets, or Slides directly into your Lovable app using an iframe. This lets people edit the original Google file while your app adds extra features around it.
Anyone building an app that needs to let users edit Google files directly within Lovable, while keeping the original file in Google Workspace.
Do this, in order
- 1
Go to 'Connectors' in Lovable.
This is where you manage all connections to external services for your app.
- 2
Add the specific Google Workspace connections your app needs, like Google Docs, Sheets, Slides, or Drive.
These connections allow your app to interact with Google files through their APIs, for tasks like reading data or creating new files.
- 3
Sign in with the Google account that has the necessary permissions for the files your app will access or manage.
Each connection is linked to a specific Google account, determining what files your app can see and modify.
- 4
In your project chat, tell Lovable which connection to use and what you want the app to do with it, including showing the Google file in an editable iframe.
This instructs Lovable to build the app functionality, using the connector for data operations and an iframe for direct editing.
Paste this into your project
I want to embed an editable Google Sheet in my Lovable app. Please use my Google Sheets connection to read and update rows in this spreadsheet: [PASTE_YOUR_SHEET_LINK_HERE]. Also, show the spreadsheet itself in an editable iframe on the right side of the page. Make sure the iframe uses the `/edit` URL and preserves any `gid` or `range` parameters from the link. Add an 'Open in Google' link next to the iframe as a fallback.
Words decoded
- iframe
- A window within a webpage that displays content from another source, in this case, the Google editor.
- Google Workspace connectors
- Tools that allow your Lovable app to talk to Google services like Docs, Sheets, and Drive, to read, write, or manage files programmatically.
- API
- A set of rules that allows different software programs to communicate with each other, used here for your app to interact with Google services.
Where people get stuck
- Expecting the iframe to give your app direct access to the document's content; it only displays the Google editor.
- Using a Google account for the connector that doesn't have the right permissions for the files your app needs to access.
- Using `/preview`, `/view`, `/pub`, or published-to-web URLs instead of `/edit` when you want users to directly edit the file.
- Forgetting that Google controls whether its editor loads inside an iframe, and users might need to sign in or open the file in a new tab.
- Making a private Google file public through your app without explicit user permission.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.