Component Structure in Svelte

From the Svelte cheat sheet · Setup & Basics · verified Jul 2026

Basic Svelte component anatomy

javascript

<!-- MyComponent.svelte -->
<script>
  let message = 'Hello Svelte';
</script>

<h1>{message}</h1>

<style>
  h1 { color: #ff3e00; }
</style>

🎨 Styles are scoped to component by default

📝 No JSX - write regular HTML with enhancements

🔒 TypeScript support with lang="ts" attribute

⚡ Components compile to efficient JavaScript

More Svelte tasks