# No-Build JavaScript Usage
URL: https://pro.rv-grid.com/guides/installation-no-build/
Source: src/content/docs/guides/installation-no-build.mdx
Description: Use a delivered RevoGrid Pro JavaScript build directly from the browser without a bundler.
Use this setup when you want to load a delivered RevoGrid Pro JavaScript build from a plain HTML file, a static page, or a server-rendered page that does not use a JavaScript build pipeline.

RevoGrid Pro is not published as a public browser CDN package. Use the JavaScript/CSS build delivered from the portal, or install the private npm package in projects that have a build step. The no-build example below assumes the delivered Pro `dist` files are copied into your app.

## Live Preview

This preview uses the same grid configuration as the no-build HTML example below.

1. Copy the delivered Pro build into your static assets.

   Keep the whole Pro `dist` folder together because the ESM entry imports sibling chunk files.

   ```txt
   public/
     vendor/
       revogrid-pro/
         revogrid-pro.js
         revogrid-pro.css
         revogrid-pro*.js
   ```

2. Add the Pro stylesheet from your hosted asset path.

   ```html
   <link
     rel="stylesheet"
     href="/vendor/revogrid-pro/revogrid-pro.css"
   />
   ```

3. Load the public RevoGrid Core web component from jsDelivr.

   ```html
   <script src="https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>
   ```

4. Add an import map for Core package imports and the delivered Pro bundle.

   The standalone Core script defines `<revo-grid>`. The `@revolist/revogrid` import map entry is still required because the Pro ESM bundle imports Core helpers by package name.

   ```html
   <script type="importmap">
     {
       "imports": {
         "@revolist/revogrid": "https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/dist/index.js",
         "@revolist/revogrid-pro": "/vendor/revogrid-pro/revogrid-pro.js"
       }
     }
   </script>
   ```

5. Import the Pro plugins from a module script.

   ```html
   <script type="module">
     import {
       AdvanceFilterPlugin,
       ColumnStretchPlugin,
       FilterHeaderPlugin,
       RowOddPlugin,
     } from "@revolist/revogrid-pro";

     const grid = document.querySelector("revo-grid");
     grid.plugins = [
       AdvanceFilterPlugin,
       ColumnStretchPlugin,
       FilterHeaderPlugin,
       RowOddPlugin,
     ];
   </script>
   ```

## Complete HTML Example

Save this as an HTML file and open it through any static web server. Do not use a `file://` URL; browser module imports should be served over HTTP.

<CodePreview
  files={[
    { label: 'index.html', lang: 'html', code: noBuildExample },
  ]}
/>

The Pro ESM bundle imports `@revolist/revogrid` as a package name. Browsers do not resolve npm package names by themselves, so the import map tells the browser where each package entry points in your hosted assets.
