Kodin Studio

A remote VPS IDE. Run on your server, access from any browser.

Stack

• React + Vite (frontend)
• Express + Socket.io (backend)
• Monaco Editor
• SSH via node-ssh
• Key pair auth system

Setup

npm install
npm run dev

• Frontend: http://localhost:5173
• Backend: http://localhost:8787

Production (VPS)

# On your VPS
npm ci
npm run build
NODE_ENV=production PORT=8787 node server/index.js

Then point your domain (e.g. kodin.yourdomain.com) at port 8787 via Nginx:

server {
    listen 80;
    server_name kodin.yourdomain.com;
    location / {
        proxy_pass http://localhost:8787;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

Authentication

Key Pair (recommended)

1. Open kodin.yourdomain.com
2. In the Key Pair tab, enter a label and click Generate
3. Copy the kdn_... key immediately (shown once)
4. Share that key with users who should have access
5. Users paste the key on the connect screen

SSH / VPS

Connect directly to any SSH server with password or private key.

Local

Open a local folder on the machine running the server.

Themes

• Dark (default)
• Light
• Midnight Blue
• Carbon (VS Code Dark+)
• Amber
• Solarized Dark
• Rosé Pine

Keyboard Shortcuts

Shortcut	Action
Ctrl+P	Command Palette
Ctrl+S	Save File
Ctrl+B	Toggle Sidebar
Ctrl+`	Toggle Terminal
Ctrl+Shift+F	Search in Files

File Operations

• Right-click any file or folder in the explorer for: New File, New Folder, Rename, Delete, Copy Path
• Click + / ⊕ buttons in the sidebar header to create at workspace root
• All operations call the backend API directly — no frontend-only mocks

Features

• ✅ Monaco editor (syntax, autocomplete, bracket pairs)
• ✅ File create / rename / delete (working)
• ✅ Multi-tab editor with dirty indicator
• ✅ Auto-save with 500ms debounce
• ✅ Terminal (socket-based, command history, Ctrl+L to clear)
• ✅ Git: branch, staged/unstaged, diff viewer, commit
• ✅ Full-text workspace search
• ✅ Command palette
• ✅ 7 themes (proper light/dark/custom)
• ✅ Key pair auth + SSH auth
• ✅ Real-time collaboration events via Socket.io
• ✅ Active resource monitor