Backend & API Suite

Environment Switcher

Define named environments with base URLs and variables. Switch your entire Vispane workspace context between Local, Staging, and Production with a single click.

Overview

Why Environment Management Matters

One of the most catastrophic mistakes in web development is running a destructive test (a bulk delete, a data reset script) against a production database because you forgot to change a hardcoded URL. The Environment Switcher prevents this class of error by design.

Instead of hardcoding https://api.myapp.com into your API requests, you define a variable and configure its value per environment. The Environment Switcher provides strong visual indicators (colored badges) to make your active environment impossible to miss.

  • Named Environments: Create unlimited named environments (Local Dev, Staging, Production, Feature Branch, etc.).
  • Custom Variables per Environment: Each environment can define multiple key-value pairs (e.g., base_url, api_version, tenant_id).
  • Preset Templates: Quick-start presets for Local Dev (localhost:3000), Staging, and Production are available one-click.
  • Color-Coded Badges: Assign a custom color to each environment. Production should always be Red—a powerful visual safeguard against accidental data mutations.
  • Global Variable Resolution: Variables defined here are resolved across the API Explorer and Mock API Interceptor automatically.
  • Frame Reload on Switch: Switching environments automatically reloads all preview frames to the new base URL.
Workflow

Setting Up Your First Environments

  1. 1

    Open the Environment Switcher

    Click the globe icon in the left rail.

  2. 2

    Create a "Local Dev" environment

    Click "Add New" or use the preset chip. Set the name to "Local Dev" and URL to http://localhost:3000. Assign it a green color.

  3. 3

    Create a "Production" environment

    Add another environment, set the URL to your live domain. Assign it a bright red color to signal danger.

  4. 4

    Add custom variables

    Inside each environment, add key-value pairs like api_version = v2 or tenant_id = abc123 for dynamic multi-tenant testing.

  5. 5

    Use variables in all tools

    In the API Explorer, replace hardcoded URLs with /api/v1/endpoint. From now on, switching environments globally updates all requests instantly.

Critical Warning
🚨
Always use Red for Production The color system is your last line of defense before sending a destructive request to live data. Make Production red. Never make it green. This single convention has saved countless databases.
💡
Use a "Feature Branch" environment When testing a feature that has its own isolated backend branch, create a dedicated environment pointing to the branch URL. This keeps your Local Dev and Staging environments clean and prevents request cross-contamination.