Getting Started

• Navigator: Navigate project assets, including site pages, components, and boards.

• Quick Add Strip: Quickly add common components like Box, Text, and Logic to your composition.

• Composition Tree: View and manage the hierarchical structure of the current page or component.

• Properties Panel: Configure component settings with a dynamic, contextual interface for customization, styling, and data binding.

• Application Bar: Manage project-wide actions, including Tokens, Classes, the Insert Menu, sharing, and publishing.

• Canvas: Select, interact with, and edit site contents.

• Name: Set to About.

• Path: Set to /about.

1. Add a Blank Page.

2. Update the Name to Contact.

3. Set the Path to /contact.

• A Navbar in the Layout

• A Hero section on the Home page

• A Form on the Contact page

1. Select the Layout in the Navigator to begin editing it.

2. Open the Insert Menu and navigate to Sections.

3. Choose a Navbar and add it to the Layout.

1. Select the Home page in the Navigator.

2. Open the Insert Menu and navigate to Sections.

3. Choose a Hero section and add it to the Home page.

1. Select the Contact page in the Navigator.

2. Open the Insert Menu and navigate to Sections.

3. Choose a Form section and add it to the Contact page.

1. Select the Navbar
• Use Navigator switch to edit the Layout and select the Navbar.

2. Locate the Links
• In the Composition Tree, expand the Navbar to see its child components. Locate the About and Contact links.

3. Drag and Drop
• Click and drag the Contact link in the Composition Tree and move it above the About link.

1. Select the Home Page
• Open the Navigator and select the Home page to start editing.

2. Select the Hero Section Title Text
• On the Canvas, click the Title Text in the Hero section.
• The Composition Tree will highlight the selected component, confirming you’ve selected the correct one.

3. Reorder the Text
• Drag the Title Text on the Canvas and move it below the Subtitle component.

1. Select the Home Page
• Open the Navigator and select the Home page.

2. Edit the Hero Section Background
• Click on the Hero Section in the Canvas to select it.
• In the Properties Panel, set the Background Color to a color of your choice.

3. Adjust Font Size for the Title
• Click on the Title Text in the Hero Section.
• In the Properties Panel, increase the Font Size for emphasis.

1. Create a Color Token
• Select the Navbar component in the Canvas.
• In the Properties Panel, locate the Background Color property.
• Click Bind next to the property, then click the plus button to create a new token. Name it Primary.

2. Apply the Token
• Use the same Primary token for the Hero Section background on all three pages to ensure design consistency.

3. Manage Tokens
• Access and edit all tokens from the Tokens Menu in the Application Bar.

1. Style a Button Instance
• Select a Button in the Hero Section of the Home page.
• In the Properties Panel, customize its Background Color, Font Size, and Padding.

2. Convert to a Class
• Click Convert to Class in the Classes Panel and name it Primary Button.

3. Reuse the Class
• Apply the Primary Button class to buttons on the About and Contact pages for consistent styling.

1. Select the Home Page
• Use the Navigator and select the Home page.

2. Add a Data Primitive
• Use the Quick Add Strip to drag a Data Primitive into the Composition Tree under the Home page. This primitive will manage the data you’ll fetch.

1. Open the Query Menu
• In the Properties Panel, locate the Query option for the Data Primitive and click Create New Query.



• This will open your default code editor and generate a basic boilerplate query in the queries folder of your codebase.

2. Configure the Query
• You can ignore or delete the boilerplate code and replace it with the following query:

typescript
/**
 * Fetches testimonials from the FakerAPI.
 *
 * @returns A promise that resolves to an array of testimonials.
 * @throws If there is an error fetching the testimonials.
 */
export async function getTestimonials(): Promise<Object> {
  const url = 'https://fakerapi.it/api/v2/texts?_quantity=5&_characters=256';

  const response = await fetch(url, {
    next: {
      revalidate: 3600, // cache for 1 hour
      tags: ['testimonials'],
    },
  });

  if (!response.ok) {
    throw new Error('Failed to fetch testimonials');
  }

  return await response.json();
}

3. Save the Query
• Save the file after replacing the code. This query will now fetch testimonials from the specified API.

4. Test the Query
• Return to Clutch and select the newly created query in the Properties Panel.
• When a query is selected, and the Data Primitive has no children, Clutch automatically renders the returned data on the Canvas for easy visualization.
💡
Queries can also be tested using the Properties Panel. Select the query input and click Run test.

1. Add a Loop Primitive
• Use the Quick Add Strip to drag a Loop Primitive into the composition under the Data Primitive.

2. Bind the Loop to the Query Data
• In the Loop Primitive’s Properties Panel, use the Bind menu to bind the loop to the data array returned by your query. This will iterate through the 5 testimonials.

1. Add a Text Primitive Inside the Loop
• Drag a Text Primitive into the Loop Primitive. This text will display individual testimonials.

2. Bind the Text to the Loop Item
• In the Text Primitive’s Properties Panel, use the Bind menu to bind the text to the current item in the loop. Select the field in the data array containing the testimonial text.

3. Preview the Testimonials
• Switch to Preview Mode to see the Testimonials section populated with live data.

typescript
export default function MySubheader({ className, text }: { className?: string; text: string }) {
  return <p className={className}>{text}</p>;
}

typescript
/**
 * Truncates text to a specified number of words and adds an ellipsis.
 *
 * @param text - The text to truncate.
 * @param wordLimit - The number of words to limit to (default is 10).
 * @returns The truncated text with an ellipsis.
 */
export function truncateText(text: string, wordLimit: number = 10): string {
  const words = text.split(' ');
  if (words.length <= wordLimit) {
    return text;
  }
  return words.slice(0, wordLimit).join(' ') + '...';
}