How to Preview HTML in Cursor

Open the HTML file as an editor tab, right-click the tab, and choose Open in Browser. Cursor renders the file in its browser view. If you want the page to refresh after edits, install a Live Preview extension and start its preview server.

The exact menu location depends on your Cursor release. In newer layouts, Open in Browser may appear on the HTML editor tab rather than in the Explorer file tree.

Quick start

Open your project folder in Cursor.
Open an .html file so it is visible as an editor tab.
Right-click the editor tab.
Select Open in Browser.
Edit the HTML, CSS, or JavaScript and reload the preview when needed.

This works well for a standalone HTML file that uses relative CSS, JavaScript, and image paths. For automatic refresh, use the workflow below.

Use Live Preview for automatic refresh

For vanilla HTML, CSS, and JavaScript, a Live Preview extension provides a local-server workflow. It watches your files and refreshes the rendered page after changes.

Open Cursor’s Extensions view.
Search for Live Preview.
Install the extension you choose after checking its publisher and permissions.
Open the HTML file.
Run the extension’s Show Preview command or use its preview button.
Keep the preview tab open while editing. Save changes if the extension is configured to refresh on save.

Live Preview is useful when your page has several files because relative paths are served from a local URL instead of being opened as a file:// document.

Minimal project to test

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Cursor preview test</title>
</head>
<body>
  <main class="card">
    <h1>Hello from Cursor</h1>
    <p id="status">JavaScript has not run yet.</p>
    <button id="change" type="button">Change message</button>
  </main>
  <script src="app.js" defer></script>
</body>
</html>

/* styles.css */
body { font-family: system-ui, sans-serif; margin: 3rem; }
.card { max-width: 34rem; padding: 2rem; border: 1px solid #ddd; border-radius: 12px; }

// app.js
document.querySelector('#change').addEventListener('click', () => {
  document.querySelector('#status').textContent = 'The preview is running JavaScript.';
});

Preview a single HTML file without an extension

For a self-contained file, Open in Browser is usually enough. Keep CSS inside a <style> element and JavaScript inside a <script> element if you want a one-file test.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
  </style>
</head>
<body>
  <button id="hello">Click me</button>
  <script>
    document.querySelector('#hello').addEventListener('click', () => {
      alert('The HTML preview can run JavaScript.');
    });
  </script>
</body>
</html>

Preview multi-file sites correctly

Use a local preview server when your page imports modules, fetches JSON, uses client-side routing, or depends on relative asset paths.

Relative assets: keep styles.css, scripts, fonts, and images under the project folder and reference them with relative paths.
ES modules: load scripts with <script type="module">; a local server avoids many restrictions associated with file://.
Fetch requests: serve the JSON file from the same local origin or configure the API to allow the preview origin.
Client-side routes: open the app’s root URL first. A static preview server may need fallback handling for deep links.

Preview React, Vue, and other framework projects

Framework projects should use their normal development server. Open the project folder in Cursor, install dependencies, start the command defined by that project’s documentation, then open the resulting localhost URL in Cursor’s browser.

# Inspect the scripts supplied by the project
cat package.json

# Common examples; use the command your project defines
npm install
npm run dev
# or
npm start

The exact command and port vary by framework and repository. Cursor’s browser can open the localhost address printed by the development server. Framework hot-module reload is generally more reliable than treating the generated app as a standalone HTML file.

Use Cursor’s Browser visual editor

When the Browser visual editor is available in your build, it can support interactive iteration beyond simple rendering. You can inspect the rendered layout, select an element, describe a change, and ask the agent to adjust the source. It is useful for grid and flexbox arrangement, typography, and element-level visual changes.

Availability and controls can differ between Cursor’s classic Explorer layout and newer Glass or Agents layouts. Treat the visible commands in your installed version as authoritative.

When “Open in Browser” is missing

Confirm that the HTML file is open as an editor tab, not only selected in the file tree.
Right-click the tab and look for Open in Browser.
Use the Command Palette and search for browser or preview commands.
Install Live Preview and use its Show Preview command.
For a framework app, start its development server and open the printed localhost URL.
Reload or update Cursor if the command disappeared after a layout or version change.

Troubleshooting

Symptom	Likely cause	Fix
The command is not in the Explorer menu	The action is attached to the editor tab in your layout.	Open the file, right-click its tab, and choose Open in Browser.
CSS or images do not load	A relative path is wrong or the file is outside the served project.	Check paths and open the project root in Cursor. Use a local preview server.
JavaScript runs only after a manual reload	You are using direct file rendering without a watcher.	Install Live Preview or use the framework’s development server.
`fetch()` fails for a local JSON file	Browser origin restrictions affect `file://` documents.	Serve the project over localhost and request the JSON from that origin.
Module scripts are blocked	The page was opened directly from disk.	Use Live Preview or another local HTTP server.
Changes do not appear	The preview is stale, the file was not saved, or caching is involved.	Save the file, use the preview reload control, and check that the preview URL points to the current project.
Framework route returns a 404 on refresh	The preview server lacks a history fallback.	Use the framework’s dev server or configure fallback routing for the app.
Preview is blank	There is a runtime error, invalid markup, or a page waiting on a failed request.	Open developer tools, inspect the console and network errors, then fix the first reported failure.

Preview checklist

Open the correct project folder.
Open the HTML file as an editor tab.
Use the tab context menu for Open in Browser.
Use Live Preview for automatic reload of vanilla projects.
Use the framework’s own development server for React, Vue, and similar apps.
Inspect console and network errors when the page is blank or incomplete.
Check viewport behavior with the same browser dimensions your users will see.

Or skip the browser setup

If you need a rendered image or PDF instead of an interactive development preview, ScreenshotNeo captures a URL through one API request. It accepts cookie and consent banners, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and lets you control each step. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; the response identifies the result with X-Page-Verdict and X-Billed headers. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python

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(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', buffer));

The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.

Performance, reliability, and cost notes

Local preview: browser rendering is immediate for small static files, while framework builds can take longer as dependencies and bundles grow.
Reload cost: automatic reload reruns JavaScript and network requests, so debounce expensive initialization during development.
Repeatability: use a fixed viewport, local fixtures, and deterministic data when comparing screenshots.
Remote capture: wait for a selector, delay, or network idle when the page needs asynchronous content. Block unnecessary ads, trackers, or resource types to reduce noise and load time.
Billing: ScreenshotNeo bills only clean shots. Failed loads, bot checks, blank pages, timeouts, and cache hits cost nothing, and verdict headers show what happened.

FAQ

Can I preview HTML without leaving Cursor?

Yes. Use Open in Browser from the HTML editor tab, or use Live Preview for a local preview URL.

Does Cursor automatically refresh a plain HTML file?

Direct browser opening does not provide the full watcher workflow. Install Live Preview for automatic refresh.

Which method should I use for React or Vue?

Run the project’s normal development server and open its localhost URL in Cursor’s browser.

Is there a universal keyboard shortcut?

Do not rely on one. Cursor releases and layouts can expose different commands; use the visible tab menu or Command Palette.

Can I generate a shareable screenshot of the preview?

Use ScreenshotNeo to capture a deployed or otherwise reachable URL as PNG, JPEG, WebP, or PDF. Its API and MCP tools support automation from scripts and AI agents.