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



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

The following assumes you have a familiarity with JSX and TSX components. Please see these handy guides that provide a deep dive into JSX and a deep dive into TSX.

Components are TypeScript or JavaScript functions that return markup which replaces their component tags in HTML documents, and are applicable in includes, templates and pages.

A simple component.

export const HelloWorld = function() {
    return (
        <p>Hello World!</p>

Types Of Components

fusion.ssg supports two types of components:

This document mainly covers simple components.

Component Tags

A simple component tag.

<HelloWorld />

Component Implementation

fusion.ssg relieves you of the burden of having to configure TypeScript for your project. When building your project, fusion.ssg compiles your project's components when they are stale and invokes them asynchronously in a sand-boxed environment.


Component can reference their individual properties using destructuring, as in {[property name]} (see example below).

Predefined Properties

fusion.ssg recognizes two predefined component tag properties as having special significance:

Metadata Properties

After each build cycle, fusion.ssg serializes its metadata into a file named project root/.assets.json. This file's content can be viewed and analyzed to determine query strategies for retrieving the data needed to satisfy each individual component's particular use case. In most cases, you want to limit your focus on those items that are "assetType": "template".

During each build cycle, fusion.ssg extracts metadata from your project that components can easily query using JavaScript's higher order Array methods, such as filter and map for example, and incorporate the data retrieved from these queries in HTML documents. For more information on this subject, please read Metadata.


Components should always return HTML.

A Complete Implementation Example

A template that contains a simple component tag with a dataSources property.

<p>Thanks to our team our rollout has been a huge success.</p>
<TeamMembers datasources="team.json" />

The team.json data source declared in the component's tag that fusion.ssg passes to the component.

{"name": { "first": "John", "last": "Doe" }},
{"name": { "first": "Jane", "last": "Doe" }},
{"name": { "first": "Julia", "last": "Doe" }}

A component implementation that consumes the team.json data source and returns a list.

interface TeamMember {
    "name": {
        "first": string,
        "last": string

interface Props {
    team: TeamMember[]

function formatHref(member: TeamMember): string {
    return `/team/${member.name.first}-${member.name.last}`;

function formatName(member: TeamMember): string {
    return `${member.name.first} ${member.name.last}`;

export const TeamMembers = function({ team }: Props): string {
    return (
            {team.map(member => {
                return <li>
                    <a href={formatHref(member)}>{formatName(member)}</a>

The component tag is replaced with the markdown returned from the component.

<p>Thanks to our team our rollout has been a huge success.</p>
    <li><a href="/team/John-Doe">John Doe</a></li>
    <li><a href="/team/Jane-Doe">Jane Doe</a></li>
    <li><a href="/team/Julia-Doe">Julia Doe</a></li>