How to Create an Online Course and Community with Svelte and SvelteKit

SvelteKit is ideal when you want performance and simple developer experience.

By combining SvelteKit with Embedin, you can launch course delivery and community in the same product with very little overhead.

Why this setup works

SvelteKit handles routing, pages, and app UX
Embedin handles course content, access, and community features
You avoid building lesson systems and forum logic from scratch

Step 1: Build your course in Embedin

Create your course, modules, and lessons in Embedin. Publish your first version and copy the course ID.

You can find the course ID in course settings in Embedin.

Step 2: Allow your SvelteKit domains

Add allowed domains in Embedin course settings:

http://localhost:5173
https://yourdomain.com

Step 3: Add an embedded course route in SvelteKit

Example route: src/routes/academy/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte'

  const courseId = 'YOUR_COURSE_ID'
  let scriptEl: HTMLScriptElement

  onMount(() => {
    scriptEl = document.createElement('script')
    scriptEl.type = 'module'
    scriptEl.src = 'https://embed.embedin.com/course.js'
    scriptEl.setAttribute('data-courseid', courseId)
    document.body.appendChild(scriptEl)

    return () => {
      document.body.removeChild(scriptEl)
    }
  })
</script>

<main>
  <h1>Academy</h1>
  <div id={courseId} data-courseid={courseId}></div>
</main>

Replace YOUR_COURSE_ID with your real course ID from settings.