Take this example app using a Mapbox GL map. We’d like to display the markers, using the component, but we don’t want to have to pass around a reference to the underlying Mapbox instance as a prop on each component.

There are two halves to the context API — setContext and getContext. If a component calls setContext(key, context), then any child component can retrieve the context with const context = getContext(key).

The context object can be anything you like. Like , setContext and must be called during component initialisation; since map isn’t created until the component has mounted, our context object contains a getMap function rather than map itself.

On the other side of the equation, in MapMarker.svelte, we can now get a reference to the Mapbox instance:

Context keys

In you’ll see this line: