RevoGrid Installation

You can use RevoGrid in three common ways:

• package manager installation for app projects
• direct CDN usage for prototypes or no-build pages
• framework wrappers for React, Angular, Vue, and Svelte

If you are not sure where to start, use the package-manager flow and register the custom elements loader once in your application entrypoint.

TIP

RevoGrid's API is consistent across all major frameworks. Transfer your experience and knowledge from one framework to another.

Can't find your framework?

Ask us or open an issue on GitHub.

Angular – Setup and usage in Angular environments.

React – Usage within React applications.

Svelte – Integrating into Svelte projects.

Vue 2 – Specific adaptations for Vue 2.

Vue 3 – Detailed guide for integrating with Vue 3.

Install from a package manager

Install the core package:

npm

npm i @revolist/revogrid

pnpm

pnpm add @revolist/revogrid

yarn

yarn add @revolist/revogrid

bun

bun add @revolist/revogrid

Register the Web Components loader

RevoGrid ships as Web Components. Register them once before rendering any grid:

import { defineCustomElements } from '@revolist/revogrid/loader';

defineCustomElements();

This is the standard entrypoint for JavaScript and TypeScript applications. If you are using a framework wrapper, its own installation guide will show the package to install and the wrapper-specific setup.

Minimal JavaScript or TypeScript setup

Once the loader is registered, render the grid and assign data:

const grid = document.querySelector('revo-grid');

grid.columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'email', name: 'Email' },
];

grid.source = [
  { name: 'Ada Lovelace', email: '[email protected]' },
  { name: 'Grace Hopper', email: '[email protected]' },
];

No-build integration

For a quick proof of concept, load the grid directly from a CDN.

Script tag

<script src="https://unpkg.com/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>

ES modules

<script type="module">
  import { applyPolyfills, defineCustomElements } from 'https://unpkg.com/@revolist/revogrid@latest/loader';

  applyPolyfills().then(() => {
    defineCustomElements();
  });
</script>

Use the module version when you want a more explicit initialization flow or need compatibility support through applyPolyfills.

Which package should you install?

• Core JavaScript/TypeScript: @revolist/revogrid
• React wrapper: start at React Data Grid
• Angular wrapper: start at Angular Data Grid
• Vue 3 wrapper: start at Vue 3 Data Grid
• Svelte wrapper: start at Svelte Data Grid

Common next steps

• Quick Start: first grid in plain JavaScript.
• TypeScript Data Grid: typed columns and data models.
• Standalone and ES Modules: framework-free module usage.
• SSR: when the browser-only runtime affects your app shell.