Trio Icon
Trio v6.0.3

The Trio Blog

  1. Latest
  2. Releases
  3. News
  4. Tutorials

Page Composition Tutorials Introduction

The process of assembling your site's web pages with Trio is referred to as composition.

Trio's use of project assets, namely templates, fragments, includes, JSON data files, and metadata, all of which are exposed to tag-based callbacks, allow Trio to excel as a web page composition tool. This is perhaps best demonstrated by the following abstract:

a web page composition abstract

Therefore, as developers of static websites, we need to understand how to effectively use Trio's project assets in our own static site projects. Having this understanding will often reveal that there is more than one way to compose our pages, allowing us to pick the best approach for the task.

The tutorials in this series will teach you how to use Trio's project assets to compose your site's web pages. Each tutorial will introduce new concepts and provide concrete examples that you can read, code, and run for yourselves. Tutorials may also provide you with additional links to content, such as video content, as well as links to Trio's own technical documentation, that will serve to further demonstrate and reinforce what you have read and learned in the tutorials and finally, most of the tutorials in this series will provide you with a list of takeaways, which are a summarized list of the core concepts presented in the tutorial.


If you don't already have Trio and Node installed then please follow the instructions at Getting Started to install them.

Available Tutorials

Please follow @gettriossg on Twitter to get notified when new articles in this series become available!

  1. Basic Page Composition With Templates, Fragments And Includes - posted on 2020/11/16
  2. Advanced Page Composition With Fragment Front Matter - posted on 2020/12/10
  3. Advanced Page Composition With JSON Data - posted on 2020/12/11
  4. Advanced Page Composition And Collections: Part 1) Tutorial Introduction And Starter Project Setup - posted on 2020/12/24
  5. Advanced Page Composition And Collections: Part 2) Main Catalog Page - posted on 2020/12/24
  6. Advanced Page Composition And Collections: Part 3) 249 Detail Pages - posted on 2020/12/24

Your Financial Support Of This Project Is Greatly Appreciated

Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.

Show your ❤️, add your ★ to the Github repo.