I was building a contract-generation system when we reached a point where half the document lived in a Google Doc template and half in Google Apps Script.
That was hard to maintain. The templates were split between Google Docs and Apps Script, outside the codebase where I could work on them with my usual tools and AI coding assistants.
So I built react-gdoc: an open-source TypeScript library that generates editable Google Docs from React/JSX components.
What it solves
Keep your document templates in your TypeScript codebase, generate real Google Docs, and let people edit the result as usual.
For example, generate a contract or a project update from application data, then let someone finish it in Google Docs.
You write the template as React components. TypeScript conditions decide which sections appear.
Your app supplies Google authentication, while react-gdoc turns the component tree into Google Docs API batchUpdate requests and handles the indexes, ranges, and table offsets.
Google Docs uses character indexes to position and format content, and tables make that indexing even trickier. I wanted to write document components without having to think about those offsets every time.
Install from GitHub (not on npm yet):
npm install github:janosbreuer/react-gdoc
Style your doc with Tailwind-like classes
Familiar utilities such as font-bold, text-blue-800, or mb-4 map onto Google Docs styles. That's handy if you or an AI coding agent already think in that vocabulary. It's a supported subset, not your full Tailwind config.
The result is a real Google Doc that you can open, share, and continue editing.
Tables from React components
You can build tables using JSX components, much like in HTML. Generate rows from your application data using .map(), apply formatting, and let react-gdoc handle the tricky Google Docs table indexes.
The result is a native, editable Google Docs table.
Preview without calling the Docs API
In the cloned repository, you can iterate on a TSX template in the browser with Vite hot reload:
npm run preview -- example.tsx
The preview is an HTML approximation of the final Google Doc. When you're ready, the same file can go to a real Google Doc through the CLI or renderDocument().
It's still an early library. Headings, paragraphs, lists, tables, named styles, and document creation and updates work. Images, equations, footnotes, and nested tables aren't supported yet.
I'm interested in feedback, especially on what's still missing before this would be something you'd actually use.
GitHub: janosbreuer/react-gdoc
Top comments (2)
This is really interesting 😸
I like the idea of keeping document templates inside the TypeScript codebase instead of splitting them between Google Docs and Apps Script.
The part that stood out to me most is hiding all the character indexes, ranges, and table offsets behind React components. That feels like a much nicer abstraction than making every document feature deal with the Docs API directly.
And having a local preview before touching the API is a really nice DX touch too.
Starred the repo too ⭐ Nice project! 🚀
Thanks! Glad you like the approach. And thanks for starring the repo! :)