We are working very hard to bring you the best documentation possible.



Required: No
Type: .tsx and .jsx
Return Type: object
Project Location: src/components

A collection consists of one or more HTML documents created using a single template and a higher order collection component.

View this example project that demonstrates using a collection to generate pages for all the flags of the world.

The following discussion assumes that you have already read simple components.


Imagine for the moment that you have a portfolio of one kind or another, and that you want to create an HTML document for each item in the portfolio. Imagine how tedious and laborious that process would be if you had to do that manually. fusion.ssg provides a much better solution.

Simply put, fusion.ssg can generate a "collection" of HTML documents using a single template and a collection component that is called multiple times and that returns objects that define the properties an HTML document.

Collection Component Tags

A collection component tag is any component tag that declares the property isCollection.

A collection component tag.

<MyComponent isCollection />

Collection component tags are applicable within includes, templates and pages but may only appear once in an HTML document.

Collection Templates

A collection template is any template that declares a front matter property named isCollection with a value of true.

A collection template with a collection component tag.

page: team-member
isCollection: true
<h1>Team Member</h1>

<TeamMember isCollection datasources="team.json" />

Collection Component Implementation

Collection components are higher order components that produce multiple HTML documents.

fusion.ssg repeatedly invokes collection components until they indicate that they shouldn't be invoked again.

For each invocation, the component receives arguments for an index, for asset and assets, and for any of the other properties that it has declared, such as its data sources.

The value of the index is initially set to 0 and is incremented by 1 for each subsequent invocation, and can be used, for example, to "iterate" through one or more data sources, one invocation at a time.

When there are no more HTML documents to be generated for this collection, the component returns nothing which signals to fusion.ssg that it is to stop calling the component.

Properties Passed As Arguments


To generate an HTML document, collection components should always return an object with the following properties:

When collection components no longer have content to contribute to an HTML document, they return nothing.

A collection component implementation.

interface TeamMember {
    name: {
        first: string,
        last: string
    address: {
        street: string,
        apt: string,
        city: string,
        state: string,
        zip: number,

interface Props {
    team: TeamMember[],
    index: number

export const TeamMember = function({ team, index }: Props): { content: unknown, title: string, htmlDocumentName: string } | undefined {
    if (index === team.length) return;
    const content = (
            <h2>{team[index].name.first} {team[index].name.last}</h2>
            <ul style="list-style: none">
                <li><span style="color: green">{team[index].address.city}, {team[index].address.state}</span></li>
    const title = `${team[index].name.first} ${team[index].name.last}`;
    const htmlDocumentName = `${team[index].name.first}-${team[index].name.last}`;
    return { content, title, htmlDocumentName };
In the above example, the collection component "iterates" through its data source, one invocation at a time, using its index to reference the data source item applicable to the current HTML document that it was called for, and returns the appropriate information for the HTML document. If, on the other hand, there are no more HTML documents to be generated for the collection, the component returns nothing.