Never Search For Svelte Components Again

Table of Contents

• The Svelte Inspector
• Enabling The Svelte Inspector
• Configuration

The Svelte Inspector

The Svelte Inspector is part of the @sveltejs/vite-plugin-svelte package found in most Svelte and SvelteKit projects which helps you find any element on the page in your code editor:

Enabling The Svelte Inspector

To enable the Svelte Inspector inside your project, open the Svelte config:

export default {
	vitePlugin: {
		inspector: true
	}
}

Configuration

You can start using the Svelte Inspector by pressing the Alt + X shortcut by default and configure the plugin options if you want:

export default {
  vitePlugin: {
    inspector: {
      toggleKeyCombo: 'alt-x',
      showToggleButton: 'always',
      toggleButtonPos: 'bottom-right'
    }
  }
}