Explore the visual designer, source editor and connected project tools. Use the same design workspace in your browser or the Windows desktop app.
Captured 15 Oct 2026 with a sample Forma page and unsaved demonstration drafts. Each screenshot shows the panel described beside it. Click to zoom and browse.
Select, move, resize, group, duplicate and align elements. Edit text directly, reorder layers and create links while preserving normal HTML layout.
Current canvas and expanded layer hierarchy with a selected sample heading · Captured 15 Oct 2026Explore Forma, Aster, Atlas, Field Notes and Ember, or start blank. Templates provide editable layouts, colors and portable HTML, CSS and JavaScript.
The current template explorer with Forma, Aster, Atlas, Field Notes and Ember · Captured 15 Oct 2026Use Simple mode for everyday controls or Advanced mode for the CSS catalog. Inspect authored and computed styles, selectors, pseudo-states and breakpoints; edit colors, spacing, typography, flex and grid.
Computed values and matching style rules for the selected sample heading · Captured 15 Oct 2026Switch viewport presets or enter a custom width. Fit or zoom the canvas and scope style changes to a breakpoint before testing your design in Run mode.
Mobile viewport preview of the same sample page inside the editor · Captured 15 Oct 2026Edit HTML, CSS, JavaScript and JSON with Monaco. Opening Code formats supported source into a local draft; use undo, redo and the explicit save review before writing changes.
Current code workspace editing the sample page HTML and CSS · Captured 15 Oct 2026Build interactions with typed nodes for events, conditions, loops, functions, state, HTTP, WebSockets, storage, DOM edits and custom JavaScript. Imported code keeps its source; unsupported structural rewrites remain in Code.
Visual JavaScript graph with sample page-ready and log nodes · Captured 15 Oct 2026Use run, step, continue, stop, breakpoints and trace output on generated graphs. Review diagnostics and logs in Output. Invalid graph compilation retains the last valid preview.
Script graph debugger with a selected breakpoint and Run, Step and Continue controls · Captured 15 Oct 2026Create element tracks with keyframes, timing, easing, repetition, direction and triggers. Scrub the timeline, preview motion and sequence tracks.
Animation track with timing, easing and keyframe controls for a sample heading · Captured 15 Oct 2026Browse starter palettes, duplicate project skins and edit design tokens. Apply a skin to a page while keeping its authored styles available.
Themes and skins panel with starter palettes and project design-token controls · Captured 15 Oct 2026Open project files, connect a SocketJack host, or use a desktop project folder. Source providers also support cooperating admin pages, project resources and assembly resources with capability-dependent editing.
Source picker with project, website, folder, XAML and hosted-app connection options · Captured 15 Oct 2026Import supported XAML layouts and controls, retaining diagnostics for unsupported bindings and code-behind. Website import gathers available source and assets; it does not guarantee a complete clone of every dynamic site.
XAML importer with a sample WPF Page ready to convert to editable web content · Captured 15 Oct 2026Check your inherited SocketJack identity in Settings, keep local recovery drafts, and restore the workspace layout. Connect source opens local folders or hosted applications; backup pairing remains available where the connected host supports it.
Settings showing inherited SocketJack identity and local recovery preferences · Captured 15 Oct 2026Keep per-file drafts and undo history, review source and metadata diffs before saving, and retain drafts on conflicts. Export a ZIP containing HTML, CSS, JavaScript and assets for independent hosting.
Actual save review showing source differences before writing the sample draft · Captured 15 Oct 2026Arrange Layers, Source files, Components, Themes, Properties, Code, Scripts, Animations and Output around the canvas. Workstation integration shares permitted project files with chat sessions; SocketJack accounts provide browser sign-in and registration.
Alternate dock layout with the layer explorer moved to the right · Captured 15 Oct 2026