Embarquer des widgets Grist dans Docs

Ressources et astuces
1

Bonjour,

J’ai testé l’intégration de widgets Grist directement dans des documents Docs (La Suite Numérique) via des iframes. Ça fonctionne, c’est assez simple à mettre en place, et le résultat me semble suffisamment intéressant pour le partager ici.

Ce que ça donne

Un document Docs dans lequel on insère un ou plusieurs widgets Grist interactifs, au milieu du texte. Pas des captures d’écran statiques : les vraies vues Grist, navigables, filtrables, avec lesquelles on peut interagir.

Exemple ici avec une story map (scrollytelling + carte interactive) :

Capture d'écran 2026-02-11 193912
Capture d'écran 2026-02-11 1939121920×885 67 KB

Comment ça marche

Côté Docs : un custom block BlockNote

Docs utilise BlockNote comme éditeur. Il permet de créer des blocs personnalisés, comme c’est déjà le cas pour les PDF, les callouts ou les séparateurs.

J’ai ajouté un bloc grist-widget qui est simplement une iframe configurable :

export const GristWidgetBlock = createReactBlockSpec({
  type: "grist-widget",
  propSchema: {
    url: { default: "" },
    width: { default: "100%", values: ["50%", "66%", "100%"] },
    displayMode: { default: "frameless", values: ["normal", "noheader", "frameless"] },
  },
  content: "none",
});

L’utilisateur colle une URL, choisit la largeur et le mode d’affichage, valide, c’est tout :

Capture d'écran 2026-02-11 213222
Capture d'écran 2026-02-11 2132222559×1182 125 KB

Côté Grist : les paramètres d’embed existants

Grist supporte déjà l’embedding avec des paramètres URL :

  • ?embed=true → lecture seule, sans header ni sidebar
  • ?style=singlePage → éditable selon les ACLs, sans chrome
  • ?themeAppearance=light|dark → adaptation au thème

Rien à modifier côté Grist sur le code, tout est déjà là.

Le seul point technique : le CORS

Pour que l’iframe Docs puisse charger du contenu Grist, il faut que l’instance Grist autorise le domaine Docs dans ses headers :

  • Content-Security-Policy: frame-ancestors incluant l’origine Docs
  • Ou X-Frame-Options adapté

Dans mon cas, les deux instances tournent sur le même réseau, donc c’est une config triviale. Pour les instances gérées de La Suite, ça reviendrait à ce que Grist et Docs se fassent mutuellement confiance — ce qui semble logique puisqu’ils font partie de la même suite.

Pourquoi c’est intéressant

Les documents deviennent vivants. Un rapport de suivi avec des tableaux Grist qui se mettent à jour tout seuls. Une note d’analyse avec une carte interactive. Un compte-rendu avec le suivi des actions embarqué. Plus besoin de faire des allers-retours entre les deux outils ni de copier-coller des données qui seront périmées le lendemain.

Grist et Docs sont déjà dans la même suite. Permettre à l’un d’afficher l’autre dans une iframe, c’est une petite brique technique pour un gros gain d’usage.

C’est peu de code. Côté Docs, c’est un custom block BlockNote — un fichier. Côté Grist, c’est une ligne de config CORS. L’essentiel du travail est déjà fait par les paramètres d’embed que Grist propose.

Les forks pour ceux que ça intéresse

Si les équipes Grist et Docs trouvent ça pertinent, curieux d’avoir vos retours :wave:

3 « J'aime »