Skip to main content
You can use Lovable to build an app around an editable Google Doc, Sheet, or Slides deck. A common pattern is to show the Google editor in an iframe while the surrounding Lovable app adds navigation, buttons, summaries, automations, or custom workflows. Use this when you want collaborators to keep editing the original Google file directly, instead of copying its content into a separate editor.

​
Why use this workflow

Embedding the Google editor keeps the source of truth in Google Workspace. Users can keep using familiar Docs, Sheets, and Slides editing tools while your Lovable app adds the product experience around the file. This works well for lightweight internal tools, review flows, spreadsheet-powered dashboards, document copilots, and slide deck helpers.

​
Common use cases and example apps

Use caseWhat the Lovable app addsGoogle file to embed
Document review workspaceComments, AI summaries, checklists, or handoff buttons around a DocGoogle Docs
Sheet-powered operations toolCustom filters, side panels, or actions beside the live SheetGoogle Sheets
Pitch deck assistantPrompt controls, notes, or asset generation beside a deckGoogle Slides
Internal planning hubA file selector with the selected Google editor on the pageDocs, Sheets, or Slides

​
Prerequisites

  • A Google account with access to the file
  • A Lovable project where you want to embed the file
  • Google Workspace connectors if the app needs to read, write, create, or list Google files through APIs
  • Sharing settings that allow the people using the app to view or edit the Google file
App connectors are enabled by default on Free, Pro, and Business plans. On Enterprise plans, workspace admins and owners can manage connector availability in Connectors → Admin settings → App connectors.
The iframe uses the viewer’s browser session with Google. The Google Workspace connector is separate and is only needed when your app code needs to call Google APIs, such as reading Sheet rows, creating a Doc, or updating Slides.

​
Set up Google Workspace connectors

If your app only embeds a known Google file, you may not need a connector. If your app reads, writes, creates, lists, or updates Google files, connect the relevant Google Workspace service first.
1

Open connectors

In Lovable, go to Connectors.
2

Connect the Google services you need

Add the relevant Google Workspace connections, such as Google Docs, Google Sheets, Google Slides, and Google Drive.Use Google Drive when the app needs to list files, choose files, create files in folders, or manage file metadata.
3

Authorize the right Google account

Sign in with the Google account that should own or access the files. Each connection is tied to the account that authorizes it.
4

Ask Lovable to use the connection

In your project chat, describe which connection to use and what the app should do with it.
Use my Google Sheets connection to read and update rows in this spreadsheet. Also show the spreadsheet itself in an editable iframe on the right side of the page.
For the full connector setup flow, see Google Workspace.

​
Use the right iframe URL

For direct editing, ask Lovable to use the Google editor URL with /edit. Avoid /preview, /view, /pub, and published-to-web URLs when the goal is editing in place.
File typeEditable iframe URL pattern
Google Docshttps://docs.google.com/document/d/FILE_ID/edit?usp=sharing
Google Sheetshttps://docs.google.com/spreadsheets/d/FILE_ID/edit?usp=sharing
Google Slideshttps://docs.google.com/presentation/d/FILE_ID/edit?usp=sharing
Keep useful file-specific parameters when the user provides them:
  • Docs: keep tab=... if the link includes a tab parameter.
  • Sheets: keep gid=... or range=... when you want to open a specific sheet or range.
  • Slides: keep slide=... if you want to open a specific slide.
Add an Open in Google link next to the iframe. It gives users a reliable fallback if Google asks them to sign in, blocks iframe loading, or the embedded editor feels cramped.

​
Copyable knowledge file

Paste this into project knowledge, workspace knowledge, or a focused skill when your team frequently builds Google Workspace editing apps. 
Google Workspace editing guidance

When I ask to embed or edit a Google Doc, Sheet, or Slides deck directly in Lovable:
- Use an iframe that points to the Google editor URL with /edit, not /preview, /view, /pub, or a published-to-web URL.
- Use these URL patterns:
  - Docs: https://docs.google.com/document/d/FILE_ID/edit?usp=sharing
  - Sheets: https://docs.google.com/spreadsheets/d/FILE_ID/edit?usp=sharing
  - Slides: https://docs.google.com/presentation/d/FILE_ID/edit?usp=sharing
- Preserve useful URL parameters from the pasted link, such as Docs tab, Sheets gid/range, and Slides slide anchors.
- Add an "Open in Google" link near the iframe as a fallback.
- Make the iframe large enough to edit comfortably, usually full height in a split-pane layout.
- Store Google file IDs separately from display names when building file pickers or saved workspaces.
- If the app needs to read, write, create, or list files through APIs, use the matching Google Workspace connector. The iframe itself uses the viewer's Google browser session.
- Do not make a private Google file public unless I explicitly ask for that. Tell me when sharing settings or account access may block editing.
- For Sheets, use the connector for structured row reads and writes, and use the iframe for manual spreadsheet editing.
- If Google shows a sign-in screen or blocks the iframe, keep the Open in Google fallback and explain that Google controls iframe and sign-in behavior.

​
Best practices

  • Start from the pasted Google URL. Parse the file ID and preserve useful parameters instead of asking the user to find the ID manually.
  • Prefer split panes. Put the Google editor on one side and the Lovable-built controls on the other.
  • Use connectors for data operations. For example, read Sheet rows through the Google Sheets connector, then show the Sheet iframe for manual review.
  • Respect sharing settings. Ask before changing file visibility, and avoid making private files public unless the user explicitly requests it.
  • Keep the fallback visible. An external link avoids dead ends when Google requires sign-in or blocks iframe behavior.

​
Limitations

  • Google controls whether its editor loads inside an iframe. Users may need to sign in, accept cookies, or open the file in a new tab.
  • The iframe does not give your app direct access to document contents. Use the Google Workspace connectors when your app needs structured access.
  • The connected Google account owns or accesses files created through the connector. Make sure you authorize the account you want to use.
  • Published apps can expose embedded links to anyone who can access the app. Keep Google sharing permissions aligned with the app audience.

​
FAQ

No. The iframe loads through the user’s browser and Google session. Use a connector when your app needs to call Google APIs, such as reading Sheet rows, creating Docs, or updating Slides.
Use the normal Google editor URL with /edit, such as https://docs.google.com/document/d/FILE_ID/edit?usp=sharing. Avoid preview, view-only, and published URLs when you want users to edit directly.
Google controls sign-in and iframe behavior. The viewer may need to sign in with an account that has access to the file, allow cookies, or open the file in a new tab.