Hypen Studio

Hypen Studio is a full-featured, in-browser IDE for building Hypen applications. It combines a code editor, live preview, debugging tools, and device integration into a single workflow — so you can write, preview, and debug your app on Web, Android, and iOS without leaving the browser.

hypen studio

Studio opens at http://localhost:5173 by default.

Features at a Glance

Getting Started with Studio

In an Existing Project

If you already have a Hypen project (created with hypen init), just run:

cd my-app
hypen studio

From Scratch

Studio works with any Hypen project. Create one and launch Studio:

hypen init my-app
cd my-app
hypen studio

The Editor

Studio uses Monaco (the engine behind VS Code) for code editing. It supports:

• Syntax highlighting for .hypen, .ts, .tsx, .js, .json, .css, and .md files
• Multi-tab editing — open as many files as you need
• Language Server Protocol (LSP) — if @hypen-space/lsp is installed, you get completions, diagnostics, and hover info for .hypen files
• Auto-save — changes are saved and hot-reloaded automatically

Live Preview

The preview panel renders your entry component in real time. As you edit .hypen templates or .ts modules, changes appear immediately — no manual refresh needed.

The preview uses the same rendering pipeline as hypen dev, so what you see in Studio is exactly what your users will see in the browser.

File Browser

The file tree shows your full project structure. You can:

• Create new files and folders
• Rename files and folders
• Copy and paste files
• Delete files and folders

All changes are immediately saved to disk and trigger hot reload.

Debugging Tools

Studio's bottom panel provides four debugging views, accessible via tabs or keyboard shortcuts.

State Inspector

Shows the current state of your active module as a live JSON tree. Every time state changes — from an action, lifecycle hook, or two-way binding — the inspector updates instantly.

Action Log

Every action dispatched from your UI is logged with:

• Action name
• Timestamp
• Full payload

This makes it easy to verify that buttons, inputs, and other interactive elements are firing the right actions with the right data.

Console

Captures console.log, console.warn, and console.error output from your module code, categorized with timestamps. Useful for debugging action handlers and lifecycle hooks.

Timeline (Time-Travel Debugging)

The timeline records every state snapshot as your app runs. You can:

• Scrub through history using a slider to see the state at any point in time
• Preview past states — the live preview updates to show the UI as it appeared at that moment
• Go Live — click the "Go Live" button to return to the current state and resume normal operation

This is especially powerful for debugging complex state flows — you can step through exactly how state evolved across a sequence of actions.

Integrated Terminal

Studio includes a full PTY terminal. Run any shell command — install packages, run tests, check git status — without switching windows.

Open it with Cmd/Ctrl+T or from the bottom panel tabs.

Keyboard Shortcuts

Preview on Android and iOS

Studio integrates directly with Hypen's native device runners. Use the --studio flag with hypen run to edit in the browser and preview on a device simultaneously:

# Edit in Studio, preview on Android
hypen run android --studio

# Edit in Studio, preview on iOS Simulator
hypen run ios --studio

This starts the device runner (WebSocket dev server on port 3000) and opens Studio (on port 5173) side by side. Changes you make in Studio are hot-reloaded on the connected device in real time.

You can also run all three at once — web preview in Studio, plus a device:

hypen run android --studio

The Studio preview shows the web rendering while the physical device or emulator shows the native rendering, both updating live as you edit.

Requirements for Device Preview

• Android: adb (Android SDK platform-tools). Works with emulators and physical devices via USB.
• iOS: Xcode command-line tools (xcrun). Runs on iOS Simulator. Studio boots the simulator automatically if needed.

Command-Line Options

hypen studio [options]

Requirements

• Bun runtime (Studio's server is built with Bun)
• A Hypen project with hypen.config.ts and a src/components/ directory

See Also

• CLI Reference — All CLI commands
• Configuration — Project configuration options
• Your First App — Build a counter and preview it in Studio
• LSP — Language server for editor intelligence