Foundry VTT Module Making for Beginners - Introduction

tags: module-tutorial foundry-vtt

So you want to make a Foundry VTT Module but you're not sure where to start?

This tutorial will start at the very beginning and end with a working module, explaining as much as is feasible to explain along the way.

How to read this tutorial

This tutorial works best as a start-to-finish step-by-step journey into module making. It will walk you through each part of the process, including some purposefully wrong steps to demonstrate how to debug things when they do not work. As a result, if you copy and paste directly from some examples without the context, things might not work.

What we'll be building

Here's the elevator pitch:

A module which allows each individual user in a Foundry VTT world to have a to-do list that they can add entries to, mark entries complete, and delete entries from.

What we'll learn about

By the end of this tutorial, you'll have at least touched each of the following core Foundry VTT API concepts:

  • Hooks
  • Flags
  • FormApplication
  • Dialog
  • Settings
  • Handlebars
  • CSS
  • Localization

From my experience, having a working understanding of these Foundry-specific things in addition to a working knowledge of Javascript, HTML, and CSS is a rock solid baseline for starting to create Foundry VTT Modules.

Prerequisites

An activated local FoundryVTT installation on version 0.8.8+ or version 9

All of the pieces this tutorial interacts with are in the Public API for Foundry VTT and thus it is expected to be relevant for a long time, but it is confirmed to be working on Core version 0.8.8 and version 9 stable.

Some working knowledge of HTML, CSS, and JavaScript (ES2020)

If you're completely new to these technologies, this tutorial can still be helpful to you, but you may find yourself overwhelmed.

Style & Organization Notes

Code Samples

Code Samples will be styled like so:

// This is some Code

Ocassionaly there will not be line numbers or syntax highlights.

// This is also a code sample

Errors

Sometimes we'll be debugging errors that our code has, they'll be styled like so:

Error: This is an error.

Programming Concepts

Where relevant, we'll be learning some concepts tangential to Foundry VTT specific work. These will be styled like so:

Programming Concept: Foo

"Foo" is a common placeholder when creating examples.

License Information & Attribution

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution-ShareAlike 4.0 License, and code samples are licensed under the Unlicense (text below).

Provide attribution to Andrew Krigline, aka "Calego".

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to http://unlicense.org/

Select a repo