4
V1ModuleStructure
Mees van der Wijk edited this page 2025-08-28 00:26:25 +02:00

V1 Module Structure

V1 modules represent the legacy approach to building Getiyo modules. They can be identified by having a module.json file. They have several limitations: all TypeScript files are combined into a single global scope, modern JavaScript standards like import/export statements aren't supported, and there's no capability to import external Node packages. These constraints make development less efficient and maintainable. Additionally gmt watch is not supported for V1 modules. For a significantly improved development experience with modern features, we strongly recommend using V2 modules for all new module development.

Each module in Getiyo comprises four key components: module.json, a server-side script, a user page, and optionally a control/external page. The detailed structure of each component is outlined below. You can automatically set up this file structure by using the GetiyoModuleTool, as described in the ["Setting up a development environment]"(./ModuleEnvironment) section of the documentation.

Module.json

The module.json file serves as the central configuration file for each module in Getiyo. It contains essential metadata that informs Getiyo about the module's identity, as well as the module's properties, triggers, and conditions. The GetiyoModuleTool can automatically generate this file for you, streamlining the setup process. However, if you want to modify or add properties, triggers, or conditions, you can refer to the module.json section in the documentation. To learn more about configuring the module.json file and its various elements, consult the Module JSON section in the documentation.

Server-Side

The server-side component of a Getiyo module is comprised of one or more TypeScript or JavaScript files, organized according to the structure outlined below. The server-side code utilizes the ModuleServerAPI, which facilitates communication with the ModuleClientAPI, file management, show control, and more. For a comprehensive overview of the ModuleServerAPI's features and capabilities, visit the ModuleServerAPI section in the documentation. By familiarizing yourself with the API, you can better leverage its functionality to create powerful and versatile Getiyo modules.

Module Root
├── server
│   ├── **/*.ts
│   └── **/*.js

See bottom of the page for a complete directory structure

Page

A page of a module consists of an HTML file, TypeScript (or JavaScript), and Sass (or CSS). The user page is required because it is shown as the module to a user. The other pages are outside the renderer and not required. The following representation illustrates the typical file structure for a module page:

Module Root
├── user
│   ├── ts (Required)
│   │   ├── ModuleClientAPI.d.ts
│   │   └── **/*.ts
│   ├── js (Optional)
│   │   └── **/*.js
│   ├── scss (Optional)
│   │   └── **/*.scss
│   ├── css (Optional)
│   │   └── **/*.css
│   ├── lib (Optional)
│   │   ├── **/*.ts
│   │   ├── **/*.js
│   │   ├── **/*.scss
│   │   └── **/*.css
│   └── index.html

See bottom of the page for a complete directory structure The only required directory is ts, as it contains the type definitions for the API in ModuleClientAPI.d.ts. If you prefer using plain JavaScript, create a js folder, but do not remove the ts directory. If you want to include any libraries create a lib folder and add the TypeScript, Javascript, Sass or css files their. They will automatically be included infront of your own script/style. Each page has access to the ModuleClientAPI which will automatically be connected to its server-side ModuleServerAPI. For a comprehensive overview of the ModuleClientAPI's features and capabilities, visit the ModuleClientAPI. section in the documentation.

Control Page

A control page is a specialized module page accessible only to moderators or admins of a Getiyo channel. This can be used to create a live control panel for your module. It can be opened directly or loaded into the broadcast view—a page where moderators or broadcasters can arrange a controller layout with control pages from different modules. The file structure for a control page is the same as that of a user page.

External Page

An external page is a unique module page without Getiyo UI elements that can be accessed by anyone with the URL. Unlike user and control pages, external pages are not scaled or queued. The file structure for an external page is the same as that of a user page.

Static Files

You can include static files in a module build for later use with the ModuleServerAPI. To do so, create a static directory at the root of the module environment and place the files inside. This will ensure that they are added to the build. By following this approach, you can easily store and manage static assets, such as images, fonts, or other files, that your module may need for its functionality.

Example complete file structure

Module Root
├── user
│   ├── ts (Required)
│   │   ├── ModuleClientAPI.d.ts
│   │   └── **/*.ts
│   ├── js (Optional)
│   │   └── **/*.js
│   ├── scss (Optional)
│   │   └── **/*.scss
│   ├── css (Optional)
│   │   └── **/*.css
│   ├── lib (Optional)
│   │   ├── **/*.ts
│   │   ├── **/*.js
│   │   ├── **/*.scss
│   │   └── **/*.css
│   └── index.html
├── control
│   ├── ts (Required)
│   │   ├── ModuleClientAPI.d.ts
│   │   └── **/*.ts
│   ├── js (Optional)
│   │   └── **/*.js
│   ├── scss (Optional)
│   │   └── **/*.scss
│   ├── css (Optional)
│   │   └── **/*.css
│   ├── lib (Optional)
│   │   ├── **/*.ts
│   │   ├── **/*.js
│   │   ├── **/*.scss
│   │   └── **/*.css
│   └── index.html
├── external
│   ├── ts (Required)
│   │   ├── ModuleClientAPI.d.ts
│   │   └── **/*.ts
│   ├── js (Optional)
│   │   └── **/*.js
│   ├── scss (Optional)
│   │   └── **/*.scss
│   ├── css (Optional)
│   │   └── **/*.css
│   ├── lib (Optional)
│   │   ├── **/*.ts
│   │   ├── **/*.js
│   │   ├── **/*.scss
│   │   └── **/*.css
│   └── index.html
├── server
│   ├── **/*.ts
│   └── **/*.js
├── static
│   └── **/*.*
├── .dist
└── module.json