> For the complete documentation index, see [llms.txt](https://docs.whisk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whisk.com/shopping-list-sdk/basic-setup/using-with-spa.md).

# Using With SPA

Many sites update content dynamically, and it’s possible to do this with Whisk SDK.

## Updating Widget

For example, your user switches from one recipe page to another and you want to update the recipe URL for the widget. For that, you need to remove the old widget definition and create a new one.

```javascript
whisk.queue.push(function () {
  // Creating widget
  whisk.shoppingList.defineWidget('myWidget', {
    recipeUrl: 'https://first-recipe-url',
  });
  // Removing widget
  whisk.remove('myWidget');
  // Creating new widget
  whisk.shoppingList.defineWidget('myWidget', {
    recipeUrl: 'https://second-recipe-url',
  });
});
```

Make sure you call display with updated widget id:

```javascript
whisk.queue.push(function() {
    whisk.display('myWidget');
});    
```

## Updating Event Listeners

Same logic applies for event listeners. Whenever you want to update listener just remove it and create a new one.

```javascript
whisk.queue.push(function () {
  // Creating listener
  whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://first-recipe-url',
  });
  // Removing listener
  whisk.listeners.removeClickListener('myButton');
  // Creating new listener
  whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://second-recipe-url',
  });
});
```

## Subscriptions

Whenever you remove widget or event listeners, all subscriptions will be removed as well. So whenever you update your widget or event listener don't forget to subscribe to desired events again.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.whisk.com/shopping-list-sdk/basic-setup/using-with-spa.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.