Course Preview

Svelte Fundamentals

Svelte is a web user-interface framework that compiles components written with HTML, CSS, and JavaScript into browser code. It tracks reactive state so the page updates when application data changes.

itWeb development | OpenSkills.info

Svelte Fundamentals

Svelte is a framework for building web user interfaces from components. A component combines markup, behavior, and scoped styles in a .svelte file. During the build, the Svelte compiler turns that declarative component into JavaScript and CSS that update the browser's Document Object Model, or DOM.

The compiler is central to Svelte's design. It analyzes which values a template reads and generates update code around those relationships. The browser still runs a Svelte runtime, but the compiler can move much of the framework's work from page execution to the build step.

Svelte handles the interface layer. It does not, by itself, define routing, server endpoints, data loading, deployment, or an application directory structure. SvelteKit is the companion application framework for those concerns. A standalone Svelte application can also use another router or build integration.

Component anatomy

A .svelte component can contain three optional sections:

A <script> block holds instance logic. Top-level values are available to the markup.
Markup describes the rendered elements and child components.
A <style> block holds CSS scoped to the component by default.

The file is a superset of HTML. Curly braces insert JavaScript expressions into markup. A component imported with a capitalized name can be used as a markup element. Native lowercase names such as button and input create browser elements.

Continue the course

This section is part of the paid course.

See pricing to subscribe, or log in if you already have access.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources