---
title: "Vanilla JS Example | Docs"
description: "View an outline of the web component (markup) implementation of the library and how to manipulate that markup with Vanilla JavaScript."
url: https://www.zinggrid.com/docs/integrations/vanilla-js
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/vanilla-js.md
mode: provenance
representation: markdown
origin_response_id: 054ca3bf9baaa87156aa1b08659bba3b
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.733Z
version_nonce: 745a11f67771471b6e03da58bb5ec47d
generated_at_utc: 2026-10-23T02:05:41.955Z
response_nonce: f3d33f47c52b1c5f53fd8ee24ae0debe
```

# Vanilla JS

ZingGrid has full functionality when using Vanilla JavaScript with no additional frameworks! In this guide, we provide an outline of the web component (markup) implementation of the library and how to manipulate that markup with Vanilla JavaScript. We will be building up to a grid that changes data at a set interval.

## Usage

1. Include the following dependencies in your HTML file, like so:

    ```html
    <html>
      <head>
        <script src="path/to/zinggrid.min.js" defer></script>
      </head>
    </html>
    ```

2. Create a ` <zing-grid>` component:

    ```html
    <zing-grid></zing-grid>
    ```

3. Configure your grid through attributes within `<zing-grid>`. In this example, we'll add the `id`, `theme`, `caption`, `data` attributes:

    ```html
    <zing-grid
      id="example-grid"
      data='[
        {
          "firstName": "John",
          "lastName": "Doe",
          "age": 45
        },
        {
          "firstName": "Jane",
          "lastName": "Doe",
          "age": 44
        },
      ]'
      theme="default"
      caption="Meet the Doe Family">
    </zing-grid>
    ```

4. Use JavaScript to change your grid data every second:

    ```javascript
    const zingGridRef = document.querySelector('#example-grid');
    zingGridRef.executeOnLoad(function() {
      setInterval(function() {
        const newData = [
          {
            firstName: 'John Jr.',
            lastName: 'Doe',
            age: Math.floor(15 * Math.random())
          },
          {
            firstName: 'Jane Jr.',
            lastName: 'Doe',
            age: Math.floor(13 * Math.random())
          }
        ];
        zingGridRef.setAttribute('data', JSON.stringify(newData));
      }, 1000);
    });
    ```

### Vanilla JS Grid with Changing Data

Here is our completed grid which changes the data it displays every second:

[Example code](https://app.zingsoft.com/demos/embed/1YHHKOCH)