Create a Module

Last updated 6/08/2026

Creating a New Module

Custom functionality within Five is organized into modules, with each module representing an independent project that can be developed, built, and deployed as part of your application. Modules are managed from the Modules view, which provides a visual interface for creating new modules and managing existing ones. Modules are available in the Visual menu.

Figure 1 - Modules menu item

Clicking Add Item will open a new Modules form.

Figure 2 - Add Item button

After entering a title for the module, clicking in the Build File field opens the Module Editor, where the module's source code is developed and maintained.

Figure 3 - Add module record

When the Module Editor is opened for the first time, Five automatically generates a complete React project that is ready to build immediately. Unlike a traditional JavaScript or React development environment, there is no need to manually initialize a project, configure build tools, install npm packages, or create the initial project structure. Everything required to build and run the module is created automatically, allowing development to begin immediately.

As part of the generated project, the Build File is populated with a simple React component that serves as the starting point for the module. The template demonstrates the basic structure used by Five modules, including initializing the Five runtime, applying the current application theme, and rendering content using Five's Material UI components. The template builds successfully without any modification, allowing you to immediately begin replacing the placeholder content with your own user interface.

In addition to the initial Build File, Five generates the complete project structure required to build the module. The src folder contains the application's source code and is fully editable. As your module grows, you can create additional folders and add new JavaScript, TypeScript, CSS, image, and other project files to organize your application in the same way as a conventional React project.

The project also includes several configuration files, including package.json, tsconfig.json, and webpack.config.js. These files are managed by Five and are read-only within the Module Editor. By controlling the project configuration, Five ensures every module is built using a consistent, supported environment without requiring manual setup or ongoing maintenance. This prevents incompatible package versions, compiler settings, or build configurations from affecting the build process while allowing V, Five's AI Assistant, to automatically manage dependencies, generate code, and maintain the project as it evolves.

Figure 4 - Template

Editing the Module Template

The generated template provides a starting point for development. The existing React component can be modified directly to create the user interface required by your module.

Figure 5 - Edit template

Extending the Project Structure

As modules become more complex, additional files and folders can be created within the src directory to organize components and resources. To add a new folder or file, right-click the src folder in the Module Editor's file explorer and select New Folder or New File, name your folder/file.

Figure 6 - Add a new folder

Files can also be added within newly created folders, allowing the module structure to be organized in a way that best suit's the application's requirements.

Figure 7 - Add new files

Relative Path

When creating sub-folders within the

src

folder and adding additional files, ensure that all references to other files use the correct relative import path.

For example, if the file you are importing is located two folder levels above the current file, the relative path must navigate up two directories using

../

import { example } from '../../common.ts';

Each

../

moves up one folder level. Therefore:

• ../file.ts
  - one folder above
• ../../file.ts
  - two folders above
• ../../../file.ts
  - three folders above

Always verify the folder structure before adding imports to ensure referenced files can be correctly located during compilation and deployment.

Saving Module Changes

When developing a module, there are two separate save actions that perform different functions. Saving within the Module Editor saves changes made to the module files. This includes updates to existing files, newly created files, and changes made within the src folder. Saving in the editor ensures that your latest code changes are stored as part of the module project.

Figure 8 - Save button

While saving from the Modules form saves all changes to the entire module record inclusive of the changes made in the Module Editor.

Figure 9 - Save button