This package enables you to use Curi alongside Svelte. This package relies on the Svelte store.


npm install @curi/svelte
yarn add @curi/svelte

If you prefer to use script tags, Unpkg will always have the latest version of @curi/svelte available for you.

<script src="https://unpkg.com/@curi/svelte@1.0.0-beta.4/dist/curi-svelte.js" />

There is also a minimized version available if you change the filename to svelte.min.js. The package will be attached to the window as window.CuriSvelte.



The components exported by @curi/svelte rely on Svelte's store. The store should include a router property for accessing the Curi router and a curi property for accessing the latest response and action values.

import { Store } from 'svelte/store';

const router = curi(history, routes);
const store = new Store({
  curi: { response: null, action: null }

Add a subscriber to the router to update the store whenever a new response is emitted.

router.respond((response, action) => {
  store.set({ curi: { response, action } });

As far as rendering your application goes, you should should have a base component that has any global layout and uses the response to render the correct component(s). Setup a one time subscriber to render this component and make sure to pass the store to the component.

<NavLinks />
<:Component {$curi.response.body}></:Component>

  import NavLinks from './NavLinks.html';

  export default {
	  components: { NavLinks }
import app from './components/app';

// use a one time subscriber for the initial render
config.respond(() => {
  view = new app({ target, store });
}, { once: true });