38% of commits outside business hours. Peak productivity: 1–4 PM with a second spike at 9 PM.
Click-to-select, drag-to-move, style inspector, property editing with type-aware inputs. Real-time preview with data-uniq-id based identification. 12 features.
Insert, delete, duplicate, wrap elements. Update styles, props, text. Edit conditionals and map iterations. Format-preserving output via Recast. 10 features.
Design mode (single component) and Board mode (Excalidraw-style canvas with zoom/pan, multiple instances, arrows with labels, text stickers). 8 features.
Same-origin iframe proxy with two-layer path rewriting. HMR via WebSocket. Framework auto-detection. No project config changes needed. 6 features.
Claude, OpenAI, OpenCode integration. Component scaffolding, style suggestions, test generation, auto-fix. Streaming with tool calling. 8 features.
Dual strategy: reverse operations for insert/delete (fast), file snapshots for style changes (reliable). Batch operations for compound edits. 4 features.
5 independent webview panels. Shared UI with SaaS. MCP server (20 tools). Keyboard routing. Theme sync. Published on VS Code Marketplace. 10 features.
Browser-based VS Code with live preview panel, Go to Code/Visual navigation, theme sync, user menu. 5 features.
CRUD, file tree, multi-workspace, role-based access (admin/editor/viewer), project sharing with invites, GitHub App integration. 8 features.
Push/pull/merge from AI chat. Auto-generated commit messages. GitHub App credentials. Branch management. 4 features.
Custom parser (1,366 lines). Responsive prefixes, state variants, arbitrary values, color opacity, class conflict resolution. JIT awareness. 7 features.
Dev server logs with filtering. Runtime error detection from iframe. Auto-Fix with AI. Test generation and runner with streaming output. 8 features.
Canvas comments on elements, threaded discussions, comment resolution. 3 features.
ArgoCD GitOps, SOPS encryption, Kyverno policies, auto-cleanup. 6 namespaces. GitHub Actions CI/CD. Pre-commit hooks. 8 features.
Every commit passed through:
The progression Opus 4.5 → 4.6 → Sonnet 4.6 reflects deliberate experimentation with model capabilities and costs.
| Product | Visual Editor | Edits Real Code | Live Preview | VS Code | AI | Local Dev | Team |
|---|---|---|---|---|---|---|---|
| HyperIDE | ✓ | ✓ AST | ✓ HMR | ✓ | ✓ | ✓ | 1 dev |
| Pencil | ✓ Design | AI gen | ✗ | ✓ | ✓ | Design only | 5+ eng |
| Tempo Labs | ✓ | AI gen | ✓ | Plugin | ✓ $$ | Cloud-first | 10+ eng (YC) |
| Figma | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | 5 eng |
| Builder.io | ✓ | Partial | ✓ | ✗ | ✓ | ✗ | 10+ eng |
| Plasmic | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | 8 eng |
| v0 (Vercel) | ✗ | ✓ | ✓ | ✗ | ✓ | ✓ | 5+ eng |
| Cursor | ✗ | ✓ | ✗ | Fork | ✓ | ✓ | 10+ eng |
| Bolt (StackBlitz) | ✗ | ✓ | ✓ | ✗ | ✓ | ✗ | 5+ eng |
| HyperIDE | Pencil | Tempo | |
|---|---|---|---|
| What you edit | Actual .tsx source files |
.pen JSON design files |
Cloud canvas → generated code |
| How code changes | AST manipulation (Babel + Recast), format-preserving | AI generates code from design via Cmd+K prompts | AI generates React code (credit-based) |
| Live preview | Same-origin iframe proxy, actual dev server with HMR | Static design canvas (Figma-like) | Cloud-rendered preview |
| Undo/Redo | File snapshots + reverse AST operations | Design-level undo only | Version-based |
| AI dependency | Optional — visual editing works without AI | Required for code gen (depends on Claude Code) | Required ($30/mo for 150 credits) |
| Framework support | Any React framework (Vite, Next.js, Remix, etc.) | React, Vue, Svelte, HTML (AI prompt-dependent) | React only |
| Self-hosted / SaaS | Both (K8s deployment + VS Code extension) | VS Code extension only | Cloud SaaS only (YC-funded) |
The fundamental difference: Pencil and Tempo are design tools that generate code. HyperIDE is a code editor with a visual interface — it reads and writes your actual source files via AST, shows your running components with HMR, and doesn't require AI credits for visual editing.
Integration complexity: iframe proxy + WebSocket HMR + Vite/Next.js compatibility = hundreds of edge cases.
Security hardening: 29 CodeQL findings + 28 CVE patches classified as fixes.
AI code quality: Copilot-suggested improvements counted as fixes.
VS Code extension: 5 webview panels × 2 platforms = exponential edge cases.
Ship and polish: A developer who doesn't ship and forget — they ship and perfect.
In 121 days, a single developer built a production-grade visual IDE with a custom canvas engine, same-origin iframe proxy, AST code generation, multi-provider AI integration, 5-panel VS Code extension, Kubernetes deployment, and published it to the Marketplace — with 1,357 tests and an 8.1/10 code quality score.