I built a React library to generate editable Google Docs with JSX

Janos Breuer — Fri, 16 Oct 2026 08:25:44 +0000

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

DEV Community: Janos Breuer

I built a React library to generate editable Google Docs with JSX

What it solves

Style your doc with Tailwind-like classes

Tables from React components

Preview without calling the Docs API