### Svelte Deck Project Setup Commands

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Provides essential bash commands for setting up a new Svelte Deck presentation project, including cloning the repository, installing dependencies, starting the development server, building for production, and running various development tasks like type checking, formatting, and linting.

```bash
# Clone the repository
git clone https://github.com/joysofcode/svelte-deck
cd svelte-deck

# Install dependencies (using pnpm, npm, or yarn)
pnpm install
# or
npm install
# or
yarn install

# Start development server
pnpm dev
# Runs on http://localhost:5173

# Build for production
pnpm build

# Preview production build
pnpm preview

# Type checking
pnpm check

# Format code
pnpm format

# Lint code
pnpm lint
```

--------------------------------

### Project Setup and Commands

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Instructions for cloning the Svelte Deck repository, installing dependencies, and running development or production builds.

```APIDOC
## Project Setup and Commands

Install and configure a new Svelte Deck presentation project.

```bash
# Clone the repository
git clone https://github.com/joysofcode/svelte-deck
cd svelte-deck

# Install dependencies (using pnpm, npm, or yarn)
pnpm install
# or
npm install
# or
yarn install

# Start development server
pnpm dev
# Runs on http://localhost:5173

# Build for production
pnpm build

# Preview production build
pnpm preview

# Type checking
pnpm check

# Format code
pnpm format

# Lint code
pnpm lint
```

Project configuration in `src/routes/+page.ts`:

```typescript
// Disable SSR for client-side presentation
export const ssr = false
```
```

--------------------------------

### Markdown External File Format Example

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

An example of the expected format for external markdown files used with Svelte Deck. It shows how to define slides, include code blocks with syntax highlighting, and use horizontal rules to separate slides.

```markdown
## Slide 1

You can write the entire presentation in Markdown using an external Markdown file.

---

## Slide 2

```js [2|1-3]
function love() {
  console.log('Svelte')
}
```

---

## Slide 3

- Point one
- Point two
- Point three
```

--------------------------------

### Svelte Presentation Structure

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Demonstrates how to compose a complete presentation by structuring multiple Svelte components within the main presentation file. This includes examples of title slides, content slides, vertical navigation, animated transitions, and markdown integration.

```svelte
<!-- src/lib/deck/presentation.svelte -->
<script>
  import Slide from './slide.svelte'
  import Code from './code.svelte'
  import Markdown from './markdown.svelte'
  import Notes from './notes.svelte'
</script>

<!-- Title slide -->
<Slide>
  <h1>Building Modern Web Apps</h1>
  <p>with Svelte and SvelteKit</p>
  <Notes>
    Welcome everyone! Today we'll explore Svelte.
  </Notes>
</Slide>

<!-- Content slides -->
<Slide>
  <h2>Why Svelte?</h2>
  <ul>
    <li>Compile-time framework</li>
    <li>No virtual DOM</li>
    <li>Truly reactive</li>
  </ul>
</Slide>

<!-- Vertical navigation section -->
<Slide>
  <Slide>
    <h2>Core Concepts</h2>
  </Slide>
  <Slide>
    <h3>Reactivity</h3>
    <Code lines="1|3|5">
      {`
        let count = 0

        $: doubled = count * 2

        <button on:click={() => count++}>
          {count}
        </button>
      `}
    </Code>
  </Slide>
  <Slide>
    <h3>Components</h3>
    <p>Everything is a component</p>
  </Slide>
</Slide>

<!-- Animated transitions -->
<Slide id="demo" animate>
  <div data-id="box" class="w-20 h-20 bg-blue-500" />
</Slide>

<Slide id="demo" animate>
  <div data-id="box" class="w-40 h-40 bg-green-500" />
</Slide>

<!-- Markdown content -->
<Markdown>
  {`
    ## Markdown Support

    You can mix **HTML** and **Markdown**!
  `}
</Markdown>

<!-- External markdown -->
<Markdown name="advanced-topics.md" external />

<!-- Closing slide -->
<Slide>
  <h2>Thank You!</h2>
  <p>Questions?</p>
  <Notes>
    Open floor for Q&A. Remember to mention the GitHub repo.
  </Notes>
</Slide>
```

--------------------------------

### Svelte Deck Markdown Component API

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Describes the props for the `Markdown` component in Svelte Deck, including `name` and `external` for loading markdown content from external files. Provides examples for both inline and external markdown usage.

```typescript
// Markdown Component Props
interface MarkdownProps {
  name?: string               // Filename for external markdown
  external?: boolean          // Load from external file
}

// Usage - Inline
<Markdown>
  {`## Title\nContent`}
</Markdown>

// Usage - External
<Markdown name="slides.md" external />
```

--------------------------------

### Svelte Deck Code Component API

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Outlines the props for the `Code` component in Svelte Deck, such as `id` for animation, `lines` for highlighting specific line ranges, and `noescape` to preserve HTML entities. Shows example usage.

```typescript
// Code Component Props
interface CodeProps {
  id?: string | null          // ID for auto-animation matching
  lines?: string | boolean    // Line highlighting (e.g., "1|3|5-7")
  noescape?: boolean          // Preserve HTML entities
}

// Usage
<Code id="code-block" lines="1-3|5" noescape>
  {`code here`}
</Code>
```

--------------------------------

### Svelte Deck Slide Component API

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Details the props available for the Svelte Deck `Slide` component, including `id` for auto-animation, `animate` to enable animations, and `restart` to reset the animation sequence. Includes usage examples.

```typescript
// Slide Component Props
interface SlideProps {
  id?: string | null          // ID for auto-animation matching
  animate?: boolean           // Enable auto-animation
  restart?: boolean           // Restart animation sequence
}

// Usage
<Slide id="unique-id" animate restart>
  <p>Content</p>
</Slide>
```

--------------------------------

### Svelte Reveal.js Instance Configuration

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Shows how to initialize and configure Reveal.js within a Svelte component. This includes enabling plugins like Markdown, Highlight, and Notes, and setting various presentation options such as auto-animation, navigation, and transitions.

```svelte
<!-- src/lib/deck/slides.svelte -->
<script>
  import { onMount } from 'svelte'
  import Reveal from 'reveal.js'
  import Highlight from 'reveal.js/plugin/highlight/highlight'
  import Markdown from 'reveal.js/plugin/markdown/markdown'
  import Notes from 'reveal.js/plugin/notes/notes'

  import 'reveal.js/dist/reveal.css'
  import 'reveal.js/dist/theme/black.css'
  import 'reveal.js/plugin/highlight/monokai.css'

  import Presentation from './presentation.svelte'

  onMount(() => {
    const deck = new Reveal({
      // Enable plugins
      plugins: [Markdown, Highlight, Notes],

      // Auto-animation settings
      autoAnimateEasing: 'ease',
      autoAnimateDuration: 1,

      // URL hash navigation
      hash: true,

      // Control visibility
      controls: true,
      progress: true,

      // Additional options
      slideNumber: true,
      keyboard: true,
      overview: true,
      center: true,
      touch: true,
      loop: false,
      rtl: false,
      shuffle: false,
      fragments: true,
      embedded: false,
      help: true,
      showNotes: false,
      transition: 'slide', // none/fade/slide/convex/concave/zoom
      transitionSpeed: 'default', // default/fast/slow
      backgroundTransition: 'fade'
    })

    deck.initialize()

    // Access deck API after initialization
    deck.on('slidechanged', event => {
      console.log('Slide changed:', event.indexh, event.indexv)
    })
  })
</script>

<div class="reveal">
  <div class="slides">
    <Presentation />
  </div>
</div>
```

--------------------------------

### Create Basic Slides with Svelte Deck

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Demonstrates how to create basic and animated slides using the `<Slide>` component in Svelte Deck. Supports optional auto-animation and restarting animation sequences.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
</script>

<!-- Basic slide -->
<Slide>
  <p class="capitalize">Welcome to Svelte Deck 🔥</p>
</Slide>

<!-- Animated slide with ID -->
<Slide id="intro" animate>
  <p class="capitalize">This slide will auto-animate</p>
</Slide>

<!-- Restart animation on this slide -->
<Slide id="intro" animate restart>
  <p class="capitalize">Animation sequence restarts here</p>
</Slide>
```

--------------------------------

### Core Components API Reference

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Details the props and usage for Svelte Deck's core presentation components: Slide, Code, Markdown, and Notes.

```APIDOC
## Core Components API Reference

Core component props and usage patterns for all presentation components.

### Slide Component

**Props:**
- `id` (string | null) - Optional: ID for auto-animation matching.
- `animate` (boolean) - Optional: Enable auto-animation.
- `restart` (boolean) - Optional: Restart animation sequence.

**Usage:**
```svelte
<Slide id="unique-id" animate restart>
  <p>Content</p>
</Slide>
```

### Code Component

**Props:**
- `id` (string | null) - Optional: ID for auto-animation matching.
- `lines` (string | boolean) - Optional: Line highlighting (e.g., "1|3|5-7").
- `noescape` (boolean) - Optional: Preserve HTML entities.

**Usage:**
```svelte
<Code id="code-block" lines="1-3|5" noescape>
  {`code here`}
</Code>
```

### Markdown Component

**Props:**
- `name` (string) - Optional: Filename for external markdown.
- `external` (boolean) - Optional: Load from external file.

**Usage - Inline:**
```svelte
<Markdown>
  {`## Title\nContent`}
</Markdown>
```

**Usage - External:**
```svelte
<Markdown name="slides.md" external />
```

### Notes Component

**Props:**
- None (simple slot wrapper).

**Usage:**
```svelte
<Notes>
  Speaker notes here
</Notes>
```
```

--------------------------------

### Display Code Blocks with Highlighting in Svelte Deck

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Shows how to use the `<Code>` component to display syntax-highlighted code, with options for progressive line highlighting using the `lines` attribute, and preserving HTML content with `noescape`.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
  import Code from '$lib/deck/code.svelte'
</script>

<!-- Highlight specific lines progressively -->
<Slide animate>
  <Code id="code" lines="1|3|5-7">
    {`
      function greet(name) {
        // This line highlights first
        const message = \`Hello, ${name}!`
        // These lines highlight third
        console.log(message)
        return message
      }
    `}
  </Code>
</Slide>

<!-- Code block without line numbers -->
<Slide animate>
  <Code id="snippet">
    {`
      const data = await fetch('/api/users')
      const users = await data.json()
    `}
  </Code>
</Slide>

<!-- Preserve HTML in code with noescape -->
<Slide animate>
  <Code lines="1-3" noescape>
    {`
      <div class="container">
        <span>Preserved HTML</span>
      </div>
    `}
  </Code>
</Slide>
```

--------------------------------

### Svelte External Markdown File Loading

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Illustrates how to load presentation content from external markdown files in Svelte using the `<Markdown>` component with the `external` attribute. This promotes better organization for larger presentations.

```svelte
<script>
  import Markdown from '$lib/deck/markdown.svelte'
</script>

<!-- Load from static/slides.md -->
<Markdown name="slides.md" external />

<!-- Load from static/intro.md -->
<Markdown name="intro.md" external />

<!-- Load from static/conclusion.md -->
<Markdown name="conclusion.md" external />
```

--------------------------------

### Svelte Auto-Animating Code Blocks with IDs

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Demonstrates how to create smooth transitions between different code states in Svelte using the Code component and matching IDs. This allows for animating specific lines or ranges of code as the slide progresses.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
  import Code from '$lib/deck/code.svelte'
</script>

<!-- Initial code state -->
<Slide animate>
  <Code id="code" lines="1">
    {`
      <Slide animate>
        <!-- content -->
      </Slide>
    `}
  </Code>
</Slide>

<!-- Expanded code - new lines animate in -->
<Slide animate>
  <Code id="code" lines="2">
    {`
      <Slide animate>
        <Code lines="1|3">
          <!-- code here -->
        </Code>
      </Slide>
    `}
  </Code>
</Slide>

<!-- Complete example - smooth transitions -->
<Slide animate>
  <Code id="code" lines="3-5|1-7">
    {`
      <Slide animate>
        <Code lines="1|3">
          {code`
            console.log('Hello World')
          `}
        </Code>
      </Slide>
    `}
  </Code>
</Slide>
```

--------------------------------

### Svelte Inline Markdown Rendering

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Shows how to render markdown content directly within Svelte components using the `<Markdown>` component. This is useful for including formatted text, lists, and code blocks within slides.

```svelte
<script>
  import Markdown from '$lib/deck/markdown.svelte'
</script>

<!-- Inline markdown -->
<Markdown>
  {`
    ## Introduction to Svelte

    Svelte is a **radical new approach** to building user interfaces.

    - Truly reactive
    - No virtual DOM
    - Less code

    ### Key Features

    1. Compile-time optimization
    2. Built-in state management
    3. Scoped CSS by default
  `}
</Markdown>

<!-- Another markdown slide -->
<Markdown>
  {`
    ### Code Example

    ```javascript
    let count = 0

    function increment() {
      count += 1
    }
    ```

    **Note:** This code is reactive by default!
  `}
</Markdown>
```

--------------------------------

### SvelteKit SSR Configuration for Presentations

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Configures a SvelteKit project to disable Server-Side Rendering (SSR), ensuring the presentation runs purely on the client-side. This is typically done in the `src/routes/+page.ts` file for presentation frameworks.

```typescript
// Disable SSR for client-side presentation
export const ssr = false
```

--------------------------------

### Svelte Deck Notes Component API

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Details the `Notes` component in Svelte Deck, which acts as a simple slot wrapper for speaker notes. It has no specific props and is used for embedding explanatory text.

```typescript
// Notes Component Props
interface NotesProps {
  // No props - simple slot wrapper
}

// Usage
<Notes>
  Speaker notes here
</Notes>
```

--------------------------------

### Animate List Elements with Svelte Deck

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Demonstrates progressive disclosure and reordering of list items using the `animate` prop on slides with matching IDs. This creates dynamic list animations.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
</script>

<!-- Initial list state -->
<Slide id="list" animate>
  <ul>
    <li>React</li>
    <li>Solid</li>
    <li>Svelte</li>
    <li>Vue</li>
  </ul>
</Slide>

<!-- Reordered list - items smoothly rearrange -->
<Slide id="list" animate>
  <ul>
    <li>Svelte</li>
    <li>React</li>
    <li>Solid</li>
    <li>Vue</li>
  </ul>
</Slide>

<!-- Updated list item - changes animate -->
<Slide id="list" animate>
  <ul>
    <li>Svelte ❤️</li>
    <li>React</li>
    <li>Solid</li>
    <li>Vue</li>
  </ul>
</Slide>
```

--------------------------------

### Create Vertical Slide Navigation in Svelte Deck

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Shows how to implement vertical navigation within a presentation by nesting `<Slide>` components. This allows for hierarchical structuring of slides.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
</script>

<!-- Horizontal slide -->
<Slide>
  <p>Main topic</p>
</Slide>

<!-- Vertical slide group -->
<Slide>
  <Slide>
    <p>Subtopic 1</p>
  </Slide>
  <Slide>
    <p>Subtopic 2</p>
  </Slide>
  <Slide>
    <p>Subtopic 3</p>
  </Slide>
</Slide>

<!-- Next horizontal slide -->
<Slide>
  <p>Next main topic</p>
</Slide>
```

--------------------------------

### Auto-Animate Elements Across Slides with Svelte Deck

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Illustrates how to create smooth transitions and morphing effects for elements across slides using matching `id` attributes and the `animate` prop. Elements with `data-id` will animate between states.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
</script>

<!-- First slide state -->
<Slide id="boxes" animate>
  <p class="capitalize">Cool transitions</p>
  <div class="flex gap-2 place-content-center">
    <div data-id="box-1" class="w-[100px] h-[100px] bg-gray-400" />
    <div data-id="box-2" class="w-[100px] h-[100px] bg-gray-400" />
    <div data-id="box-3" class="w-[100px] h-[100px] bg-gray-400" />
  </div>
</Slide>

<!-- Second slide state - elements morph smoothly -->
<Slide id="boxes" animate>
  <p class="capitalize">Moving boxes</p>
  <div class="flex gap-2 place-content-center">
    <div data-id="box-1" class="w-[200px] h-[200px] bg-red-400" />
    <div data-id="box-2" class="w-[200px] h-[200px] bg-green-400" />
    <div data-id="box-3" class="w-[200px] h-[200px] bg-blue-400" />
  </div>
</Slide>
```

--------------------------------

### Svelte Adding Speaker Notes with Notes Component

Source: https://context7.com/joysofcode/svelte-deck/llms.txt

Demonstrates how to include speaker notes within Svelte slides using the `<Notes>` component. These notes are visible in presenter mode but hidden from the audience.

```svelte
<script>
  import Slide from '$lib/deck/slide.svelte'
  import Notes from '$lib/deck/notes.svelte'
</script>

<Slide>
  <h2>Quarterly Results</h2>
  <p>Revenue increased by 45%</p>

  <Notes>
    Remember to mention:
    - Q1 vs Q2 comparison
    - Market conditions
    - Future projections
    Don't forget to pause for questions!
  </Notes>
</Slide>

<Slide>
  <h2>Technical Architecture</h2>
  <img src="/diagram.png" alt="Architecture" />

  <Notes>
    Walk through each component slowly.
    Be prepared to answer questions about:
    - Scalability concerns
    - Security measures
    - Deployment strategy
  </Notes>
</Slide>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.