# examples
**Repository Path**: mirrors_handsontable/examples
## Basic Information
- **Project Name**: examples
- **Description**: Examples for Handsontable component
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-10-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Every example here is a real, self-contained project you can clone, run,
and copy into your own codebase.
The same examples power the live demos in the
[Handsontable documentation](https://handsontable.com/docs) and at
**[demos.handsontable.com](https://demos.handsontable.com)**, where you can open any
of them in the browser, edit the code, switch the Handsontable version, and share a
permanent link. No install needed.
## Client examples
Each folder in [`examples/`](./examples) is an independent project with its own
`package.json` and lockfile. Install and run one on its own; there is no root
install step.
| Example | What it shows | Live demo |
|---------|---------------|-----------|
| [`example1`](./examples/example1) | Vanilla TypeScript (Vite), the general-purpose feature tour | [Open](https://demos.handsontable.com/?example=example1) |
| [`javascript`](./examples/javascript) | Plain JavaScript (Vite) | [Open](https://demos.handsontable.com/?example=javascript) |
| [`typescript`](./examples/typescript) | TypeScript (Vite) | [Open](https://demos.handsontable.com/?example=typescript) |
| [`react`](./examples/react) | React with TypeScript (Vite) | [Open](https://demos.handsontable.com/?example=react) |
| [`react-js`](./examples/react-js) | React with JavaScript (Vite) | [Open](https://demos.handsontable.com/?example=react-js) |
| [`vue`](./examples/vue) | Vue 3 (Vite) | [Open](https://demos.handsontable.com/?example=vue) |
| [`angular`](./examples/angular) | Angular | [Open](https://demos.handsontable.com/?example=angular) |
| [`next.js`](./examples/next.js) | Next.js, App Router | [Open](https://demos.handsontable.com/?example=next.js) |
| [`next-shadcn.js`](./examples/next-shadcn.js) | Next.js with shadcn/ui | [Open](https://demos.handsontable.com/?example=next-shadcn.js) |
| [`nuxt`](./examples/nuxt) | Nuxt 3 | [Open](https://demos.handsontable.com/?example=nuxt) |
| [`astro`](./examples/astro) | Astro | [Open](https://demos.handsontable.com/?example=astro) |
| [`remix`](./examples/remix) | Remix | [Open](https://demos.handsontable.com/?example=remix) |
| [`ant-design`](./examples/ant-design) | Handsontable themed to match Ant Design | [Open](https://demos.handsontable.com/?example=ant-design) |
| [`mui`](./examples/mui) | Handsontable themed to match MUI | [Open](https://demos.handsontable.com/?example=mui) |
| [`base-web`](./examples/base-web) | Handsontable themed to match Base Web | [Open](https://demos.handsontable.com/?example=base-web) |
| [`fluent-ui`](./examples/fluent-ui) | Handsontable themed to match Fluent UI | [Open](https://demos.handsontable.com/?example=fluent-ui) |
## Server examples
Each folder in [`server-examples/`](./server-examples) is a full stack: a backend
plus a Handsontable frontend, demonstrating server-side **pagination, sorting,
filtering and CRUD** through the `dataProvider` plugin. Useful when your dataset is
too large to send to the browser at once.
| Example | Backend |
|---------|---------|
| [`express`](./server-examples/express) | Express.js (Node) |
| [`nestjs`](./server-examples/nestjs) | NestJS (Node) |
| [`django`](./server-examples/django) | Django REST Framework (Python) |
| [`rails`](./server-examples/rails) | Ruby on Rails |
| [`laravel`](./server-examples/laravel) | Laravel (PHP) |
| [`symfony`](./server-examples/symfony) | Symfony (PHP) |
| [`spring`](./server-examples/spring) | Spring Boot (Java) |
Each ships a `docker-compose.yml` and its own README with setup instructions.
## Quick start
```bash
git clone https://github.com/handsontable/examples.git
cd examples/examples/react # or any other folder under examples/
pnpm install
pnpm dev # then open the URL it prints
```
Every example has `dev` and `build`; most also have `preview` to serve the built
output. Run `pnpm run` in an example folder to see its own scripts, and check its
README for anything specific. Angular, for instance, also answers to `pnpm start`
and serves on a different port.
## Copying an example to a separate repo
The examples are deliberately standalone, so this is mostly a copy:
1. Copy the example folder somewhere outside this repository:
```bash
cp -R examples/react ~/my-handsontable-app
cd ~/my-handsontable-app
```
2. Edit `package.json`: set `name`, `version` and `description` to your own, and
drop the `license` field or replace it with yours.
3. Initialise a repository and install:
```bash
git init && git add -A && git commit -m "Initial commit"
pnpm install
```
4. Every example depends on `handsontable@latest` so the demos always show the
current release. Pin a real version before you ship:
`pnpm add handsontable@`, plus the matching `@handsontable/*-wrapper`
if the example uses one.
Nothing in an example folder reaches outside itself, so no other files need to come
with it.
## Try it without installing anything
**[demos.handsontable.com](https://demos.handsontable.com)** runs every example in
this repository live, in the browser:
- **Any Handsontable version**: switch versions and watch the same code re-render.
- **Two runtimes behind one editor**: simple examples bundle in the browser with
the open-source [Sandpack](https://sandpack.codesandbox.io/) bundler; the
meta-framework examples (Next.js, Nuxt, Astro, Remix, Angular) run a real dev
server in a container, so SSR behaves the way it does locally.
- **Permanent share links**: save an edited demo and link to it.
It also renders every code example from the Handsontable documentation guides. The
system is self-hosted and lives in [`runner/`](./runner); its
[README](./runner/README.md) and [`docs/`](./runner/docs) cover the design.
## Repository layout
| Path | What it is |
|------|------------|
| `examples/` | The 16 client examples above. Independent projects. |
| `server-examples/` | The 7 server-side stacks above. Independent projects. |
| `runner/` | The self-hosted demo runner behind demos.handsontable.com. |
| `runner/apps/authoring/public/docs-examples/` | **Generated**: a snapshot of every documentation-guide example, imported from the docs repository. Do not edit by hand; it is the bulk of this repository's size. |
## Contributing
Want to add a new example, or fix one? See [CONTRIBUTING.md](./CONTRIBUTING.md).
There's a registration step that's easy to miss and fails silently if skipped.
## License
The example code in this repository is MIT-licensed, see [LICENSE](./LICENSE). Copy
it, change it, ship it.
Handsontable itself is separate, commercial software, dual-licensed:
- **Free** for non-commercial use such as teaching, academic research and
evaluation: [read the license](https://github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf).
- **Commercial**, with support and maintenance: see [pricing](https://handsontable.com/pricing).
The examples install Handsontable under the non-commercial evaluation terms. Using
one as the basis for a commercial product means buying a license.
## Get help
Ask in [GitHub Discussions](https://github.com/handsontable/handsontable/discussions),
or read the [documentation](https://handsontable.com/docs). Commercial license
holders with an active support plan can reach the
[support team](https://handsontable.com/contact?category=technical_support)
directly.
Found something broken in an example? Please
[open an issue](https://github.com/handsontable/examples/issues).