Viewer

In dev mode you’ll see a cross-hairs button in the lower right corner. This is Kitbook’s Viewer that allows you to:

• easily select components on the page
• view current component props
• view component variants
• easily create a new variants file for a component if you don’t have one yet
• and much more planned.

These docs will be updated in the future as the tool is fleshed out. It’s kind of a hybrid between Nuxt DevTools and Storybook, but much simpler than both of those.

For now, why don’t you try activating it by clicking the button and selecting one of your components that you’d like to create variants for. Click the Add Variant from Current State button (this will be more interesting if you choose a component with props) and you should find yourself in VSCode with a new file. If you selected Button.svelte for example, you’ll now see yourself looking at a file named Button.variants.ts. You’ll notice it’s an array of variants, and you have been given one to start, using the current props of the component you just clicked on. Now you probably want to continue on to learn more about [Component Variants].