KitDocs Documentation

In Svelte templates, the casing of a tag determines its type:

• Lowercase tags (e.g., <div>, <button>) are treated as standard HTML elements.
• Capitalized tags (e.g., <Widget>, <Namespace.Widget>) are treated as Svelte components.

Components must be imported in the <script> block before use.

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget/>
</div>

You can create reactive statements by prefixing a top-level statement with the $: label. These statements run immediately before the component updates, whenever the values they depend on change.

Rules:

• Dependency Tracking: Svelte automatically determines dependencies by looking at which variables appear inside the $: block.
• Multiple Statements: You can combine multiple statements within a single $: block using curly braces.
• Automatic Declaration: If a reactive statement assigns a value to an undeclared variable, Svelte will inject a let declaration for you.

<script>
	export let title;

	// updates whenever `title` changes
	$: document.title = title;

	$: {
		console.log(`multiple statements can be combined`);
		console.log(`the current title is ${title}`);
	}
</script>

The sidebar title for a page is determined using the following priority order:

1. The value returned by the resolveTitle option in the sidebar request handler.
2. The sidebar_title property in the Markdown file's frontmatter.
3. The title property in the Markdown file's frontmatter.
4. The first heading (# Heading) found in the file.
5. The filename converted from kebab-case to Title Case (e.g., my-file becomes My File).

By default, CSS defined within a <style> block in a Svelte component is scoped to that component. Svelte achieves this by adding a unique hash-based class (e.g., svelte-123xyz) to the elements affected by the styles, ensuring they do not leak to other components.

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

Svelte's reactivity is triggered by assignments. To update component state and cause a re-render, assign a new value to a locally declared variable.

Important Notes:

• Update Expressions: Expressions like count += 1 or property assignments like obj.x = y trigger updates.
• Array/Object Methods: Methods that mutate in-place (like .push() or .splice()) do not trigger updates. To trigger an update after using these methods, you must perform a subsequent assignment to the variable (e.g., arr = arr).

<script>
	let arr = [0, 1];

	function handleClick () {
		// this method call does not trigger an update
		arr.push(2);
		// this assignment will trigger an update
		arr = arr;
	}
</script>

While a component should ideally have only one top-level <style> tag, you can nest <style> tags inside other elements or logic blocks. Note that nested <style> tags are inserted into the DOM exactly as-is; they are not processed or scoped by Svelte, meaning they will act as global styles.

<div>
  <style>
    /* this style tag will be inserted as-is */
    div {
      /* this will apply to all `<div />` elements in the DOM */
      color: red;
    }
  </style>
</div>

KitDocs uses gray-matter to process YAML frontmatter at the top of your Markdown files. You can use these properties to define page titles, descriptions, and custom sidebar titles.

---
title: Page Title
description: Page description.
sidebar_title: Custom Sidebar Title
---

# {$frontmatter.title}