{"id":50218567,"url":"https://github.com/regalf/vistudio","last_synced_at":"2026-05-29T00:00:38.706Z","repository":{"id":360393839,"uuid":"1249930364","full_name":"regalf/vistudio","owner":"regalf","description":"A lightweight, extensible code editor built with Electron, React, TypeScript, and Monaco Editor","archived":false,"fork":false,"pushed_at":"2026-05-26T09:07:48.000Z","size":1135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-26T09:10:42.898Z","etag":null,"topics":["editor","electron","ide","monaco-editor","react","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/regalf/vistudio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/regalf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-26T06:45:09.000Z","updated_at":"2026-05-26T09:07:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/regalf/vistudio","commit_stats":null,"previous_names":["regalf/vistudio"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/regalf/vistudio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regalf%2Fvistudio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regalf%2Fvistudio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regalf%2Fvistudio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regalf%2Fvistudio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/regalf","download_url":"https://codeload.github.com/regalf/vistudio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regalf%2Fvistudio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33517124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T03:12:49.672Z","status":"ssl_error","status_checked_at":"2026-05-26T03:12:47.976Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","electron","ide","monaco-editor","react","typescript"],"created_at":"2026-05-26T11:00:16.810Z","updated_at":"2026-05-26T11:00:25.567Z","avatar_url":"https://github.com/regalf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ViStudio\n\n\u003e Part of the **[ViTools](https://github.com/regalf/ViTools)** suite — a collection of Linux desktop development tools built with AI-assisted coding.\n\n\u003e A lightweight, extensible code editor built with Electron, React, TypeScript, and Monaco Editor.\n\n## About\n\nViStudio is an IDE powered by **Monaco Editor** — the same engine behind VS Code — with an integrated terminal, file explorer, multi-tab editing, global search, and a sandboxed JavaScript extension system.\n\nBuilt as part of the [ViTools](https://github.com/regalf/ViTools) suite.\n\n---\n\n## Quick Start\n\n### Requirements\n\n- **Linux** (Arch Linux recommended)\n- **Electron 42** (system-installed: `pacman -S electron`)\n- **Node.js 18+**\n- **npm**\n\n### Run\n\n```bash\ngit clone https://github.com/regalf/vistudio.git\ncd vistudio\nnpm install\n./run.sh\n```\n\nLaunches a Vite dev server on port 5173 and opens Electron with hot-reload.\n\n### Build Executable\n\n```bash\nnpm run dist         # Package into AppImage + directory\nnpm run dist:dir     # Package into directory only (faster)\nnpm run dist:appimage # AppImage only\n```\n\nOutput goes to `release/` — a standalone Linux executable (no Node.js or npm required).\n\n### Commands\n\n```bash\nnpm run build        # TypeScript check + Vite build\nnpm run typecheck    # TypeScript type checking only\nnpm run start        # Launch ViStudio (development)\n```\n\n---\n\n## Features\n\n- **Monaco Editor** — Full syntax highlighting, bracket pair colorization, minimap, IntelliSense\n- **Multi-tab editing** — Open, close, reorder, and manage multiple files\n- **Integrated terminal** — xterm.js with bash shell\n- **File explorer** — Tree browser with drag \u0026 drop\n- **Command palette** — `Ctrl+Shift+P` fuzzy-search for commands, `Ctrl+P` for files\n- **Global search** — Search and replace across all files with regex\n- **Extension system** — Sandboxed JavaScript extensions with a rich API\n- **Custom themes** — Dark and light themes with full CSS variable coverage\n- **Project templates** — Create projects from extension-registered templates\n- **Settings panel** — Visual editor with Apply/Cancel workflow\n- **Git integration** — Source control panel (status, diff, commit)\n- **File icons** — 133+ SVG icons for file type identification\n\n---\n\n## Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl+N` | New file |\n| `Ctrl+O` | Open file |\n| `Ctrl+Shift+O` | Open folder |\n| `Ctrl+S` | Save |\n| `Ctrl+Shift+S` | Save as |\n| `Ctrl+B` | Toggle sidebar |\n| `` Ctrl+` `` | Toggle terminal |\n| `Ctrl+Shift+F` | Search in files |\n| `Ctrl+Shift+P` | Command palette |\n| `Ctrl+P` | Quick open file |\n| `Ctrl+,` | Settings |\n| `Escape` | Close modals |\n\n---\n\n## Extension System\n\nExtensions are **plain JavaScript files** — no build tools, no npm, no TypeScript compilation required. They run in a sandboxed environment with no access to `require()`, `process`, `window`, or `fetch`.\n\n### Hello World\n\n```bash\nmkdir -p ~/.config/vistudio/extensions/hello-world\n```\n\n**`extension.json`**\n```json\n{\n  \"name\": \"hello-world\",\n  \"version\": \"1.0.0\",\n  \"main\": \"extension.js\",\n  \"activationEvents\": [\"*\"]\n}\n```\n\n**`extension.js`**\n```javascript\nfunction activate(context, vs) {\n  var cmd = vs.commands.registerCommand('hello.greet', function() {\n    vs.window.showInformationMessage('Hello from ViStudio!')\n  })\n  context.subscriptions.push(cmd)\n}\n\nactivate(context, vs)\n```\n\nRestart ViStudio or use **Extensions → Refresh Extensions**.\n\n### API Reference\n\n| API | Purpose |\n|-----|---------|\n| `vs.commands` | Register and execute commands |\n| `vs.window` | Show messages, react to theme changes |\n| `vs.editor` | Read and manipulate the active document |\n| `vs.workspace` | Read/write files, find files, register themes and templates |\n| `vs.terminal` | Send text to terminal, register compilers |\n| `vs.languages` | Register languages, completion providers, token highlighters |\n| `vs.env` | Open URLs, read CSS variables, get active theme |\n\n\u003e Full documentation: [Documentation.md](Documentation.md)\n\n---\n\n## Theming\n\nViStudio supports **dark and light themes** with full UI coverage via CSS custom properties. Extensions can register themes that customize both Monaco Editor token colors and UI variables.\n\n```\nSettings → Workbench → Color Theme\n```\n\n### Custom Theme Example\n\n```javascript\nvs.workspace.registerTheme({\n  id: 'my-theme',\n  label: 'My Theme',\n  type: 'dark',\n  colors: {\n    'editor.background': '#1e1e1e',\n    'editor.foreground': '#d4d4d4'\n  },\n  tokenColors: [\n    { scope: 'keyword', settings: { foreground: '#569cd6' } }\n  ],\n  uiColors: {\n    'bg-primary': '#1e1e1e',\n    'text-primary': '#cccccc',\n    'accent': '#007acc'\n  }\n})\n```\n\n---\n\n## Architecture\n\n```\n┌──────────────────────────────────────┐\n│       Electron Main Process          │\n│  - Window management                 │\n│  - IPC handlers (fs, dialog, term)   │\n└──────────────┬───────────────────────┘\n               │ IPC (contextBridge)\n┌──────────────┴───────────────────────┐\n│       React Renderer Process         │\n│  - Monaco Editor                     │\n│  - xterm.js Terminal                 │\n│  - Extension Host (sandbox)          │\n│  - UI Components                     │\n└──────────────────────────────────────┘\n```\n\n### Build \u0026 Release\n\nThe project uses **GitHub Actions** to build and release automatically:\n\n- **Push to `master`** — builds the AppImage and uploads it as a build artifact\n- **Push a tag `v*`** — builds and creates a **GitHub Release** with the AppImage attached\n- **Auto-update** — the app checks for new releases via `electron-updater` and prompts to update\n\nTo create a release:\n\n```bash\ngit tag v1.0.0\ngit push origin v1.0.0\n```\n\n### Tech Stack\n\n| Component | Technology |\n|-----------|-----------|\n| Runtime | Electron 42 |\n| UI Framework | React 18 + TypeScript |\n| Editor | Monaco Editor 0.45 |\n| Terminal | xterm.js 5.3 |\n| Build Tool | Vite 5 |\n| Extension API | Sandboxed `new Function()` |\n\n---\n\n## Project Structure\n\n```\nvistudio/\n├── electron/\n│   ├── main.ts          # Electron main process\n│   └── preload.ts       # Secure IPC bridge\n├── src/\n│   ├── App.tsx          # Main React component + state\n│   ├── components/      # UI components (16)\n│   ├── core/            # Extension system, theme manager\n│   ├── styles/          # Global CSS with theme variables\n│   └── types/           # TypeScript interfaces\n├── public/\n│   ├── fonts/           # Inter + JetBrains Mono\n│   └── icons/           # 133+ file type SVG icons\n├── package.json\n├── tsconfig.json\n├── vite.config.ts\n├── run.sh\n└── release/          # Packaged executable (gitignored)\n```\n\n---\n\n## Debugging\n\n| Source | Location |\n|--------|----------|\n| DevTools | Open automatically in dev mode |\n| Main process logs | `/tmp/vistudio.log` |\n| Extension logs | `~/.config/vistudio/extension-debug.log` |\n| Runtime errors | `~/.config/vistudio/runtime-error.log` |\n\n---\n\n## More Information\n\nFor full documentation on the extension system, API reference, theming, and debugging, see the **[Wiki](https://github.com/regalf/vistudio/wiki)** or **[Documentation.md](Documentation.md)**.\n\n---\n\n## License\n\n[GNU General Public License v3.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregalf%2Fvistudio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fregalf%2Fvistudio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregalf%2Fvistudio/lists"}