Visual debugging for Svelte apps

Watch your components update in real-time. Perfect for debugging reactivity and performance issues.

See DOM Updates Live

Try switching the highlight colors on this page below!

Page Highlight Color

Track DOM Updates

Debug Re-renders

Visual Feedback

Install

NPM PNPM Yarn Bun

npm install -D svelte-render-scan

SvelteKit

Add to your root +layout.svelte file to enable the component in all pages:

<script>
	import { dev } from '$app/environment';
	import { RenderScan } from 'svelte-render-scan';
</script>

{#if dev}
	<RenderScan />
{/if}

Vanilla Svelte

<script>
  import { RenderScan } from 'svelte-render-scan';
</script>

<RenderScan />

Start with render scanning disabled by default:

Move the button left to avoid overlapping with other UI elements:

Hide the render scan button while keeping functionality active:

Adjust how long the render scan highlights remain on screen (default=1000):

Optional user defined function that gets called once per valid mutation:

function customCallback(mutation: MutationRecord) {
	// Custom code...
}

<RenderScan callback={customCallback} />

Use multiple props together:

<RenderScan 
  initialEnabled={false}
  offsetLeft={60}
/>