JSXGraph AIR for Visual Studio Code

No construction loaded yet. Use the plug icon below to connect to the local bridge server.

Connection

Connects to the local bridge server that watches header.js and construction.js and automatically displays their content here.

WebSocket address

Connect automatically Automatically connects to the address above whenever this page is opened.

Settings

construction.js is always checked against a fixed blocklist (no <script>, no eval, no network/storage access, no escaping the iframe).

header.js is allowed to add specific HTML head elements instead (e.g. MathJax). Choose which categories are permitted:

External scripts <script src="https://..."></script> — e.g. MathJax or other libraries.

Style / CSS <link rel="stylesheet"> and <style> blocks.

Meta tags <meta ...>, e.g. for charset or viewport.

Write preview changes back to fileComing soon Would write positions changed via drag & drop back into construction.js. Not implemented yet — the switch is already in place for later.

Setup Guide

How to use this preview together with GitHub Copilot in Visual Studio Code.

1

Install Node.js

The bridge server needs Node.js (which includes npm). Download it from nodejs.org if node --version doesn't work yet in your terminal.
2

Install the GitHub Copilot extension

In VS Code, open the Extensions view and install GitHub Copilot (and optionally GitHub Copilot Chat). Sign in with a GitHub account that has an active Copilot subscription.
3

Open the project folder

Open the folder containing JSXGraph-AIR-VSCode.html and the bridge server (server.js, package.json) in VS Code.
4
Install dependencies

In the VS Code terminal, run this once:
```
npm install
```
5
Start the bridge server

Either run it manually, or let the included task start it automatically when the folder opens:
```
npm start
```
6

Open this page and connect

Open JSXGraph-AIR-VSCode.html in a browser. Click the plug icon (Connection), check the WebSocket address (default ws://localhost:8787) and click Connect. Enable "Connect automatically" so this step isn't needed again.
7

Ask Copilot to write the construction

Open construction.js in VS Code and ask Copilot Chat to write or modify JSXGraph code in it (e.g. "Add a red circle of radius 3 around the origin in construction.js"). Saving the file updates the preview automatically. The preview page always provides a ready-to-use constant called BOARD (holding the id of the div JSXGraph renders into) - construction.js should call JXG.JSXGraph.initBoard(BOARD, {...}) rather than hardcoding the id as a literal string, so it keeps working even if that id ever changes.
8

Optional: customize the page head

Ask Copilot to edit header.js to add external libraries (e.g. MathJax) or custom CSS. Which categories are allowed can be controlled under Settings.

About

Legal notice

JSXGraph AIR for Visual Studio Code – Artificial Intelligence Renderer
powered by JSXGraph
Carsten Miller

Center for Mobile Learning with Digital Technology (CMLDT)
University of Bayreuth
Universitätsstraße 30
95447 Bayreuth, Germany

Represented by: Prof. Dr. Alfred Wassermann
Email: info@jsxgraph.org

JSXGraph itself is free software developed at the Center for Mobile Learning with Digital Technology (CMLDT) of the University of Bayreuth, under the LGPL/MIT license.

Full legal notice at jsxgraph.org

Connection

Settings

Share

Setup Guide

About