Studio de widgets

Le Studio de widgets est l’endroit où vous écrivez, prévisualisez et publiez un widget. Pour y accéder, ouvrez l’un de vos widgets depuis Mon profil et choisissez Modifier. Il nécessite un navigateur d’ordinateur.

Disposition

Zone	À quoi elle sert
Onglet IA	Décrivez ce que vous voulez et laissez l’IA écrire ou modifier le code. Expérimental. Avec l’abonnement Gratuit, il est soumis à un quota d’IA mensuel.
Onglet Code	L’éditeur de code, avec l’autocomplétion pour React, la bibliothèque Blotch, vos entrées et vos images, et un soulignement rouge sous les erreurs de type.
Sortie	Sous l’éditeur. Consultez Sortie.
Aperçu	À droite. Affiche votre widget, redessiné quelques secondes après que vous avez cessé de taper. Choisissez une Taille d’aperçu, ou faites glisser les bords de l’aperçu pour essayer n’importe quelle taille. Le menu Bordure permet d’essayer les bordures que les gens peuvent mettre autour.

La barre d’outils affiche la dernière version que vous avez publiée, Modifications non publiées si vous avez enregistré depuis, et Publier. Une jauge indique quelle part de la longueur maximale du code d’un widget vous avez utilisée.

Menus

Menu	Élément	Rôle
Fichier	Enregistrer	Enregistre votre code et vos Entrées publiques. Ctrl+S (⌘S sur Mac).
	Publier…	Diffuse votre dernier enregistrement. Consultez Publier et diffuser des versions.
	Historique des versions…	Chaque enregistrement, avec ce qui a changé. Restaurer en charge un dans l’éditeur.
	Configuration du widget	Nom, description, icône, catégorie et visibilité. Consultez Paramètres du widget.
	Entrées	Entrées publiques, Entrées privées et intégrations. Consultez Types d’entrées.
	Ressources	Vos images téléversées. Consultez Ajouter vos propres images.
	Supprimer	Supprime le widget. N’apparaît que tant que personne ne l’a installé.
Modifier	Insérer une icône…	Trouve une icône et ajoute le code qui la dessine. Ctrl+Maj+. (⌘⇧. sur Mac).
	Basculer le thème de l’aperçu	Fait passer l’aperçu du thème clair au thème sombre, et inversement.
	Mettre en forme	Remet de l’ordre dans la présentation de votre code.
	Annuler les modifications	Abandonne tout ce que vous n’avez pas enregistré.

Sortie

Le panneau sous l’éditeur comporte trois onglets :

• Sortie affiche ce que votre widget journalise avec console.log, console.warn et console.error, ainsi que toute erreur qui l’arrête. Choisissez Corriger avec l’IA à côté d’une erreur pour obtenir une proposition de correction. Les autres méthodes de console, comme console.table, ne sont pas disponibles.
• Typages affiche les définitions de types que l’éditeur charge pour les paquets que vous importez.
• Réseau affiche chaque requête de votre widget et sa réponse. Choisissez Créer les définitions de types à côté d’une réponse pour copier un type TypeScript qui lui correspond.

Effacer les journaux vide l’onglet actuel. Le cadenas active ou désactive le défilement automatique.

Votre code

• Votre widget est le composant nommé Widget, ou l’export par défaut du fichier :

  export const Widget = () => {
    // ...
  };

• Écrivez en TypeScript ou en JavaScript. Les erreurs de type sont soulignées, mais n’empêchent ni l’affichage ni la publication de votre widget.

• Stylisez avec Tailwind CSS. Les seules couleurs sont foreground et background. Consultez Comment fonctionnent les widgets.

• Importez depuis la bibliothèque Blotch avec ~lib/, et depuis npm avec une version fixée. Consultez Utiliser des paquets npm.