---
title: "Interactive ESM Template"
slug: "interactive-esm-template"
updated: 2025-12-19T10:19:31Z
published: 2025-12-19T10:19:31Z
canonical: "support.dise.com/interactive-esm-template"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.dise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive ESM Template

[The ShuffleGame template](https://bitbucket.org/diseinc/sampletemplates/src/main/Samples/ShuffleGame/) is a fun example of how to write a large interactive brain-twister-game to show off what can be achieved in a HTML template.

1. The game has two modes. One where the goal is to move the red tile to a highlighed area on the board and the other, a number-sorting game, where the goal is to end up with the numbered tiles ordered and the blank space in the lower right cell.
2. The code-design is strictly Object Oriented.
3. In modern browsers, (e.g. Chrome 61+), the template can be hosted without bundling, but we are including examples of bundling using either of ESBuild or WebPack. The ESBuild is done by command-line args, while a generic webpack_config.js is used for WebPack. This can be re-used for any template. Both output to "template.js" which is the same as TS-bundling would do for a classic (namespaced, non-module) template. This means the same script can be used for zip'ing both.