Moving from a Script-Tag Setup to
React, Angular, Vue or Svelte

If you added FastGrid to your project with a script tag before version 3.2, it still works. Nothing breaks. But since 3.2, FastGrid also ships as an official npm package for React, Angular, Vue and Svelte. Here is what changes, what doesn't, and how to move over.

What stays the same

• Your grid configuration (columns, data source, formulas, styling) does not need to be rewritten.
• Your license is unaffected. Licensing is per developer/application, not per install method.
• Any backend endpoint returning JSON, XML, XLSX or CSV continues to work unchanged.
• If you're not ready to migrate, the script-tag setup is not deprecated. This is optional, not forced.

What changes

• FastGrid is installed via npm install fastgrid-<framework> instead of being loaded from a <script src="..."> tag.
• The grid is instantiated through a framework-native component/wrapper instead of a global JavaScript object.
• You get TypeScript definitions and IntelliSense support out of the box.
• Build tooling (Vite, webpack, Angular CLI, etc.) now bundles FastGrid instead of the browser loading it separately.

Before you start

• Note your current FastGrid version (check the script tag URL or your local files).
• Export or back up your current grid configuration (column definitions, custom renderers, event handlers).
• Have a staging environment or feature branch ready. Treat this as a normal dependency upgrade, not a hotfix.

Migration steps

1. Scaffold the package for your framework

FastGrid uses a scaffolding command rather than a plain npm install, so it can set up a working example project alongside the package:

npm create fastgrid-react
npm create fastgrid-angular
npm create fastgrid-vue
npm create fastgrid-svelte
npm create fastgrid-html

Run the one matching your stack. This creates a new example project; copy the FastGrid-related dependency and setup into your existing app, or use the generated project as your new starting point if you're migrating a small app.

2. Remove the script tag

Delete the <script> tag that previously loaded FastGrid from your HTML template or layout file.

3. Replace the global instantiation with the framework component

Where you previously wrote something like:

var grid = new TreeGrid(document.getElementById('grid'), config);

you now import and use the framework-native component instead. The exact syntax differs by framework; see the example project generated in step 1, or the corresponding documentation page (FastGridReact.html, FastGridAngular.html, FastGridVue.html, FastGridSvelte.html).

4. Port your configuration object

Your existing column definitions, formulas and cell types map directly onto the component's config prop/input. This is usually a copy-paste, not a rewrite, since the underlying grid engine is unchanged between the script-tag and package versions.

5. Reconnect your event handlers

Move any inline event handlers (onCellChange, onSort, etc.) to the framework's event binding style (props in React, @Output in Angular, emits in Vue, event dispatch in Svelte). Handler logic itself does not need to change.

6. Test data loading and export

Confirm that your data source (JSON/XML/XLSX endpoint) still loads correctly and that export/print functions behave the same as before. This part of the API does not change with the migration.

7. Remove old global references

Once the framework component is confirmed working, remove any leftover references to the old global FastGrid object elsewhere in your codebase.

Common questions during migration

Do I need to rewrite my column definitions?

No. Column, formula and formatting configuration is portable between the script-tag and package versions.

Will this affect my license?

No. Licensing is per developer/application, independent of installation method.

Can I migrate one grid at a time in a large app?

Yes. The script-tag and package versions can coexist during a gradual migration, as long as you're not loading the same FastGrid version twice on the same page.

What if I'm not using React, Angular, Vue or Svelte?

The script-tag setup remains fully supported, and a plain HTML/JavaScript example is also available via npm create fastgrid-html.

Does this apply to FastSheet, TreeGrid or GanttChart too?

Yes for FastSheet, it uses the same packages as FastGrid. TreeGrid and GanttChart do not yet have dedicated framework packages.