Widget-Studio

Im Widget-Studio schreiben Sie ein Widget, sehen es sich in der Vorschau an und veröffentlichen es. Öffnen Sie dazu eines Ihrer Widgets unter Mein Profil und wählen Sie Bearbeiten. Das Widget-Studio braucht einen Desktop-Browser.

Aufbau

Bereich	Wofür er da ist
Tab KI	Beschreiben Sie, was Sie möchten, und lassen Sie die KI den Code schreiben oder ändern. Experimentell. Im kostenlosen Tarif gilt ein monatliches KI-Kontingent.
Tab Code	Der Code-Editor, mit Autovervollständigung für React, die Blotch-Bibliothek, Ihre Eingaben und Ihre Bilder, und mit roten Unterstreichungen für Typfehler.
Ausgabe	Unter dem Editor. Siehe Ausgabe.
Vorschau	Rechts. Zeigt Ihr Widget und zeichnet es ein paar Sekunden, nachdem Sie aufhören zu tippen, neu. Wählen Sie eine Vorschaugröße oder ziehen Sie an den Rändern der Vorschau, um eine beliebige Größe auszuprobieren. Im Menü Rahmen probieren Sie die Umrandungen aus, die man um das Widget legen kann.

Die Symbolleiste zeigt die zuletzt veröffentlichte Version, Unveröffentlichte Änderungen, wenn Sie seitdem gespeichert haben, und Veröffentlichen. Eine Anzeige zeigt, wie viel von der zulässigen Länge für den Code eines Widgets Sie schon verbraucht haben.

Menüs

Menü	Eintrag	Was er bewirkt
Datei	Speichern	Speichert Ihren Code und Ihre Öffentlichen Eingaben. Ctrl+S (auf einem Mac ⌘S).
	Veröffentlichen…	Gibt Ihren zuletzt gespeicherten Stand heraus. Siehe Veröffentlichen und Versionen herausgeben.
	Versionsverlauf…	Jeder gespeicherte Stand mit seinen Änderungen. Wiederherstellen lädt einen davon in den Editor.
	Widget-Konfiguration	Name, Beschreibung, Symbol, Kategorie und Sichtbarkeit. Siehe Widget-Einstellungen.
	Eingaben	Öffentliche Eingaben, Private Eingaben und Integrationen. Siehe Eingabetypen.
	Ressourcen	Ihre hochgeladenen Bilder. Siehe Eigene Bilder hinzufügen.
	Löschen	Löscht das Widget. Wird nur angezeigt, solange niemand es installiert hat.
Bearbeiten	Symbol einfügen…	Sucht ein Symbol und fügt den Code ein, der es zeichnet. Ctrl+Shift+. (auf einem Mac ⌘⇧.).
	Vorschau-Design wechseln	Schaltet die Vorschau zwischen hellem und dunklem Design um.
	Formatieren	Räumt das Layout Ihres Codes auf.
	Änderungen verwerfen	Verwirft alles, was Sie nicht gespeichert haben.

Ausgabe

Der Bereich unter dem Editor hat drei Tabs:

• Ausgabe zeigt, was Ihr Widget mit console.log, console.warn und console.error protokolliert, und jeden Fehler, an dem es anhält. Wählen Sie neben einem Fehler Mit KI beheben, um einen Lösungsvorschlag zu bekommen. Andere Methoden von console, etwa console.table, sind nicht verfügbar.
• Typdefinitionen zeigt die Typdefinitionen, die der Editor für die importierten Pakete lädt.
• Netzwerk zeigt jede Anfrage Ihres Widgets und die Antwort darauf. Wählen Sie neben einer Antwort Typdefinitionen erstellen, um einen TypeScript-Typ dafür zu kopieren.

Protokolle löschen leert den aktuellen Tab. Das Schloss schaltet das automatische Scrollen ein und aus.

Ihr Code

• Ihr Widget ist die Komponente namens Widget oder der Standardexport der Datei:

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

• Schreiben Sie TypeScript oder JavaScript. Typfehler werden unterstrichen, halten Ihr Widget aber weder vom Zeichnen noch vom Veröffentlichen ab.

• Gestalten Sie mit Tailwind CSS. Die einzigen Farben sind foreground und background. Siehe Wie Widgets laufen.

• Importieren Sie aus der Blotch-Bibliothek mit ~lib/ und aus npm mit festgelegter Version. Siehe npm-Pakete verwenden.