Views by Hypercode

Mit Views Free kannst du Websites in bis zu drei gleichzeitig aktiven Viewports vergleichen, interaktiv testen und Screenshots teilen. Du kannst beliebig viele eigene Viewports speichern; für das Limit zählen nur die aktiven. Bei Foldables zählt jedes Display einzeln. Möchtest du einen anderen Viewport aktivieren, deaktiviere zuerst einen der bisherigen in den Einstellungen.

In Views Free teilen sich Live Reload und Auto Reload zehn Minuten pro Woche. Das Kontingent gilt pro Gerät und wird jeden Montag erneuert. Es zählt nur die aktive Nutzung: eine bestehende Live-Reload-Verbindung oder laufendes Auto Reload auf Home, während Views im Vordergrund ist. Nutzt du beides gleichzeitig, wird die Zeit nicht doppelt gezählt. Screenshots aus Free enthalten ein Views-Badge.

Views Pro schaltet unbegrenzt viele aktive Viewports, unbegrenztes Live Reload und Auto Reload sowie Screenshots ohne Badge frei. Pro ist ein einmaliger In-App-Kauf ohne Abo. Den aktuellen Preis findest du direkt in der App. Einen bestehenden Kauf kannst du dort über Kauf wiederherstellen erneut aktivieren.

Die kostenlose Views CLI verbindet deinen Mac oder PC mit Views auf deinem iPhone oder iPad. Du brauchst Node.js 20 oder neuer, beide Geräte im selben lokalen Netzwerk und aktiviertes Live Reload in Views. Dafür stehen dir das wöchentliche Free-Kontingent oder Views Pro zur Verfügung.

Verbindung herstellen: Starte den Verbindungs­dienst in einem Terminal und lass ihn laufen:

npx @hypercodestudio/views-cli start

Scanne den QR-Code mit der Kamera deines iPhones oder iPads und bestätige in Views mit Verbinden. Alternativ findest du den Scanner unter Einstellungen → Automation → Live Reload über Views CLI → Kamera öffnen. Nach dem Verbinden zeigt Views zunächst die Verbindungs­seite der CLI.

Website öffnen und Live Reload starten: Starte deinen Entwicklungs­server separat. Öffne ein zweites Terminal, wechsle in dein Webprojekt und führe diese Befehle aus:

cd /pfad/zu/deinem-webprojekt
npx @hypercodestudio/views-cli open --url http://your-computer.local:5173/
npx @hypercodestudio/views-cli watch

Ersetze Pfad und Beispiel-URL durch die Angaben deines Projekts. Die Website muss vom iPhone oder iPad erreichbar sein: Nutze den .local-Namen oder die lokale IP-Adresse deines Computers statt localhost und gib deinen Entwicklungs­server im lokalen Netzwerk frei.

Lass start und watch weiterlaufen und Views im Vordergrund geöffnet. start hält die Verbindung bereit; watch beobachtet das Projekt und löst bei Datei­änderungen ein Neuladen aus. Auto Reload ist eine separate Funktion der App, die Vorschauen in einem festen Zeit­intervall aktualisiert.

Views direkt steuern: In einem weiteren Terminal kannst du diese Befehle aus jedem Verzeichnis ausführen:

npx @hypercodestudio/views-cli reload
npx @hypercodestudio/views-cli open --viewport "iPhone 18 Pro"
npx @hypercodestudio/views-cli home
npx @hypercodestudio/views-cli pair
npx @hypercodestudio/views-cli status

reload lädt die aktuelle Website und die aktiven Vorschauen neu. open --viewport öffnet einen bestimmten Viewport; mit --url kannst du gleichzeitig die Website wechseln. home führt zurück zur Übersicht, pair zeigt den QR-Code erneut und status hilft beim Prüfen der Verbindung. Wenn dein Build-Prozess bereits reload aufruft, brauchst du keinen zusätzlichen Watcher.

Unter Einstellungen → Automation → Live Reload über Views CLI kannst du über das Markdown-Symbol oben rechts die Anweisungen als Markdown teilen. Die Markdown-Datei enthält eine Anleitung für KI-Agenten und die in deiner App verfügbaren Viewport-Namen.

In Apples App Kurzbefehle kannst du Views mit persönlichen Automationen, Widgets, Siri und anderen Apps verbinden. Erstelle einen Kurzbefehl und suche beim Hinzufügen einer Aktion nach Views. Diese Aktionen stehen bereit:

• URL in Views öffnen: Öffnet eine Website in der Übersicht.
• Viewport in Views öffnen: Öffnet einen ausgewählten Viewport mit der aktuellen Website oder einer optionalen neuen URL.
• Views neu laden: Aktualisiert die aktuelle Website und alle aktiven Vorschauen.

Direkt aus Views öffnest du die App Kurzbefehle über Einstellungen → Automation → Kurzbefehle → Kurzbefehle öffnen.

Soll dir ein KI-Agent beim Erstellen eines Kurzbefehls helfen, der Views über einen Link steuert? Unter Einstellungen → Automation → URL-Scheme findest du über das Markdown-Symbol oben rechts die passende Markdown-Dokumentation. Teile sie mit dem Agenten: Sie beschreibt die unterstützten Links, ihre Parameter und die verfügbaren Viewports für eine Aktion zum Öffnen von URLs.

Mit dem URL-Scheme views:// kannst du Views aus anderen Apps, Launchern, Websites oder Automationen heraus öffnen. Die wichtigsten Aufrufe sind:

• views://open öffnet die Übersicht und behält die aktuelle Website bei.
• views://open?url=https%3A%2F%2Fexample.com%2F öffnet eine Website in der Übersicht.
• views://open?viewport=iPhone%2018%20Pro öffnet die aktuelle Website im genannten Viewport.
• views://reload lädt die aktuelle Website und alle aktiven Vorschauen neu.

Du kannst Website und Viewport auch in einem Link kombinieren:

views://open?url=https%3A%2F%2Fexample.com%2F&viewport=iPhone%2018%20Pro

Die Website muss HTTP oder HTTPS verwenden. Kodiere die Parameter­werte für die URL, zum Beispiel Leerzeichen als %20. Am einfachsten geht das mit dem URL-Generator unter Einstellungen → Automation → URL-Scheme: Website-URL eingeben, Viewport auswählen und den Link kopieren oder direkt öffnen. Viewport-Namen können aus dem Geräte­katalog oder aus deinen gespeicherten eigenen Viewports stammen.

Verwende views://reload genau in dieser Form, ohne Parameter oder abschließenden Schrägstrich.

Für KI-Agenten kannst du auf derselben Seite über das Markdown-Symbol oben rechts die Anweisungen als Markdown teilen. Die Markdown-Dokumentation enthält die unterstützten Aufrufe, Regeln zur URL-Kodierung und eine Liste deiner verfügbaren Viewports samt Größen. Gib sie deinem Agenten als Grundlage für Links und Automationen.