Ajoute des bibliothèques via CDN (jsDelivr, unpkg). Elles seront automatiquement incluses dans ton widget.
Quand ton widget appelle une API externe (ex: OpenWeather, GitHub…), le navigateur bloque souvent la requête pour des raisons de sécurité : c'est le blocage CORS. Un proxy est un petit serveur intermédiaire qui fait la requête à ta place et te renvoie la réponse sans blocage.
PROXY_TOKEN, saisis-le ici. Sinon laisse vide.
Choisis un hébergeur ci-dessous : tous proposent un plan gratuit largement suffisant. Clique sur une vignette : les instructions détaillées s'affichent juste en-dessous.
👆 Clique sur une plateforme ci-dessus pour afficher ses instructions.
Un IDE complet dans ton navigateur pour créer des widgets Grist personnalisés, sans installer d'outils, directement dans ton document Grist.
Pour tous les utilisateurs Grist qui veulent étendre leurs documents avec des widgets sur mesure :
dashboards personnalisés, intégrations d'APIs externes, formulaires avancés, visualisations, outils métier...
| ▶ Preview | Lance / rafraîchit la prévisualisation |
| 💾 Sauvegarder | Enregistre le projet dans les options du widget Grist |
| 📦 Installer | Transforme le widget courant en widget autonome (consomme l'installation) |
| 📚 Templates | Ouvre la bibliothèque de templates prêts à l'emploi |
| 📦 Packages | Ajoute des bibliothèques externes (Chart.js, D3, etc.) via CDN |
| ⬇ Export | Télécharge ton projet en ZIP |
| ⬆ Import | Charge un projet depuis un fichier ZIP/JSON |
| 🔌 Proxy | Configure l'URL de ton proxy CORS (pour les appels API externes) |
| ☀️/🌙 | Bascule dark / light mode |
console.log de ton widget, avec filtres par niveauClique sur 📚 Templates et choisis par exemple "Record Viewer" (affiche les détails du record sélectionné).
Modifie script.js, style.css, index.html.
Le preview s'actualise automatiquement 600ms après chaque modification.
Clique sur une table dans la sidebar GRIST TABLES pour voir sa structure dans la console. Utilise grist.docApi.fetchTable('MaTable') dans ton code.
Appuie sur Ctrl+S ou clique sur 💾 Sauvegarder. Ton projet est stocké dans les options du widget Grist — il sera rechargé à chaque ouverture.
Quand tu es satisfait, clique sur 📦 Installer. Le widget Studio Pro devient ton widget final, prêt à être utilisé dans le document.
💡 Astuce : garde une copie de ton projet en ZIP (⬇ Export) avant d'installer, pour pouvoir revenir en arrière.
// En lecture seule
grist.ready({ requiredAccess: 'read table' });
// En lecture/écriture (pour modifier des records)
grist.ready({ requiredAccess: 'full' });
// Écouter le record sélectionné
grist.onRecord(record => {
console.log('Record:', record);
});
// Écouter tous les records de la table liée
grist.onRecords(records => {
console.log('Records:', records);
});
// Récupérer toute une table (format colonnaire)
const data = await grist.docApi.fetchTable('MaTable');
// → { id: [1,2,3], Name: ['A','B','C'], ... }
// Liste des tables du document
const tables = await grist.docApi.listTables();
// Ajouter un record
await grist.docApi.applyUserActions([
['AddRecord', 'MaTable', null, { Name: 'Alice', Age: 30 }]
]);
// Modifier un record
await grist.docApi.applyUserActions([
['UpdateRecord', 'MaTable', rowId, { Status: 'Done' }]
]);
// Supprimer un record
await grist.docApi.applyUserActions([
['RemoveRecord', 'MaTable', rowId]
]);
// Ajouts/mises à jour en masse
await grist.docApi.applyUserActions([
['BulkAddRecord', 'MaTable', [null, null],
{ Name: ['Bob', 'Carol'], Age: [25, 35] }]
]);
await grist.docApi.applyUserActions([
['AddTable', 'NouvelleTable', [
{ id: 'Name', type: 'Text' },
{ id: 'Count', type: 'Int' }
]]
]);
// Sauvegarder
await grist.setOptions({ myConfig: { ... } });
// Lire
const options = await grist.getOptions();
L'onglet 🌐 API dans le panneau droit te permet de tester des APIs externes avant de les intégrer dans ton widget.
Clique sur → Utiliser dans le code pour générer un snippet fetch() complet et l'insérer directement dans script.js. Le snippet utilise automatiquement ton proxy configuré.
https://api.github.com/users/octocat — API GitHubhttps://jsonplaceholder.typicode.com/posts — Données testhttps://api.openweathermap.org/data/2.5/weather?q=Paris&appid=YOUR_KEY — Météohttps://restcountries.com/v3.1/name/france — Données paysBeaucoup d'APIs refusent les requêtes venant d'autres domaines (CORS = Cross-Origin Resource Sharing). Le navigateur bloque alors la requête depuis ton widget.
Un proxy CORS est un petit serveur qui relaie ta requête : l'API parle au serveur (pas de problème CORS), et le serveur te répond en autorisant ton domaine.
Plutôt que d'utiliser un proxy public partagé (risqué, limité, instable), déploie le tien en 2 minutes sur la plateforme de ton choix. Tu gardes le contrôle total : coûts, sécurité, quotas, logs.
| ⚡ Cloudflare Workers | 100k req/jour gratuites | ⭐ Recommandé (ultra rapide, edge) |
| ▲ Vercel | 100 Go-h/mois | Simple, populaire |
| 🦕 Deno Deploy | 1M req/mois | Le plus généreux |
| 🟢 Netlify | 125k req/mois | Alternative à Vercel |
| 🟩 Node.js/Docker | Selon ton infra | Self-hosted (VPS, RPi) |
Tous les proxies incluent automatiquement :
X-Proxy-Token)ALLOWED_HOSTS, BLOCKED_HOSTS)📖 Voir la doc complète du proxy sur GitHub.
| Ctrl+S | Sauvegarder le projet dans Grist |
| Ctrl+Enter | Lancer / rafraîchir le preview |
| Esc | Fermer un modal |
| Ctrl+F | Rechercher |
| Ctrl+H | Rechercher et remplacer |
| Ctrl+D | Sélectionner l'occurrence suivante |
| Ctrl+/ | Commenter / décommenter |
| Alt+↑/↓ | Déplacer la ligne |
| Ctrl+Shift+K | Supprimer la ligne |
| F2 | Renommer le symbole |
| Ctrl+Space | Forcer l'auto-complétion |
| Ctrl+Shift+P | Palette de commandes Monaco |
Sur Mac, remplace Ctrl par Cmd (⌘).
Dans les options du widget Grist (grist.setOptions), au sein même de ton document. Chaque widget Studio Pro installé dans Grist a son propre projet.
Non, tant que tu as cliqué sur 💾 Sauvegarder. En plus, les paramètres du proxy sont aussi stockés en fallback dans localStorage de ton navigateur.
Le widget Studio Pro se remplace par ton widget final dans cet emplacement. Pour revenir en arrière, tu peux supprimer le widget et en réinstaller un nouveau.
Astuce : Exporte toujours ton projet en ZIP avant d'installer.
Ajoute simplement plusieurs widgets de type "Custom" pointant vers la même URL. Chacun aura son propre projet indépendant (options séparées).
Oui ! Le projet étant dans le document Grist, toute personne ayant accès au doc peut voir/modifier le widget. Pour partager entre documents, utilise Export/Import ZIP.
Clique sur 📦 Packages → tape le nom (ex: chart.js) → Ajouter. La lib est automatiquement injectée dans le preview et le widget final via CDN jsDelivr.
1. Vérifie si l'API supporte CORS nativement (header Access-Control-Allow-Origin).
2. Si non, déploie ton proxy : clique sur 🔌 Proxy → choisis Cloudflare Workers → suis les instructions.
⚠️ Ne stocke jamais de clé API secrète en clair dans ton widget (elle sera visible par tous ceux qui ont accès au document).
Solution : utilise un proxy avec PROXY_TOKEN qui injecte la clé côté serveur (envoie les secrets comme variables d'environnement dans Cloudflare/Vercel).
Clique sur ↻ dans le panneau de preview, ou utilise Ctrl+Enter. Vérifie aussi la console pour d'éventuelles erreurs JavaScript.
Le code est open-source (Apache 2.0) sur GitHub. Les PRs et issues sont les bienvenues !
Crée une nouvelle table directement dans ton document Grist. Elle apparaitra immédiatement dans le panneau gauche de Grist.