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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/astro.md
mode: provenance
representation: markdown
origin_response_id: 2d5391d4a3fd75ac88bde8d3be57bfee
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.728Z
version_nonce: 4f87418c4a036b80c782444816e4b3b4
generated_at_utc: 2026-10-25T14:44:46.961Z
response_nonce: dfcc6ef27f91e827ec0467d5e5bba5ac
```

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

## Usage

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

    ```shell
    npm create astro@latest
    ```

    You can now view the app in a browser at `localhost:3000`.

2. First, include the ZingGrid library (prferably deferred) in `src/layouts/Layout.astro`:

    ```html
    <!-- ... -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="description" content="Astro description" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
        <!-- ZingGrid Library -->
    	  <script is:inline defer src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      </head>
      <body>
        <slot />
      </body>
    </html>
    <!-- ... -->
    ```

3. Then create a component in `src/components/Grid.astro` with ZingGrid in it that will have a `data` prop to allow us to pass data to the grid.

    ``` javascript
    ---
    const { data } = Astro.props;
    ---

    <zing-grid data={data}></zing-grid>
    ```

4. Then, let's add the grid component to `src/pages/index.astro` and pass data to it.
Run `npm run dev` to preview your Astro app!

    ```javascript
    ---
    import Grid from '../components/Grid.astro';
    import Layout from '../layouts/Layout.astro';

    const myData = JSON.stringify([{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]);
    ---

    <Layout>
    <header> <!-- ... --> </header>
      <main>
        <Grid data={myData} />
      </main>
    </Layout>
    ```

For more details on integrating ZingGrid into a Astro app, see the articles below:
- [Part 1](https://blog.zingsoft.com/adding-data-tables-and-grids-to-your-astro-site-the-easy-way-2/)
- [Part 2](https://blog.zingsoft.com/adding-zinggrid-to-your-astro-site-the-easy-way-part-2-2/)