This repository contains over 300 examples on how to use Ignite UI for Web Components:
- Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
- Maps: Geographic Map, Treemap,
- Gauges: Bullet Graph, Linear Gauge, Radial Gauges
- Grids: Table / Grid, Excel Spreadsheet, Excel Library
- Other: Dock Manager, Date Picker, Multi-Column Combobox
NOTE: Use the master branch to run samples locally. Use the vnext branch only when contributing new samples.
You can preview and browse all samples by opening our Web Components Browser. Alternatively, view samples with detailed documentation in the Web Components Documentation.
In addition, you can run each sample project individually from the ./samples folder or you can run project containing all samples npm run dev to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the Edit Sandbox button in a readme file of sample project, e.g.
./samples/charts/category-chart/overview/README.md
Clone the repository and install dependencies:
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
cd igniteui-wc-examples
git checkout master
npm installStart the Astro development server:
npm run devOpen http://localhost:4200 in your browser. You will see a navigation sidebar listing all samples. The dev server compiles samples on demand — no full build required.
npm run buildThis runs two steps automatically:
prebuild— generatespublic/assets/code-viewer/**/*.jsonfiles used by the docs site to display sample source code tabsastro build— compiles all ~900+ samples into static HTML + JS indist/
To preview the production build locally:
npm run previewOpens http://localhost:4200 serving the dist/ output exactly as it would be deployed.
-
Create a new branch from
vnext -
Copy an existing sample folder as a starting point, e.g.:
./samples/charts/category-chart/axis-options/ → ./samples/charts/category-chart/axis-types/
-
The folder structure must be exactly
samples/{group}/{component}/{name}/with:index.html— sample markup (only the content inside<body>, wrapped in<div id="root">)src/index.ts— sample TypeScript entry point, exporting a class (e.g.export class Sample { ... })package.json— with"main": "src/index.ts"(used by Astro to discover the sample)
-
Implement your sample in
src/index.ts. Export the class but do not instantiate it at the module level — the browser app callsnew Sample()automatically when the page loads. -
Start the dev server and verify:
npm run dev- The new sample appears in the navigation sidebar
- It loads without errors in the browser console
- Regenerate the code-viewer JSON files:
npm run generate:code-viewer- Commit, push, and open a pull request targeting
vnext. Include a screenshot of the running sample.
Do not manually edit version strings in package.json files.
- Open ./scripts/update-ig.js
- Update the version in the
packageUpgradesarray - Run from the repo root:
npm run update:ig
npm install- Create and merge a pull request with the updated
package.jsonfiles
| Script | Description |
|---|---|
npm run dev |
Start Astro dev server on port 4200 |
npm run build |
Generate code-viewer JSONs then build static site to dist/ |
npm run preview |
Serve the dist/ production build on port 4200 |
npm run generate:code-viewer |
Regenerate public/assets/code-viewer/**/*.json |
npm run update:ig |
Update Ignite UI package versions across all sample package.json files |
npm run check |
Run Astro TypeScript type-checking |
To learn more about Ignite UI for Web Components, check out the Web Components documentation.
- run
npm install --legacy-peer-deps - create a pull request with your changes
- open the igniteui-xplat-examples repo in VS Code
- update the version of Ignite UI for WebComponent packages in the WC template
- create a pull request with your changes in the igniteui-xplat-examples repo