Hew Studio

A browser-based visual programming environment for the Hew actor language. Build actor programs by dragging nodes onto a canvas, connecting them with edges, editing code inline, and running programs instantly.

Try it live at studio.hew.run

Features

• Visual canvas — Drag-and-drop actor, supervisor, function, main, struct, enum, wire, trait, and const nodes
• Live code generation — See valid Hew source code update in real time as you build
• One-click execution — Compile and run programs via the Hew playground API
• Syntax highlighting — Tree-sitter powered highlighting in the code preview panel
• Properties editor — Edit fields, handlers, parameters, and bodies inline
• Built-in examples — Hello World, Counter, Fibonacci Workers, Supervised Counter, Chat System
• Mobile support — Responsive layout with tap-to-add on touch devices

Quick Start

npm install
npm run dev

Open localhost:5173 in your browser.

Node Types

Node	Color	Purpose
Actor	Indigo	Message-handling actor with fields and receive handlers
Supervisor	Amber	Supervision tree with restart strategy and child actors
Function	Teal	Helper functions callable from actors or main
Main	Green	Program entry point — one per program
Type / Struct	Rose	Struct type definitions with named fields
Enum	Purple	Enum types with simple, tuple, or struct variants
Wire	Orange	Protocol serialization types with field numbering
Trait	Cyan	Trait / interface definitions with function signatures
Const	Slate	Top-level constant declarations

How It Works

1. Add nodes from the sidebar (drag or tap)
2. Connect nodes with edges to define relationships (spawn, supervise, uses)
3. Edit node properties in the right panel
4. View the generated Hew code in the bottom panel
5. Click Run (or Ctrl+Enter) to compile and execute

Development

npm run dev        # Dev server
npm run build      # Production build
npm run lint       # ESLint
npx vitest run     # Run tests

Tech Stack

• React 19 + Vite
• React Flow (xyflow) — node-based visual editor
• Tailwind CSS — styling
• web-tree-sitter — syntax highlighting
• Lucide — icons

License

Apache 2.0 — see LICENSE.