Never Search For Svelte Components Again

Published Sep 9, 2022

Table of Contents

The Svelte Inspector

How many times have you bumbled around your editor looking for the component you want to change.

Wouldnโ€™t it be great if you could inspect and open the component inside your editor from your site?

You can thanks to the experimental Svelte inspector option by enabling it inside your config!

Enable For Svelte

For regular Svelte projects using Vite you can enable it inside vite.config.js.

vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      experimental: {
        inspector: true,
      }
    })
  ]
})

Enable For SvelteKit

If youโ€™re using SvelteKit you can enable it inside svelte.config.js.

svelte.config.js
const config = {
  // ...
  vitePlugin: {
    experimental: {
      inspector: true,
    },
  },
}

Configuration

Using the default options the inspector becomes available using the Meta + Shift shortcut but you can change the options.

svelte.config.js
 const config = {
  // ...
  vitePlugin: {
    experimental: {
      inspector: {
        // change shortcut
        toggleKeyCombo: 'meta-shift',
        // hold and release key to toggle inspector mode
        holdMode: true,
        // show or hide the inspector option
        showToggleButton: 'always',
        // inspector position
        toggleButtonPos: 'top-right',
      },
    },
}

Unfortunately thereโ€™s no code completion for the options since itโ€™s experimental, so youโ€™re going to have to look at the available options in the documentation.

Thank you for reading! ๐Ÿ„๏ธ

Support

You can subscribe on YouTube, or consider becoming a patron if you want to support my work.

Patreon
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub