Auric Artisan Live — Live Server & Preview

Build your site. See it come alive.

Live server and live preview for HTML, CSS, JavaScript and PHP. Work on your website, backend and requests from one VS Code workspace — with live reload, HTTPS, API mocks and real-device testing.

v0.2.1 · 54 commands · 103 settings · English / हिन्दी · No runtime npm dependencies

Install from Marketplace · Website · Release notes

Actual extension UI rendered in a browser test harness. Screenshots use demonstration data, not performance benchmarks or an actual VS Code window.

Quick start · Workspace tour · Browser dashboard · Configuration · Troubleshooting

Quick start

English / हिन्दी

Choose Auto, English or हिन्दी in the Auric Live tab header. Your choice is saved globally in auricLive.interfaceLanguage. Auto follows VS Code's display language, including regional Hindi locales. Switching keeps the server running and retains the current section and request filters.

Auric Live टैब में स्वतः, English या हिन्दी चुनें। भाषा की पसंद सहेजी जाती है। स्वतः विकल्प VS Code की प्रदर्शन भाषा अपनाता है। भाषा बदलने से सर्वर बंद नहीं होता और वर्तमान टैब तथा अनुरोध फ़िल्टर बने रहते हैं।

The control panel, quick settings, Phone QR guidance and common host messages support Hindi. New preview tabs inherit the selected language; reopen an existing preview to update its toolbar. Command Palette and sidebar view labels follow VS Code's display language, not the panel override. Use Configure Display Language in VS Code to change those labels.

Technical setting descriptions, detailed diagnostics and messages without a Hindi translation fall back to English. The injected browser dashboard and the website being served are not translated. URLs, request/response content, commands and configuration values are never rewritten. Translation is bundled locally; no translation service receives your data.

Requires VS Code 1.95+ and a local website folder.

1. Install Auric Artisan Live. For an exact match, search the Extensions view for @id:auric-artisan.auric-artisan-live; clear filters such as @installed.
2. Open your project and run Auric Live: Go Live.
3. Choose Open in browser or Preview beside in the Auric Live panel.
4. Save your HTML, CSS or images. Connected pages update.

Start shortcut: Ctrl+Alt+L on Windows/Linux · Cmd+Alt+L on macOS.

Browser dashboard: Alt+Shift+D inside a served page.

The default port is 5500, with automatic port selection when configured. Save-only reload avoids reacting to every generated or synchronized file. Backend runtimes and framework packages must already be installed.

For machine-only access, set host to 127.0.0.1. The trusted-workspace default, 0.0.0.0, can also serve devices on your LAN, subject to firewall rules. Auric Live is a development server, not public production hosting.

Your development workspace

Five focused sections keep the important controls close to your project.

The panel adapts to narrow editor splits and light, dark and high-contrast themes. Auric OneDrop menus support keyboard navigation, type-ahead, selected states and focus restoration. Quick controls are session overrides; they do not silently rewrite your project configuration.

Follow every request

Search by path, method, status or handler. Combine filters, sort by newest, slowest or largest, then open a request for the details that explain it.

• Inspect on demand; live updates preserve your search field and cursor.
• Pause the display while the server continues capturing traffic.
• Copy curl/fetch, export redacted HAR, or replay eligible captures.
• Keep traffic isolated between active workspace roots.
• View inspector totals and a clearly labelled recent-request p95.

Use Ctrl/Cmd+F in Requests to focus search. Escape closes details and restores focus. The live panel is bounded to 200 rows; its latency sample is not a whole-session percentile.

See what your page is doing

Press Alt+Shift+D to open the browser dashboard over your served website.

Overview, Network, Server, Storage, Environment, Requests and Console organize page health, timings, resource delivery, server state and diagnostics. Unsupported browser measurements are shown as unavailable; cache estimates are distinguished from server-confirmed results.

• Pause or refresh metrics, navigate tabs by keyboard, and use an optional Auric cursor.
• Scroll over content with the wheel or trackpad, or use arrows, Page Up/Down and Home/End.
• Use Space/Shift+Space from focused content without taking over button activation.
• Keep dropdown scrolling inside the menu; Escape dismisses the menu before the dashboard.
• Keep dashboard styles and dropdown state isolated from the website in a Shadow DOM.
• Run the dashboard independently when another framework owns hot reload.

Sampling is demand-driven and pauses with page visibility. Storage summaries do not read stored values. The dashboard makes no external font or branding requests.

Test on the device that matters

Open Phone QR directly in the Auric Live tab. Scan the locally generated code, or copy its address, to open the same served site on your phone.

Keep your phone and computer on the same network and allow the connection through your firewall. QR codes clear when a server stops or its address changes. No address is sent to a QR service.

The editor preview also offers device presets, custom viewport sizes, rotation, scaling, reload and browser handoff. Use a real device to check behavior beyond the preview's simulated dimensions.

HTTPS is encrypted, but certificate trust is separate. Generated certificates do not install trust on your computer or phone. Each client must trust the certificate or its issuer. Imported pairs are checked for matching keys and validity dates; import-dialog passphrases remain session-only.

Serve the front end. Connect the backend.

Runtime detection covers common Node.js/package-script workflows and families including PHP, Python, Ruby, Deno, Bun, .NET, Java, Go and Rust. Detection suggests a target; it does not install tools or guarantee every framework configuration.

The upstream monitor waits for readiness before forwarding requests and can reload pages after recovery. Use a health path for application-level readiness, or leave it empty for TCP availability. Diagnostics are read-only.

Custom profiles support command lines, working directories, environment variables, shell executables and ports. Unrelated configuration changes preserve API routes, session settings and in-memory REST data.

Configuration

Precedence is: built-in defaults → VS Code settings → project config → session overrides. VS Code setting names have the prefix auricLive.; project-file names do not.

Create auric.live.json in the workspace:

{
  "host": "127.0.0.1",
  "port": 5500,
  "open": "none",
  "liveReload": {
    "enabled": true,
    "reloadOnSave": "save",
    "cssHotSwap": true,
    "preserveScroll": true
  },
  "dashboard": {
    "enabled": true,
    "independent": false
  },
  "proxy": [
    { "path": "/api", "target": "http://localhost:3000" }
  ],
  "inspector": {
    "sensitiveFields": ["customerPin"],
    "harIncludeBodies": false
  }
}

For supervised runtimes, URL-only backends, custom network profiles and additional privacy controls, see Advanced testing and diagnostics.

Use Create Config File for a generated configuration example. .auricignore-live controls project-specific exclusions; .auric-live/ holds optional local diagnostic session records and is reserved from serving.

Privacy and deliberate limits

Common credential headers, sensitive query parameters and JSON/form fields are redacted before inspector storage by default. Configure additional field names for your application. Arbitrary personal information or secrets embedded in free-form text may still require manual removal.

HAR excludes bodies by default. Review exports before sharing. Requests with redacted, omitted or truncated input cannot be safely replayed; copy a snippet and supply the missing data manually. Non-read replay methods require confirmation.

Resource limits are configurable where appropriate. Bounded memory, privacy protections and workspace trust remain deliberate safeguards for local development.

Commands

Build and verify

npm ci
npm run check
npx playwright install chromium
npm run test:ui
npm audit
npm run package

$env:AURIC_BROWSER_CHANNEL = "msedge"
npm run test:ui

Troubleshooting

• No live update: confirm reload is enabled, the selected trigger matches your workflow, and the file is not excluded. Use Reload pages for a manual check.
• Repeated refreshes: use the default save-only trigger and inspect reload-storm diagnostics before enabling raw filesystem watching.
• Backend unavailable: run diagnostics, inspect runtime output and verify the configured port/health path. HTTP readiness probes do not follow redirects.
• Phone cannot connect: check the LAN address, host binding, shared network and firewall. Trust HTTPS separately on the phone.
• Empty or expired details: the request may have left the bounded inspector or capture may be disabled. Make a fresh request.
• Session setting reverted: write the permanent choice to the project config or VS Code settings.

See CHANGELOG for release changes and LICENSE for terms.