The Prototype

Before the TypeScript editor took shape there was a prototype. On 19 September 2024 the first version of what would become zStudio was uploaded to its repository in a single commit: 24 files and around 6,300 lines of code. It was already an Electron app drawing its whole interface with PIXI.js 7.4.2, the same foundations zStudio runs on today. The stage had a grid that you could pan by dragging and zoom with the mouse wheel. You dragged images in from disk to place them as sprites, then moved, resized and rotated them, with a selection box and anchor marker drawn around the selected asset. Containers could be created and drilled into, and a path bar along the top showed where you were in the hierarchy. Three draggable panels sat over the canvas: a Hierarchy panel listing the scene tree, a Properties panel with fields for x, y, width, height, rotation, scale, alpha and instance name, and a Timeline panel with a draggable playhead and keyframes for each asset. The File menu could save the scene as JSON and open it again. The controller/view split that still organises zStudio's code, with a BaseController wrapping each PIXI container and Sprite and Container controllers built on top, was there from the start, as was the global Model. The project already listed the Spine, particle emitter and drop shadow libraries, though none of them were wired up yet. Work then paused until February 2025.