WEB PREVIEW

Design mode without turning on the server

Design mode runs a separate sandboxed Vite development server while the editor is open. Run. Without starting the website Bun process, authentication and DB Only Cake20 View·CSS change modules are updated with HMR.

• Select the current page as well as first-level group pages in app/pages directly from the menu.
• Dynamic, selection, and catch-all pages are rendered by replacing them with a safe preview path.
• Create independent screens using sample props for pages, components, and layouts. You can check it right away.
• Protected pages and login screens are also designed while maintaining the selected Preview path. API mutations are not executed in this mode.
• It remembers the current screen and scroll position and restores them to the same position when redrawn.
• The Preview title at the top is reloaded with two white circular arrows when you hover the mouse. It will change to a cursor, and clicking it will refresh the current Preview.

Check responsiveness by device

• The device and orientation in package.json are initially selected in the editor resolution menu. Reflect. Any changes the user makes in subsequent menus are retained.
• Desktop offers automatic sizes, 1920×1080 and 1280×768.
• It provides iPad Air 13/11 for tablet and iPhone 17 Max/Pro viewport for mobile.
• The selected resolution will be displayed scaled down to its actual proportions within a black device frame.
• The browser retains the horizontal/vertical rotation and the last selection for each device.
• Choose index or another route from Start Page to keep that page visible while selecting other source files. Choose None to resume source-driven page, component, and layout previews.

Check HTML, SVG, and images

• HTML is displayed first to the browser in the middle area, then the browser and script are displayed first. Switch to check.
• SVG provides code editing and image preview together, and also provides results before saving. You can check it.
• PNG, JPEG, WebP, GIF, AVIF, BMP and ICO are displayed as images in the center area.
• For raster images of public and app/assets, click the center image. Open an image editor such as Select Element.
• Even if you select an image or server file, the WEB PREVIEW on the right shows the last web screen. You can keep track of files and application results side by side.

Execute actual inspection

When checking API, authentication, DB, Queue, WebSocket and SSE, complete inspection is performed. Run. Prepare the build/debug review Runtime and perform all server tests If it passes, the same WEB PREVIEW will change to the -test website inspection screen.

• Control the inspection status with the start/end button at the top, and use the open button on the right. Open the started inspection site in a new window.
• While it is possible to start, press the Start button, and while it is possible to open it, press the Start button. The open button with a light gray border gently fades repeatedly to perform the next action. We guide you. Start by maintaining the text and icon colors and only changing the background color. The button is almost white at the fade peak, the open button is mid gray. Display.
• Review Runtime keeps the current screen visible. When it stops, the saved Start Page or source-driven state is restored.
• Open the inspection website in a new window to check actual browser operation and login.
• Schedule a test site cache invalidation when you save from the image editor. On the next run screen, only the cache is cleared and public files are not cached. Replacement images from the same path are also displayed as the latest files.
• When the last editor connection closes or is disconnected for 2 minutes, try running the test website. Shuts off automatically.
• During a review run, element selection keeps the review process running and uses the latest design Preview. It remains available during MCP work and rechecks conflicts before saving if the same file changed.