Scriptable drawing and live experiments

Canvas & Playground

Sketch, animate, and iterate on native scripted UI in one feedback loop.

Explore source ↗

Parent systemHtmlML

StatusPreview

Modules2

RepositoryHtmlML/JavaScriptPlayground

Capability

Canvas 2D, WebGL-oriented rendering, pointer events, animation frames, editable scripts, XAML preview, file bridges, console output, and TypeScript demos form an immediate native scripting laboratory.

01
Canvas 2D drawing surface
02
WebGL-oriented rendering context
03
Live JavaScript and TypeScript demos
04
XAML preview, files, and console bridges

How it composes

From intent
to working system.

Edit

The playground loads JavaScript, TypeScript, XAML, and supporting assets.

Execute

The embedded runtime transpiles modules and runs them against the live TopLevel.

Draw

Canvas contexts record paths, paint, text, transforms, or GPU-oriented frames.

Inspect

Preview and console surfaces expose visible output and runtime diagnostics.

Quick start

Adopt this
capability.

Start with the primary module, then add the related packages only when the application needs those layers. Replace VERSION with the current NuGet version.

git clone https://github.com/wieslawsoltes/HtmlML.git
cd HtmlML
dotnet run --project samples/JavaScriptPlayground/JavaScriptPlayground.csproj

const canvas = document.getElementById('draw');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#ff8f72';
canvas.addEventListener('pointermove', event => {
  ctx.lineTo(event.x, event.y);
  ctx.stroke();
});