# The editor's hosts Source: https://apigenie.pl/techdocs/reference/editor-hosts The API Genie editor edits OpenAPI 3.0, OpenAPI 3.1 and AsyncAPI 3.0 files in forms, on three hosts, with the same page in each: - **Web**: the editor's page in a browser (Chromium, Edge or Firefox), from a folder opened through the File System Access API or dropped on the page, at https://apigenie.pl/editor/, which every website deploy rebuilds from `main` (ADR-174). - **Desktop**: the same page in a window of its own, with installers for macOS, Windows and Linux on https://github.com/mykulyak/api-genie/releases (the `desktop-X.Y.Z` releases, from 1.0.0 on). Around the page, the desktop app adds what needs the machine: the system `git`, and Node.js sidecars for the broker client and the mock server. - **VS Code**: the same page in the API Genie extension's custom editor, *Open with API Genie Editor* (the `ide-X.Y.Z` releases, on the Marketplace from 1.0.0 on). VS Code owns the text, undo, saving, the colours and the code and diff editors; the extension runs the sidecars with VS Code's own runtime. *About* in the editor's toolbar says which host you are in, the editor's version and the host's own. ## What each host offers In the tables, **same** means the feature works as in the web editor; any other cell says what that host does instead, or adds a caveat after *same;*. ### Folders | Feature | Web | Desktop | VS Code | | --- | --- | --- | --- | | Open folder… (the host's folder picker) | same; needs the File System Access API (Chromium, Edge); elsewhere, drop the folder on the page | same | VS Code opens the folder: the file's workspace folder, with its other spec files | | Drop a folder or files on the page | same | No drop: open the folder with the dialog or on the command line | VS Code opens the folder | | Start on a folder | A page has no command line: open or drop a folder | same; the folder given on the command line, `apigenie-editor ` | The custom editor opens on the file's folder | | Save a folder the host can't write to (dropped files) as downloads | same | same | same | ### Toolbar | Feature | Web | Desktop | VS Code | | --- | --- | --- | --- | | Undo and Redo | same | same | VS Code's undo, per document, which also undoes what was typed in its text editor | | Save, with the count of unsaved files | same | same | VS Code saves its documents; the unsaved marker is VS Code's | | Export bundled (the spec and the files it refers to, in one file) | same; needs the openapi_bundle WebAssembly module, which a build with APIGENIE_WASM_DIR ships | same; needs the openapi_bundle WebAssembly module, which the installers don't ship yet | same; needs the openapi_bundle WebAssembly module, which the extension doesn't ship yet | | Mock server (Prism) serving the spec as it is edited | Runs a Node.js sidecar, which a page can't start | same | same | | Theme: the system's, light or dark | same | same | The VS Code theme's colours; no setting of the editor's own | | About: the editor's version, the host and its version | same | same | same | ### Panels | Feature | Web | Desktop | VS Code | | --- | --- | --- | --- | | API tree: search, filters, problem badges, rename and delete | same | same | same | | File list with unsaved and problem markers | same | same | same | | Forms for every node, with the Raw section and quick fixes | same | same | same | | Code tab: the file's text in Monaco, following the selection | same | same | VS Code's text editor: *Show in the text editor* opens it at the node | | Preview: the docs of the selected node, OpenAPI and AsyncAPI | same | same | same | | Flow: the AsyncAPI message flow diagram, editable | same | same | same | | Changes: the API changes since the last save, with their severity | same | same | same | | Changes: the text diff since the last save | same | same | *Show the text changes in the diff editor* opens VS Code's, on the live document | | Git tab: status, diff, commit, branches | No Git tab: it runs the system git, which a page can't | same | No Git tab: VS Code's Source Control view does that | | Problems: validation, the repository's linters and Spectral, under the fields and in the tree | same | same | same | ### Editing | Feature | Web | Desktop | VS Code | | --- | --- | --- | --- | | Show as code: the node's text in Monaco, inside the form | same | same | *Show in the text editor* opens VS Code's at the node | | Import: Swagger 2.0, AsyncAPI 2.x and Postman collections, with the conversion shown as a diff | same | same | *Show the conversion in the diff editor* opens VS Code's | | Ctrl+S / Cmd+S saves | same | same | Asks VS Code to save | | Ctrl+Z / Cmd+Z and Ctrl+Shift+Z undo and redo | same | same | VS Code's undo | ### Try it out | Feature | Web | Desktop | VS Code | | --- | --- | --- | --- | | Try it out: HTTP requests from the operation's preview | same | same | same | | CORS proxy setting for servers that refuse the page's requests | same | same | Not needed: the extension host sends the requests, and CORS doesn't apply | | Authorize with OAuth 2.0 authorization-code and implicit flows (a popup) | same | same | Only the flows without a browser step (client credentials, password); paste a token otherwise | | Send Try it out to the mock server | Runs a Node.js sidecar, which a page can't start | same | same | | Try it: publish and subscribe on Kafka, AMQP, MQTT and WebSocket servers (AsyncAPI operations) | Runs a Node.js sidecar, which a page can't start | same | same | ## Host limits Each difference above comes from something the host can't do, or does itself. ### The web editor has no Git tab, broker Try it or mock server They run the system `git` and Node.js sidecars (the broker client, Prism), which a web page can't start. The desktop app and the VS Code extension have them. They may come to the web editor later through integration packages for the frameworks the generators target; none is planned yet. ### VS Code has its own text editor, diff editor and Source Control The custom editor shows no Code tab and no Monaco diffs: *Show in the text editor* opens VS Code's text editor at the node, and *Show the text changes in the diff editor* and *Show the conversion in the diff editor* open VS Code's diff editor. The Git tab's job is VS Code's Source Control view's. Undo, the unsaved marker and Save are VS Code's, since the document is VS Code's, and the editor takes the colours of the VS Code theme. ### VS Code opens folders itself The custom editor works on the file's workspace folder, with its other spec files for `$ref`s; there is no folder picker and no drop. Try it out sends its requests from the extension host, so no CORS proxy is needed, but the OAuth 2.0 flows with a browser step (authorization code, implicit) can't return to a webview: use client credentials or a token.