How to Use Visual Studio Web Live Preview
Learn how to enable Web Live Preview for Web Forms, distinguish it from VS Code and ASP.NET Core Hot Reload, and troubleshoot missing previews.
Web Live Preview is a Visual Studio IDE feature for Web Forms projects. It shows page edits in a running application. It is separate from the VS Code Live Preview extension and from ASP.NET Core Hot Reload.
The exact controls can vary by Visual Studio release. The steps below reflect Microsoft’s documented Web Forms workflow and a Microsoft Q&A enablement path, so confirm the labels in your installed version.
What Web Live Preview is—and what it is not
| Tool | Host | Project family | Primary purpose |
|---|---|---|---|
| Web Live Preview | Visual Studio IDE | ASP.NET Web Forms | Preview edits in a running Web Forms app |
| Live Preview extension | Visual Studio Code | Web files supported by the extension | Browser preview from VS Code |
| ASP.NET Core Hot Reload | Visual Studio or .NET CLI | ASP.NET Core and supported .NET projects | Apply supported code or style edits while the app runs |
| Edge debugging | Visual Studio with Microsoft Edge | Web applications | JavaScript breakpoints, inspection, and DevTools |
Microsoft introduced Web Live Preview in the Visual Studio 2022 Web Forms context. That description establishes its purpose, but it is not a guarantee that every Visual Studio version exposes identical controls or supports every edit.
How do I use Web Live Preview in Visual Studio?
- Confirm the host product. Open the full Visual Studio IDE, not Visual Studio Code.
- Confirm the project type. Web Live Preview is intended for ASP.NET Web Forms. An ASP.NET Core project follows the Hot Reload workflow described later.
- Open the option page. Select Tools > Options.
- Choose the Web Forms designer. Open Web Forms Designer > General. If your release exposes the setting, select Web Live Preview as the Web Forms designer.
- Restart Visual Studio. Restart when the IDE requests it; restarting also helps when the designer selection does not appear immediately.
- Open a Web Forms page. Open an .aspx page in the Web Forms designer and start the project using its normal run or debug command.
- Edit and observe. Change markup or styles that the installed designer supports and watch the running preview update. Unsupported changes may require a rebuild, refresh, or application restart.
The setting path above comes from a Microsoft Q&A troubleshooting response. Treat menu names as release-dependent and check the documentation for the exact Visual Studio build you use.
A small Web Forms example
With a Web Forms page open in the designer, edit a control and its CSS. For example:
<asp:Label ID="StatusLabel" runat="server"
CssClass="status"
Text="Preview is running" />
<style>
.status {
display: inline-block;
padding: 0.75rem 1rem;
color: white;
background: #2563eb;
border-radius: 0.5rem;
}
</style>Save the file and observe the running page. If the change does not appear, refresh the preview and check the troubleshooting section below. Web Live Preview is a designer and preview workflow; it is not a promise that every server-side, startup, or project-wide change can be applied without a restart.
Preview versus debugging
You do not need JavaScript debugging merely to display a live preview. If you need breakpoints or browser inspection, use Visual Studio’s Edge debugging workflow as a separate step:
- Start the application with the Edge preview channel from Visual Studio.
- Enable script debugging in the relevant Visual Studio debugging settings.
- Attach the JavaScript debugger when the application is running.
- Open Edge DevTools from the design window to inspect the DOM, styles, console, and network activity.
This workflow is useful when the preview looks wrong because of client-side JavaScript, but it is not required for ordinary Web Forms visual editing.
Web Live Preview or ASP.NET Core Hot Reload?
Choose based on the project family:
- Web Forms: use the Web Forms Designer and Web Live Preview path.
- ASP.NET Core: use ASP.NET Core Hot Reload and Browser Refresh. Microsoft documents Hot Reload support for ASP.NET Core projects in .NET 6 and later, with behavior depending on project type, target framework, configuration, and the kind of edit.
In MVC and Razor Pages apps, supported edits can trigger a browser refresh. Blazor can rerender components for supported changes. Startup logic such as middleware, configured services, and route creation generally is not rerun for ordinary edits, and unsupported edits can require a restart. See Microsoft’s ASP.NET Core Hot Reload documentation for current support details.
From the .NET CLI, the equivalent workflow is:
dotnet watchUse dotnet watch --no-hot-reload to disable Hot Reload. When an edit is unsupported, dotnet watch can ask whether to restart the application.
Why is Web Live Preview missing from Visual Studio?
- You are using VS Code. Web Live Preview in Visual Studio and the VS Code Live Preview extension are different products. Open the project in Visual Studio if you need the Web Forms designer.
- The project is not Web Forms. ASP.NET Core projects use Hot Reload and Browser Refresh instead.
- The option is hidden or named differently. Look under Tools > Options > Web Forms Designer > General and compare the label with your installed release.
- The IDE has not restarted. Restart Visual Studio after changing the designer selection.
- The required workload or project tooling is absent. Use Visual Studio Installer to verify the web development tooling appropriate for the project, then reopen the solution.
- You opened a file outside the designer workflow. Open the Web Forms page in the Web Forms designer and run the application normally.
Troubleshooting checklist
| Symptom | Likely cause | Fix |
|---|---|---|
| No Web Live Preview menu | VS Code, wrong project type, or release-specific UI | Use Visual Studio IDE, confirm Web Forms, and inspect Web Forms Designer options. |
| Preview stays unchanged | File was not saved, preview needs refresh, or edit is unsupported | Save, refresh, rebuild, and restart the app if necessary. |
| Server-side change is ignored | Startup or server logic cannot be applied live | Stop and rerun the application. |
| JavaScript behaves differently | Client-side exception or stale browser state | Open Edge DevTools, inspect Console and Network, and enable script debugging. |
| ASP.NET Core instructions do not work | Web Forms and ASP.NET Core workflows were mixed | Use the project’s Hot Reload documentation and verify .NET version, Debug configuration, and settings. |
| Hot Reload prompts for a restart | The edit is a “rude edit” unsupported at runtime | Accept the restart or undo the edit and apply a supported change. |
Performance and reliability considerations
- Keep the application running while making small, focused edits; large structural changes are more likely to require a rebuild.
- Separate visual preview problems from application problems. A browser console error, failed request, or server exception can look like a designer failure.
- Use a normal run configuration first. Add JavaScript debugging only when you need breakpoints or DevTools.
- Do not treat a live update as proof that production behavior is correct. Test full server startup, authentication, routing, and data access separately.
- For ASP.NET Core, check framework and configuration support before relying on Hot Reload in a team workflow.
Or skip the browser setup
If your goal is a clean image of a page rather than interactive editing inside Visual Studio, ScreenshotNeo provides a website screenshot API. Send one request with a URL and receive PNG, JPEG, WebP, or PDF output.
cURL (see the ScreenshotNeo API docs):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Is Web Live Preview available in Visual Studio Code?
No. Visual Studio Web Live Preview and the VS Code Live Preview extension are separate tools with different setup paths.
Does Web Live Preview work for every ASP.NET project?
Do not assume that. The feature is described for Web Forms. ASP.NET Core uses its own Hot Reload and Browser Refresh workflow.
Do I need to enable JavaScript debugging?
No. Enable it only when you need JavaScript breakpoints, console inspection, or Edge DevTools.
Why did my edit require a restart?
Some server startup, routing, configuration, and other structural changes cannot be applied safely while the app is running. Save the work, restart the application, and verify the result.
Where should I check version-specific behavior?
Check the documentation for your installed Visual Studio and .NET release. Microsoft has not published a single complete compatibility matrix covering every Web Live Preview version, workload, project type, and edit.
