---
title: "Svelte Integration | Docs"
description: "Use ZingGrid with Svelte. Check out this quick walkthrough on how to add ZingGrid to your Svelte project."
url: https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/svelte
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/svelte.md
mode: provenance
representation: markdown
origin_response_id: 3f06348191082322226de515de4ffa46
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.732Z
version_nonce: 569b048b0f064fef9e63626502158213
generated_at_utc: 2026-11-10T16:08:03.158Z
response_nonce: ccbadd2aaba74ea28ba8d084a7ce05af
```

# Svelte Integration
ZingGrid works with your development stack, including Svelte! In this guide, we'll walk you through how to add ZingGrid to your Svelte 3 project.

## Usage

1. For this example we'll start with a new Svelte app:

    ```shell
    npx degit sveltejs/template zinggrid-svelte-helloworld
    cd zinggrid-svelte-helloworld
    npm install
    npm install zinggrid
    npm run dev
    ```

    You can now view the app in a browser at `localhost:8080` (check the output of `npm run dev`, it might be running on a different port).

2. In the `<script>` section of `App.svelte`, import ZingGrid. We'll also remove the `name` component property:

    ```javascript
    <script>
      import 'zinggrid'
    </script>
    ```

3. Now remove the contents of `<main>` and replace them with a `zing-grid` component:

    ```javascript
    <main>
      <zing-grid />
    </main>
    ```

    When you save the file, the page should refresh and show an empty ZingGrid, with the message `There are no records to display`.

4. Let's add some data and update the `zinggrid` component to show it. First, define the data in the `<script>` section:

    ```javascript
    <script>
      import 'zinggrid'

      const data = [
        {"name": "Sousage", "breed": "Dachshund"},
        {"name": "Plop", "breed": "Corgi"},
        {"name": "Floof", "breed": "Pomeranian"}
      ]
    </script>
    ```

5. Change the `zing-grid` component to look like this:

  ```javascript
  <main>
    <zing-grid caption="Dogs" data={JSON.stringify(data)} />
  </main>

  Altogether, this is what it'll look like (the unused styles have been removed as well):

  ```javascript
  <script>
  	import 'zinggrid'

  	const data = [
        {"name": "Sousage", "breed": "Dachshund"},
        {"name": "Plop", "breed": "Corgi"},
        {"name": "Floof", "breed": "Pomeranian"}
  	]
  </script>

  <main>
  	<zing-grid caption="Dogs" data={JSON.stringify(data)} />
  </main>

  <style>
  	main {
  		padding: 1em;
  		margin: 0 auto;
  	}
  </style>
  ```

For more details on integrating ZingGrid into a Svelte app, see [this article](https://blog.zingsoft.com/using-zinggrid-with-svelte-3/).