---
title: "Your First Grid | Getting Started | Docs"
description: "In this guide, you will learn how to download, import, and render your first ZingGrid. Watch the video and follow along with the getting started example grid."
url: https://www.zinggrid.com/docs/getting-started/your-first-grid
---
```text
experiment_id: web-retrieval-v1
fixture_id: /docs/getting-started/your-first-grid.md
mode: provenance
representation: markdown
origin_response_id: f7f6fc24ff266ef13c06a9d2643f216a
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.713Z
version_nonce: d69421ce757401828cffaffb44d419fe
generated_at_utc: 2026-10-27T07:02:54.444Z
response_nonce: 48cbcb7cf6fd18b32375255f64c9d796
```
# Your First Grid
ZingGrid is a powerful JavaScript library for rendering interactive HTML grids and data tables.
[Example code](https://app.zingsoft.com/demos/embed/64MVXSMG)
> **Tip:** Use the **Edit** button on any demo within our docs to fork it, which will open it in our integrated [ZingGrid editor](https://app.zingsoft.com/demos/embed/64MVXSMG). Alternatively, you can use your text editor of choice to edit any demos as well.
> **Tip:** Do you use VS Code? Check out our [ZingGrid Language Server Protocol Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=zingsoft.zinggrid-lsp). It includes type-ahead support for all of the ZingGrid tags and CSS variables!
[Youtube demo video](https://www.youtube.com/embed/I2zzfv2tLRk?enablejsapi=1&origin=https%3A%2F%2Fwww.zinggrid.com)
## Importing the Library
There are a few options to import the ZingGrid library- via the CDN link, Node Package Manager (npm), or Direct Download.
### CDN Link
For the **quickest** setup, copy and paste the `
```
> **Tip:** The ``
```
### Direct Download
To direct download ZingGrid, visit [our site](https://www.zinggrid.com/download) or [our public GitHub repository](https://github.com/ZingGrid/zinggrid). Then, you can import your ZingGrid project as shown below:
```html
```
> **Tip:** [You can also directly download the library zip here](https://github.com/ZingGrid/zinggrid/archive/master.zip).
## Rendering the Grid
Now that you have imported the ZingGrid library into your environment, you can create your first grid. This is as simple as creating a `` tag in the `` element of your HTML document and adding attributes, like so:
```html
```
> **Note:** The main library features are **typically** attributes added to the top-level ```` tag. You can find the full list of available attributes and features in our [API references docs](https://www.zinggrid.com/docs/api/tags/zing-grid).
## Moving Forward
Congrats on creating your first working grid! You should now understand the basics of importing and rendering ZingGrid. If you need more information on how to integrate this with your preferred, client-side framework, check out our integration demos:
- [Vanilla Js](https://www.zinggrid.com/docs/integrations/vanilla-js)
- [React](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/react)
- [Vue](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/vue)
- [Angular](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/angular)
- [jQuery](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/jquery)
- [NextJS](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/nextjs)
- [NestJS](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/nestjs)
- [Svelte](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/svelte)
If you do not see your framework listed above, please [let us know](https://www.zinggrid.com/contact).
### Next Steps
We suggest following the "Getting Started" section of our docs in order. The next step is getting your data integrated. If you want to learn more about getting started with data in ZingGrid, read our [Data Basics guide](https://www.zinggrid.com/docs/data-basics). If you're ready to hook up a remote data source, check out our [Remote Data guide](https://www.zinggrid.com/docs/remote-data).