Artifacts

Artifacts sind interaktive Seiten, die du direkt in Orbitype erstellst. Sie eignen sich ideal für öffentliche Formulare, Preisrechner, interne Tools, Dashboards und individuelle Datenoberflächen.

Was ein Artifact enthält

• Titel: eindeutiger Name deines Artifacts

• Beschreibung: Kontext für Team und Nutzer

• HTML: die UI im Live-Preview

• Actions: Backend-Funktionen aus der UI aufrufbar

• Sichtbarkeit: private oder public

Warum Artifacts nutzen

• Schnelle Umsetzung für individuelle Seiten und Rechner

• Direkte Verbindung zur Orbitype-Runtime

• Einfaches Teilen und Einbetten

• Keine zusätzliche Hosting-Konfiguration für Standardfälle

Schritt für Schritt

1. Öffne Artifacts in der Sidebar.
2. Klicke auf New artifact.
3. Füge Titel und Beschreibung hinzu.
4. Baue die Oberfläche im HTML-Editor.
5. Teste das Verhalten im Live-Preview.
6. Speichere und verbessere iterativ.

Typische Beispiele

• Lead-Formular mit Validierung
• ROI- oder Preisrechner
• Kampagnen-Performance-Rechner
• Interaktiver Onboarding-Check

Editor-Tipps

• Ein Artifact sollte eine klare Hauptaufgabe haben
• Nutze verständliche Labels und leere Zustände
• Wenn extern geteilt: mobile-first gestalten

Nutze Actions, wenn dein Formular oder Rechner sichere serverseitige Logik benötigt (Datenbankabfragen, APIs, AI-Aufrufe, Enrichment usw.).

Action aus dem Artifact aufrufen

const result = await Orbi.action("load_kpis", { range: "30d" })
console.log(result)

Action-Modell

• name: eindeutige Kennung für Orbi.action(...)
• code: serverseitige Funktionslogik
• input: Payload aus der UI
• output: Ergebnis für das Rendering

Empfohlenes Output-Format

{
  "ok": true,
  "data": { ... },
  "error": null
}

Stabile Response-Strukturen vereinfachen Rendering und Fehlerbehandlung im Frontend.

Sichtbarkeit

• Private: nur im Workspace-Kontext zugänglich
• Public: über öffentlichen Link erreichbar

Sharing-Optionen

• Öffentliche Seiten-URL öffnen
• Embed-iframe-Snippet kopieren
• In externe Websites oder Dokus einbetten

Vor dem Umschalten auf public

• Kompletten Nutzerfluss testen
• Leere Zustände und Fehler prüfen
• Texte, Labels und Mobile-Layout prüfen
• Sicherstellen, dass keine internen Daten sichtbar sind

Best Practices

• Starte mit einem klaren Ergebnis pro Artifact
• Geschäftslogik in Actions, nicht in UI-Skripten
• Explizite Action-Namen verwenden (calculate_offer, submit_lead)
• Konsistente JSON-Strukturen zurückgeben
• Loading-, Empty- und Error-States sauber behandeln

Häufige Probleme

• Action nicht gefunden: prüfen, ob der Name exakt übereinstimmt.
• Keine Daten in der UI: prüfen, ob die Action die erwarteten JSON-Felder liefert.
• Runtime-Fehler: Input validieren und kritische Logik mit try/catch absichern.
• Public-Link funktioniert nicht: Sichtbarkeit auf public setzen.