Integrating WebView2 with AutoCAD: A Rich UI for Data Visualization

<?xml encoding=”UTF-8″>By Madhukar Moogala

AutoCAD’s native UI is powerful, but sometimes we need modern, interactive, and web-based interfaces to enhance productivity.

This sample demonstrates how to integrate WebView2 inside AutoCAD using .NET, enabling developers to display rich HTML dashboards and visualize data extracted from AutoCAD drawings.

The extracted data is linked to an AutoCAD drawing. In this example, we use the AutoCAD 2025 Sample Drawing:
AutoCAD 2025SampleMechanical SampleData Extraction and Multileaders Sample.dwg
This sample contains the Grill Schedule.dxe file, which stores extracted data in a binary format.

Since .dxe files are binary, we use a new tool shipped with AutoCAD 2025 called BFMigrator.exe to convert them into a human-readable JSON file (.dxex).

The converted .dxex file is then parsed and sent to an embedded WebView2 instance, where a dynamic HTML dashboard is generated.

Below is the C# code snippet used to convert the binary .dxe file into a JSON .dxex file using BFMigrator.exe:

ProcessStartInfo psi = new ProcessStartInfo
{
FileName = BFMigrator,
Arguments = $""{dxeFile}" "{dxexFile}"",
UseShellExecute = false,
CreateNoWindow = true
};
Process process = new Process { StartInfo = psi };
process.Start();
process.WaitForExit(); // Ensure migration is complete

Communication Between AutoCAD Plugin and WebView2:

When embedding WebView2 in AutoCAD, we need to initialize the browser instance, configure it, and navigate to our HTML dashboard. And stores WebView2 cache/data locally instead of a system-protected folder.

1. Initialize WebView2 environment
2. Ensure WebView2 is ready before setting the Source
3. Set the Source URL
4. Send JSON data to WebView2

Below is the C# code snippet used to initialize WebView2, set the Source URL, and send JSON data to WebView2:

string appDataFolderACAD = System.IO.Path.Combine(
Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
"AcadWebView"
);
Directory.CreateDirectory(appDataFolderACAD);
// Create WebView2 environment
var env = await CoreWebView2Environment.CreateAsync(null,
appDataFolderACAD);
// Ensure WebView2 is ready before setting Source
await Wv.EnsureCoreWebView2Async(env);
Wv.CoreWebView2.Settings.IsWebMessageEnabled = true;
// Now that WebView2 is initialized, set the Source URL
Wv.CoreWebView2.Navigate(new Uri(_source).AbsoluteUri);
Wv.CoreWebView2.NavigationCompleted += async (sender, args) =>
{
if (args.IsSuccess)
{
await SendJsonToWebView();
}
else
{
Wv.CoreWebView2.PostWebMessageAsJson(
"{"error": "Failed to load the web page"}"
);
}
};

We will use PostWebMessageAsString to send JSON data to WebView2:

For more information, refer to the

Below is the C# code snippet used to send JSON data to WebView2:

1. Check if the JSON file exists
2. Read the JSON file content
3. Parse the JSON content
4. Send the formatted JSON to WebView2
5. Handle exceptions

private async Task SendJsonToWebView()
{
if (!File.Exists(_json))
{
Console.WriteLine("JSON file not found.");
string errorJson = "{"error": "JSON file not found"}";
Wv.CoreWebView2.PostWebMessageAsString(errorJson);
return;
}
string jsonContent = await File.ReadAllTextAsync(_json);
try
{
var parsedJson =
System.Text.Json.JsonSerializer.Deserialize<object>(jsonContent);
string formattedJson =
System.Text.Json.JsonSerializer.Serialize(parsedJson);
Wv.CoreWebView2.PostWebMessageAsString(formattedJson);
}
catch (Exception)
{
Wv.CoreWebView2.PostWebMessageAsString("{
"error": "Invalid JSON format"
}");
}
}

Receiving Data in WebView2 on JS

On the HTML side, the WebView2 receives JSON data and dynamically updates the dashboard.

1. Listen for messages from the AutoCAD plugin
2. Parse the received JSON data
3. Update the dashboard

window.chrome.webview.addEventListener("message", event => {
try {
console.log("Raw WebView2 Message (Before Parsing):", event.data);
// Ensure the received data is parsed correctly
const jsonData = typeof event.data === "string" ?
JSON.parse(event.data) : event.data;
console.log("Parsed JSON from C#:", jsonData);
}
catch (error) {
console.error("Error parsing JSON:", error);
}
});

For more information, refer to the sample AcadWebView on Github.