Morph

Control VS Code editor layouts with natural language through GitHub Copilot Chat.

Features

• Natural Language Layout Control: Use @morph-layout in Copilot Chat to arrange your editor
• KDL Layout DSL: Define layouts using KDL syntax
• Bidirectional: Parse KDL to apply layouts, or capture current layout as KDL
• CodeLens Integration: Click to apply layouts directly from .kdl files

Usage

In GitHub Copilot Chat:

@morph-layout split my files side by side
@morph-layout arrange tests on the right
@morph-layout show me a 2x2 grid layout

Or use KDL directly:

layout {
  cols {
    group size="60" { file "src/main.ts" }
    group size="40" { file "src/test.ts" }
  }
}

Open terminal and chat panel:

Commands

• Morph: Capture Current Layout as KDL - Export current editor arrangement
• Morph: Apply Layout from Selection - Apply selected KDL text
• Morph: Apply Layout at Line - Apply KDL at cursor (via CodeLens)

KDL Syntax Reference

Example Layouts

Side-by-side:

layout {
  cols {
    group size="50" { file "src/main.ts" }
    group size="50" { file "src/test.ts" }
  }
}

2x2 Grid:

layout {
  rows {
    cols {
      group size="50" { file "a.ts" }
      group size="50" { file "b.ts" }
    }
    cols {
      group size="50" { file "c.ts" }
      group size="50" { file "d.ts" }
    }
  }
}

Agentic Coding Setup:

window {
  layout {
    cols {
      rows size="60" {
        cols size="50" {
          group size="50" { file "extension.ts" }
          group size="50" { file "test/parser.test.ts" }
        }
        group size="50" { file "extension.ts" }
      }
      rows size="40" {
        group size="80" { chat }
        group size="20" { terminal }
      }
    }
  }
}

Disclaimer ⚠️

This is a Proof of Concept (POC) - Morph demonstrates conversational layout management capabilities but may have limitations in certain environments.

Known Issues