I built DirectSurface, a Canvas UI framework for dockable browser workspaces

DirectSurface 0.1.0 is an MIT-licensed TypeScript package for building browser workspaces with Canvas. It provides layouts, forms, data controls, charts, themes, overlays, and dockable document panels.

I started with WinForms and later moved to Vue for back-office applications. Vue and React are productive choices for ordinary pages and forms. The tools that led me to DirectSurface felt closer to desktop software: people keep several views open, work with dense tables, and need selection, focus, editing, and temporary windows to behave consistently through a long session. In those interfaces, I found myself spending too much application code coordinating component state and control behavior.

What I missed from desktop GUI development was a stable control object and a runtime that owns the difficult parts of the control. Canvas gives DirectSurface a way to draw and coordinate that runtime, but Canvas alone does not make an interface fast. The framework still has to manage the visible data range, input, invalidation, and the lifetime of windows and editors. This is a different fit for a specific class of applications, not a claim that Vue, React, or the DOM cannot build them.

The public example shows application flows rather than isolated controls. The live demo has two paths:

• Project delivery workbench: filter projects and dates, inspect linked metrics and charts, edit a task in a drawer, and create a new task. The displayed user and all task data are fictional; changes reset on refresh.
• Canvas workspace: switch document tabs, float or dock the inspector, and filter a locally generated 10,000-row grid. Try searching for ITEM-09999. The row count describes the sample dataset, not a performance benchmark.

The workspace is composed with the public package API. Its data explorer uses RenderDataGrid; the panels are managed with DockWindowManager and rendered by RenderDockWorkspace. The example imports these from directsurface, the same package a consumer installs from npm. The grid keeps the sample rows as data and renders the visible viewport; the 10,000-row demo is not a comparative benchmark.

npm install directsurface

If you prefer to inspect the source, the repository includes a getting-started guide, component guides, and a standalone example app that consumes the packaged tarball.

One important boundary: this release does not support assistive-technology accessibility. Canvas controls are not exposed as semantic DOM controls. For content sites and applications that require native page semantics, the DOM is a better fit. The demo has no backend or real authentication.

If you build data-heavy browser tools, I would value feedback on the docking and grid interactions: what is the first behavior you would expect that the demo does not yet provide?

Disclosure: This article was generated by AI using the maintainer's own development background. Its technical claims were checked against the public source and demo.