# Svelte Typescript > This is the full developer documentation for Svelte and SvelteKit. ## Pages - [Svelte Typescript Documentation](svelte-typescript-documentation.md) - [Overview](overview.md): Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components writ... - [Getting started](getting-started.md): We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the offici... - [.svelte files](svelte-files.md): Components are the building blocks of Svelte applications. They are written into`.svelte`files, using a superset of... - [.svelte.js and .svelte.ts files](sveltejs-and-sveltets-files.md): Besides`.svelte`files, Svelte also operates on`.svelte.js`and`.svelte.ts`files. - [What are runes?](what-are-runes.md): [!NOTE] **rune** /ruːn/ _noun_ - [$state](state.md): The`$state`rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes. - [$derived](derived.md): Derived state is declared with the`$derived`rune: - [$effect](effect.md): Effects are functions that run when state updates, and can be used for things like calling third-party libraries, dra... - [$props](props.md): The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components j... - [$bindable](bindable.md): Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app. - [$inspect](inspect.md): [!NOTE]`$inspect`only works during development. In a production build it becomes a noop. - [$host](host.md): When compiling a component as a [custom element](custom-elements), the`$host`rune provides access to the host eleme... - [Basic markup](basic-markup.md): Markup inside a Svelte component can be thought of as HTML++. - [{#if ...}](if.md): {#if expression}...{/if} - [{#each ...}](each.md): {#each expression as name}...{/each} - [{#key ...}](key.md): {#key expression}...{/key} - [{#await ...}](await.md): {#await expression}...{:then name}...{:catch name}...{/await} - [{#snippet ...}](snippet.md): {#snippet name()}...{/snippet} - [{@render ...}](render.md): To render a [snippet](snippet), use a`{@render ...}`tag. - [{@html ...}](html.md): To inject raw HTML into your component, use the`{@html ...}`tag: - [{@attach ...}](attach.md): Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($sta... - [{@const ...}](const.md): The`{@const ...}`tag defines a local constant. - [{@debug ...}](debug.md): The`{@debug ...}`tag offers an alternative to`console.log(...)`. It logs the values of specific variables whenever... - [bind:](bind.md): Data ordinarily flows down, from parent to child. The`bind:`directive allows data to flow the other way, from child... - [use:](use.md): [!NOTE] - [transition:](transition.md): A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change. - [in: and out:](in-and-out.md): The`in:`and`out:`directives are identical to [`transition:`](transition), except that the resulting transitions a... - [animate:](animate.md): An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animation... - [style:](style.md): The`style:`directive provides a shorthand for setting multiple styles on an element. - [class](class.md): There are two ways to set classes on elements: the`class`attribute, and the`class:`directive. - [await](await-2.md): As of Svelte 5.36, you can use the`await`keyword inside your components in three places where it was previously una... - [Scoped styles](scoped-styles.md): Svelte components can include a``element containing CSS that belongs to the component. This CSS is _scoped_ ... - [Global styles](global-styles.md): To apply styles to a single selector globally, use the`:global(...)`modifier: - [Custom properties](custom-properties.md): You can pass CSS custom properties — both static and dynamic — to components: - [Nested `