[Svelte Series 2] How to Read a Component File

You now need the confidence to understand an entire .svelte file end to end. Let's lock in the skeleton of a component with short explanations and confirm the reading order through actual code.

Key terms

1. .svelte file: A Svelte-specific component file that keeps script, markup, and styles inside one document.
2. export let: Declares values a parent will pass down; default values keep components safe even when props are omitted.
3. Block structure: The <script>, markup, and <style> sections that enforce a consistent reading order.
4. State: Variables that hold the data you render. When state changes, the component re-renders automatically.

Core ideas

A component is one slice of the UI. You can duplicate the slice to build card decks or notice grids quickly. State represents the values you want to show, either via local variables or props. Changing state triggers a re-render, so inputs feel responsive. Blocks keep a Svelte file organized: <script> handles logic, markup handles structure, and <style> handles visual polish, so anyone reading the file follows the same sequence.

Code example

Use a project card that touches all three blocks to internalize the base pattern.

<script>
  export let title = "Daily Meal Checker";
  export let summary = "See cafeteria data and allergy info in one view";
</script>

<article class="service-card">
  <h3>{title}</h3>
  <p>{summary}</p>
  <a href="/projects/{title}" class="cta">Open prototype</a>
</article>

<style>
  .service-card { border: 1px solid #eee; padding: 1rem; border-radius: 12px; }
  .cta { color: #0a7; font-weight: 600; }
</style>

The reading order is straightforward. Start with export let to see what the parent provides. Move to the markup to find where those values appear. End with the style block to see the visual finish. Making this order a habit keeps you on track later when assembling full pages.

Why it matters

Layouts like demo-day pages rely on repeating cards, so understanding the structure precisely is mandatory. When each block has a clear role, designers and developers can edit the same file together. Hunting down state first naturally leads into props and events in the next article, then page-level data loading after that.

Practice

• Follow along: build the example above and swap the title and summary twice.
• Extend: add target="_blank" to the .cta link to test opening a new tab.
• Debug: if a title renders empty, confirm you've set a default in export let.
• Done when: two distinct cards render correctly in a list.

Wrap-up

When reading a Svelte component, loop through state → markup → styles repeatedly. Next we will connect this structure to props and event passing.