ConnectMyApps Canvas for VS Code

Build, debug, and manage ConnectMyApps Canvas workflows locally using VS Code's full development environment. This extension provides a headless iPaaS experience — leveraging Canvas's cloud infrastructure while giving you local editing, debugging, diffing, and API testing tools.

Compatible with VS Code and forks such as Cursor and Kiro.

Features

• Download workflows and edit block code locally with full IntelliSense
• Debug workflows block-by-block or end-to-end in VS Code's debugger
• Push code and configuration changes back to Canvas
• Compare local code against Canvas using the native diff editor
• Test application connector APIs without managing workflows
• Load run results and webhook data from Canvas for local inspection
• Search across workflow data (outputs, logs, sessions)
• Scaffold AI coding assistant instructions for your preferred tool (Copilot, Cursor, Claude Code, etc.)

Prerequisites

Node.js 22.14.0 or higher is required for debugging and running block scripts.

node -v

If you need to install or upgrade, download the latest version from nodejs.org.

Installation

Install ConnectMyApps from the VS Code Marketplace:

1. Open the Extensions view (Ctrl+Shift+X)
2. Search for "ConnectMyApps"
3. Click Install

Alternatively, install from a .vsix file: Extensions menu > ... > "Install from VSIX".

Getting Started

1. Log in — Open the command palette (Ctrl+Shift+P) and run cma: Log In. Enter your Canvas consumer key and secret key. Credentials are stored securely in your OS keychain.
2. Initialize workspace — Run cma: Init Workspace. Choose a folder (recommended: inside your user home directory to avoid permission issues). This creates the workspace structure, config files, and package.json.
3. Install dependencies — Open a terminal in your workspace root and run:

   npm install
   

4. Download a workflow — Run cma: Get Workflow, select an account and workflow. Local files are created for all blocks.
5. Debug — Open a block .mjs file and press F5 to launch the VS Code debugger.

Workspace Structure

After initialization your workspace contains:

workspace/
  blocks/            — Standalone blocks you create locally
  workflows/         — Workflows downloaded from Canvas accounts
  requests/          — REST API request/response files for app connectors
  proxy_modules/     — Runtime modules that emulate Canvas functions locally (do not edit)
  package.json       — Dependencies managed by the extension
  .workspace-config.json — Configuration (see below)
  .gitignore         — Pre-configured ignore patterns

The package.json includes managed dependencies required for local execution: @cma/prism, @cma/util, axios, date-fns, jose, underscore, utf8, uuid, and xml-js. You can add your own dependencies — the extension will never remove them.

Commands

All commands are prefixed with cma: in the command palette (Ctrl+Shift+P / Cmd+Shift+P).

Setup & Authentication

Workflows

Pushing Changes to Canvas

Comparing with Canvas

Blocks

Requests (API Testing)

Webhooks

Run Results & History

Search & Utilities

Workspace Configuration

The .workspace-config.json file in your workspace root controls extension behavior. It is created automatically during initialization and can be edited manually.

{
    "version": "1.3.1",
    "initialized": "2026-07-01T10:00:00.000Z",
    "request": {
        "defaultNamingMode": "smart",
        "defaultBaseUrl": "https://canvas.connectmyapps.com/api/ApiSend",
        "defaultResponseCodes": [200, 201, 404],
        "requestBodyOverride": {},
        "smartNaming": {
            "maxPathLength": 20,
            "preserveNumericIds": true
        },
        "archiveOrphanedFiles": true
    },
    "runtime": {
        "outputCleanup": "canvas",
        "sessionCleanup": "canvas",
        "runResults": {
            "onWorkflowGet": "prompt",
            "includeOutput": true,
            "includeLog": true,
            "includeSession": true,
            "archiveOnCleanup": true
        }
    },
    "diff": {
        "viewMode": "active"
    }
}

Request Settings

Runtime Settings

Diff Settings

Other Settings

Smart Request Naming

When using "resultsPage": "smart" in request files, the extension generates descriptive filenames based on request content.

Filename Format

{APP}_{verb}_{urlPath}_{hash}_req.json
{APP}_{verb}_{urlPath}_{hash}_res.json

Examples:

• QUIN_get_employees_a1b2_req.json
• MYST_post_orders_c3d4_res.json
• FTP_get_files_documents_e5f6_req.json

How It Works

1. On execute: The extension generates a filename from the request content (verb, URL path). If it differs from the current filename, the request file is renamed and any orphaned responses are archived.
2. Duplicate detection: If the generated filename matches an existing file, the existing file is replaced and your editor tab stays open with the renamed file.
3. Archiving: Orphaned responses are combined with their originating request into an archive/ subfolder as a single { request, response } JSON file. A hidden archive/.pending/ record captures the request at execution time so pairing is always correct. Set archiveOrphanedFiles: false to delete instead.

URL Path Truncation

Long URL paths are intelligently truncated to fit within maxPathLength:

• First and last path segments are prioritized
• Middle segments are removed if needed
• Numeric IDs can be preserved or replaced with "id" based on settings

Important Concepts

dateLastRun

The dateLastRun variable represents the timestamp of the last successful workflow execution.

Local behavior:

• Updated in manifest.json when a workflow run "completes" — either by running the last block, or by any block calling fx.stopAfterThisBlock(true).
• Loaded into the global dateLastRun variable when blocks execute, enabling incremental sync patterns.
• You can manually edit the value in manifest.json for testing.

Canvas sync (optional):

• By default, local runs do NOT update dateLastRun on Canvas (prevents local debugging from affecting production).
• Set "syncDateLastRun": true in manifest.json to enable syncing after successful local runs.

Renaming Blocks and Workflows

Edit names directly in manifest.json:

• Block name: Edit the name property of the block in the blocks array.
• Workflow name: Edit the name property at the root level.

When you push code or config, updated names are sent to Canvas and local folders are automatically renamed (sanitized for filesystem-safe characters).

Changing Block Order

Add or reorder blocks in the Canvas web UI, then use cma: Get Workflow to re-download. Local block order changes are not synced.

Known Limitations

Workflows

• Schedule management: No commands for changing or toggling a workflow's schedule. Use the Canvas web UI.

Workflow and Block Templates (Workbench)

• Workflow and block templates cannot be fetched or updated via the extension. Only registered (deployed) workflows are accessible.
• Pushing code to a block created from a workbench template will mark it as "customized" and it will no longer receive template updates.

Functions (fx)

• Functions cannot be created or modified through the extension. Use cma: Update FX Functions to pull the latest function definitions from Canvas into your local fx.js.

Webhooks

• The extension cannot actively listen for incoming webhooks — they must be fetched manually.
• Only one webhook can be loaded at a time (not the full queue).
• Queue items cannot be moved to history via the extension.

Feedback

Send feedback and feature requests to support@connectmyapps.com.