Building an Org Chart App with GitHub Copilot and OrgChart JS

GitHub Copilot can generate a surprisingly large part of an application—as long as it has enough context.

To build an organizational chart application with OrgChart JS, you don't need to provide the entire library. A small amount of context is often enough:

• The CDN reference:

  <script src="https://cdn.balkan.app/orgchart.js"></script>

• A sample data structure:

  [
    { "id": 1, "name": "Amber McKenzie" },
    { "id": 2, "pid": 1, "name": "Ava Field" },
    { "id": 3, "pid": 1, "name": "Peter Stevens" }
  ]

• A basic chart initialization example.

• Frontend examples showing how the application loads data and how node add, update, and remove events communicate with the backend.

These frontend examples are especially valuable because they show Copilot how the application works as a whole. It can infer that node changes should trigger API requests, which backend endpoints are needed, and how the frontend and database stay synchronized.

One question is whether simply providing the TypeScript declaration file (orgchart.d.ts) is enough. While Copilot can learn a lot from the type definitions, practical examples are usually much more effective. The .d.ts file describes the API, but it doesn't demonstrate how the library is typically used or how it integrates with the rest of the application.

By combining the type definitions with a few real-world examples, Copilot has everything it needs to generate an Express backend, REST endpoints, CRUD operations, and additional features with minimal guidance.

The better the context you provide, the better the generated code becomes.