The Frontend CNVS UI is the live workspace that loads every Canvas scene inside the browser. It shows the current project in real time while giving you full control over geometry, materials, lighting, animation, and effects. The layout is split into two main sections: a nested Outliner on the left and a Context Window on the right. The Outliner is labelled with the unique ID of the canvas you set in the backend editor and is styled like an expandable menu tree. Clicking any item in the Outliner refreshes the Context Window so you can adjust the relevant settings without switching screens.
Elements – lists every mesh or object added in the backend editor
Materials – settings for the materials matched with the objects that use them
Lights – all point, spot, ambient, hemisphere, directional, and area lights in the scene
Cameras – the active perspective or orthographic rigs with full orbit and lens settings
Renderer – tone-mapping, exposure, and CSS2D and 3D renderer settings
Scene – post-processing effects plus axes and grid helper toggles for layout reference
Layers – logical buckets that let you solo, hide, or reorder entire groups
Animations – playback speed, direction, and iteration controls for animations for each Canvas prop group (elements, cameras, scene, etc etc)
Effects – This is where we can control WebGL effect settings. Only appears if we have WebGL effects toggled on.
The context window to the right instantly updates to show geometry sliders, material values, light intensity, or any controls related to the item selected in the Outliner
Furthermore, in the CNVS UI you will find icons to mange, save and load scenes, and responsive previews. Clicking on any item in the Outliner menu for which we have previously created an animation will open the timeline for that specific item group.