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

Описание и применение

Библиотека react‑gdoc позволяет писать шаблоны документов в виде React‑компонентов, генерировать из них редактируемые Google Docs и упрощать поддержку контрактов.

Задача

Maintaining contract templates split between Google Docs and Google Apps Script was hard to keep in sync and outside the codebase.

Результат

The library allows developers to keep document templates in the codebase, generate real Google Docs, and let end users edit the result in Google Docs, simplifying maintenance and enabling Tailwind‑like styling.

Рабочий процесс

• Write template as React components with conditional rendering via TypeScript.
• Provide Google authentication to the app.
• Use react‑gdoc to convert the component tree into Google Docs API batchUpdate requests, handling indexes, ranges, and table offsets.
• Generate the Google Doc and open it for further editing by users.
• Optionally preview the template in the browser with Vite hot reload using npm run preview -- example.tsx.
• Render the final document to Google Docs via CLI or renderDocument() when ready.

Доказательства

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.

Источник

So I built react-gdoc: an open-source TypeScript library that generates editable Google Docs from React/JSX components.

Источник

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.

Источник

In the cloned repository, you can iterate on a TSX template in the browser with Vite hot reload: npm run preview -- example.tsx.

Источник