Pages and layouts

Each page is a JSON file under pages/. Open it in the visual editor to design its contents; the filename is also part of its reference path.

Add a new page

1. Open an existing AVstudio project in VS Code.
2. Click the AVstudio icon in the Activity Bar, then click Add Page in its sidebar.
3. In Enter page name, type a name such as controls. The my-page text is a placeholder. Enter the name without the .page extension; the editor adds it automatically.
4. Press Enter to confirm the name. Press Escape to cancel.
5. In Select layout type for the new page, choose Responsive Layout for a fluid flexbox layout or Fixed Layout for positioned elements with optional anchors. Cancelling this picker stops creation without writing a page.
6. The extension creates pages/controls.page, opens it, and displays a success notification. Check the file in Explorer and its layout in Page Properties before adding content.

Names can contain letters A–Z, numbers, spaces, hyphens, and underscores. Leading and trailing spaces are trimmed. Do not enter a folder path or filename extension in the name field. If a file with the same name already exists in the destination folder, creation reports an error and preserves the existing file; run Add Page again with a different name.

Other ways to add a page

Entry point	Destination
AVstudio → Add Page	The project's pages/ folder.
Status bar Quick Actions → Create Page	The project's pages/ folder.
Command Palette AVstudio: Add page	The project's pages/ folder when run without folder context.
Explorer: right-click pages or a folder inside it → Add page	The selected folder, useful for organizing pages into subfolders.

Each entry point uses the same name prompt and layout picker. For example, creating controls inside pages/rooms/ produces pages/rooms/controls.page. Check the resulting path before referencing the page in navigation or a Subpage element.

Open the new file in AVS Visual Editor. If it opens as JSON, use the editor tab's Reopen Editor With... → AVS Visual Editor. Add containers and elements using Add components to a project, then save and test the page in Live Preview.

Page transitions

In 27.0.29, open the active theme in Theme Editor → Page → Page Transitions. Select incoming and outgoing presets independently: None, Fade, Slide left/right/up/down, Zoom in/out, or Pop. Set duration and easing, save, and navigate between two pages in Live Preview.

The saved theme keys are page.transitionEnter, transitionExit, transitionDuration, and transitionEasing. Defaults are fade, fade, 300ms, and cubic-bezier(0.22, 1, 0.36, 1). Set both presets to none for an instant change. Missing keys use their defaults.

No additional CSS file is required. Older companion CSS can override the generated rules; inspect it if changing a preset has no visible effect. Keep advanced overrides beside the active theme, not in page-folder CSS. The av-page transition group belongs to the page-content area. Browsers without the required View Transitions support change pages immediately.

Page transitions are separate from element and list entrance animations. Test the intended runtime and reduced-motion behavior; the element entrance guard does not disable page transitions.

Select a start page

Right-click the page that should open first in Explorer and select Set as start page. This writes a project-root reference such as pages/start.page to avstudio.config. Alternatively, run Pick start page from the Command Palette and select an existing project page. Since 27.0.7 the Explorer command is Set as start page; older screenshots may say Set start page. Creating a page does not automatically make it the start page or add a navigation control to it; configure the start page or a page-flip action as needed.

Use Open page parameters with a page active to define values specific to that page. See page parameters.

Responsive or fixed

Layout	Behavior	Choose it when
responsive	Page flow arranges containers; containers arrange elements	One interface must adapt to different viewports
fixed	Elements use positions and anchoring constraints	The design requires exact geometry

A responsive page fills its viewport. Use page flow and gap to organize its containers. Keep growing content in a scrolling container. You do not need a custom page size simply to match a physical panel.

A fixed layout uses position fields and horizontal/vertical constraints. Test resizing even on a fixed design: the constraints determine which edges remain anchored.

Paths and navigation

Use pages/controls.page for stored page-flip targets and / for the configured start page. Subpage targets may use a relative reference such as ./subs/header.page when the target is inside the same module folder. Relative subpage paths do not apply to page-flip or overlay targets.

Page actions can respond to onLoad and onExit. Configure these deliberately: an action that sends a device command on load executes when the page is entered. See actions and navigation.