Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>MultiFile CanvasNew to Visual Studio Code? Get it now.
MultiFile Canvas

MultiFile Canvas

Slobodan Zivkovic

|
7 installs
| (0) | Free
Edit multiple files in one canvas with dividers
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MultiFile Canvas – VS Code Extension

Ever lost your flow because you had to jump between 5 tiny files?
MultiFile Canvas lets you edit multiple files in one seamless view.

✅ No endless tab switching
✅ Works with configs, snippets, and utilities
✅ Feels like editing a single file — no new UI to learn


⚡ Quick What & Why

What: Edit multiple files in one continuous view.
Why: Keep focus and stay productive — no more juggling tabs.


📝 Brief Overview

MultiFile Canvas introduces a special .mf file format. Inside it, you can reference multiple files with simple dividers:

  1. Add File References
    • Inside your {example}.mf file, type:
      ---- main.js ----
      ---- lib/utils.js ----
      ---- index.js ----
      
  • Each divider loads that file into the canvas.
  • You edit them inline, as if they were one document.
  • Saving updates the original files automatically.
  • External changes stay in sync with your canvas view.
  • If you paste multiple deviders it will load all of them.
  • If there is some content after a devider the load will be skipped.

It feels just like editing a normal file — no new UI or workflow to learn.


🎯 Common Use Cases

  • Focused sessions: Create a canvas for just the files you need right now.
  • Teaching or demos: Show related files together in a single view.
  • Small utilities: Work across multiple helper scripts without breaking flow.
  • Snippets & examples: Collect code fragments in one editable view.

🚀 How It Works

5-Second Version

  1. Create .mf file
  2. List your files with dividers
  3. Edit + save → syncs back automatically

Detailed Version

  1. Create a Canvas

    • Make a new file ending in .mf (e.g., project.mf).
  2. List Your Files

    • Add file dividers (one per file).
  3. Edit as Usual

    • Save to sync back changes.
  4. Stay in Sync

    • External edits show up inside the canvas.
  5. Rename with Control

    • Rename divider = new copy
    • Point to existing file = load that file

Example

MultiFile Canvas Demo


📦 Installation

  1. Open the Extensions panel in VS Code.
  2. Search for MultiFile Canvas.
  3. Click Install.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft