Visual canvas and layers
Select, move, resize, group, duplicate and align elements. Edit text directly, reorder layers and create links while preserving normal HTML layout.
Visual canvas and layers in the connected sample projectHEIROWWEBUI / EXPLORE FEATURES
From first idea to live canvas.
Explore the visual designer, source editor and connected project tools. Use the same design workspace in your browser or the Windows desktop app.
Browse 14 feature areas and windows
Click a screenshot to open it full-screen. Scroll or pinch to zoom, drag to pan, and use Previous / Next to browse. Screenshots show a connected starter project. Advanced panels are available in Advanced mode. Some source and live-site connections require the Windows companion or host permissions.
Templates and starting points
Explore Forma, Aster, Atlas, Field Notes and Ember, or start blank. Templates provide editable layouts, colors and portable HTML, CSS and JavaScript.
Templates and starting points in the connected sample projectStyle, attributes and computed values
Use 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.
Style, attributes and computed values in the connected sample projectDesktop, tablet and mobile previews
Switch 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.
Desktop, tablet and mobile previews in the connected sample projectCode workspace
Edit 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.
Code workspace in the connected sample projectVisual JavaScript
Build 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 in the connected sample projectScript debugging and output
Use 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 debugging and output in the connected sample projectAnimation workspace
Create element tracks with keyframes, timing, easing, repetition, direction and triggers. Scrub the timeline, preview motion and sequence tracks.
Animation workspace in the connected sample projectThemes, skins and design tokens
Browse starter palettes, duplicate project skins and edit design tokens. Apply a skin to a page while keeping its authored styles available.
Themes, skins and design tokens in the connected sample projectProjects and source connections
Open 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.
Projects and source connections in the connected sample projectImport XAML and existing websites
Import 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.
Import XAML and existing websites in the connected sample projectLive websites and desktop pairing
Use the Windows companion for isolated live-site inspection. Pair a remote web editor with a one-time code to exchange preview frames and scoped edits. Pairing and publishing follow host authorization.
Live websites and desktop pairing in the connected sample projectDrafts, save review and portable export
Keep 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.
Drafts, save review and portable export in the connected sample projectDockable panels and connected workflows
Arrange 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.
Dockable panels and connected workflows in the connected sample project