Skip to main content
Retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation. createContext is a type-safe alternative.

​
Signature

function getContext<T>(key: any): T

​
Parameters

​
key
any
required
The key used by a parent component when calling setContext. This should match exactly the key used in the parent.

​
Returns

​
context
T
Returns the context object that was set by a parent component, or undefined if no parent has set a context with this key.

​
Example

​
Parent Component

<!-- Parent.svelte -->
<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';

  setContext('api', {
    baseUrl: 'https://api.example.com',
    async fetch(endpoint) {
      const response = await fetch(this.baseUrl + endpoint);
      return response.json();
    }
  });
</script>

<Child />

​
Child Component

<!-- Child.svelte -->
<script>
  import { getContext } from 'svelte';

  const api = getContext('api');

  let data = $state(null);

  async function loadData() {
    data = await api.fetch('/users');
  }

  $effect(() => {
    loadData();
  });
</script>

{#if data}
  <ul>
    {#each data as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{/if}

​
Nested Child Component

<!-- GrandChild.svelte -->
<script>
  import { getContext } from 'svelte';

  // Can access context from any ancestor component
  const api = getContext('api');
</script>

<p>API Base URL: {api.baseUrl}</p>

​
Type-Safe Context

For better type safety, use createContext: 
// context.ts
import { createContext } from 'svelte';

interface API {
  baseUrl: string;
  fetch(endpoint: string): Promise<any>;
}

export const [getAPI, setAPI] = createContext<API>();

<!-- Parent.svelte -->
<script>
  import { setAPI } from './context';
  
  setAPI({
    baseUrl: 'https://api.example.com',
    async fetch(endpoint) {
      const response = await fetch(this.baseUrl + endpoint);
      return response.json();
    }
  });
</script>

<!-- Child.svelte -->
<script>
  import { getAPI } from './context';
  
  const api = getAPI(); // Fully typed!
</script>

​
Notes

  • Must be called during component initialisation (not in callbacks or effects)
  • Returns undefined if no parent component has set a context with the given key
  • Use hasContext to check if a context exists before calling getContext
  • Context lookup traverses up the component tree until it finds a matching key