Automating TypeScript Type Generation for Sitecore JSS Templates

streamline your Sitecore JSS development with automated TypeScript type generation

Unlock Efficiency With Automated TypeScript Type Generation for Sitecore JSS

Are you a Sitecore developer working with Sitecore JSS and Next.js, leveraging the power of TypeScript? If so, you know the importance of accurately defining TypeScript types for your Sitecore JSS templates. But what if there was a tool that could automate this process for you, saving you time and effort? Introducing the Sitecore JSS Next.js TypeScript Type Generator – a powerful tool designed to streamline the generation of TypeScript types for Sitecore JSS templates. Developed with Sitecore, XM Cloud, JSS, TypeScript, and auto-generation in mind, this tool simplifies the process of defining TypeScript types for your Sitecore template props.

Benefits for Sitecore Developers

  1. Time-Saving Automation: Say goodbye to manually defining TypeScript types for your Sitecore JSS templates. With the Sitecore JSS Next.js TypeScript Type Generator, you can automate the generation process, freeing up valuable time for more important tasks.
  2. Accuracy and Consistency: Ensure accuracy and consistency in your TypeScript type definitions. The tool generates precise type definitions based on Sitecore JSS types, reducing the risk of errors and inconsistencies in your codebase.
  3. Enhanced Developer Experience: Provide clear and comprehensive TypeScript type definitions for Sitecore template props to improve the developer experience. This will help developers easily understand the structure of template props and leverage IntelliSense for efficient coding.

How it Works

Access the Tool

Visit Sitecore Types Generator to access the TypeScript type generator tool.

Interface of the Sitecore JSS Next.js TypeScript Type Generator tool with input fields for JSON data and a generate types button.

Input Component Props

Developers can fetch component props by using the console log on component code.

const SampleComponent = (props: any) => {


  return (
    <div data-component="sample-component" >
     Sample Componenet

export default SampleComponent;

A common method to fetch component props is by executing the following command in the browser console:


This command retrieves the component props from the specified path.


Browser console displaying hierarchical structure of Sitecore JSS component properties for a homepage.

Browser console showing a command to retrieve Sitecore JSS component properties with an option to copy object.

Generate TypeScript Types

  • Enter the fetched component props into the tool.
  • Click the "Generate Types" button to trigger the type generation process.

Screenshot displaying JSON data and TypeScript code generation side by side for a Sample Component.

View Generated Types

  • The tool will automatically generate TypeScript types based on the provided Sitecore JSS component props.
  • Developers can view and copy the generated types for use in their projects.

import {TextField,RichTextField,LinkField,ImageField,Field,Text,} from '@sitecore-jss/sitecore-jss-nextjs';

type SampleComponentFields = {
  body1?: RichTextField;
  body2?: RichTextField;
  heading1?: TextField;
  heading2?: TextField;
  image1?: ImageField;
  image2?: ImageField;
  link1?: LinkField;
  link2?: LinkField;

type SampleComponent = {
  uid?: string;
  componentName?: string;
  dataSource?: string;
  params?: { [key: string]: string };
  fields?: SampleComponentFields;

const SampleComponent = (props: SampleComponent) => {

  return <div data-component="sample-component">
   <Text field={props?.fields?.heading1} />

export default SampleComponent;

Final Word on Automated TypeScript Type Generation for Sitecore JSS Templates

With this tool, Sitecore developers can streamline their workflow and focus more on building innovative experiences with Sitecore JSS, powered by TypeScript's strong type system. By automating the generation of TypeScript types for Sitecore JSS templates, developers can save time and ensure code consistency across their projects.

Embrace automation and elevate your Sitecore development experience with our TypeScript type generator tool! Visit our GitHub repository to explore the codebase, contribute, and provide feedback. Your comments and pull requests are always welcome as we continue to improve and expand the capabilities of this tool.

GitHub Repository: sitecore-types-generator-app

Explore the tool: Sitecore JSS Next.js TypeScript TypeGenerator

Meet Sohrab Saboori

Senior Full-Stack Developer


Sohrab is a Senior Front-End Developer with extensive experience in React, Next.js, JavaScript, and TypeScript. Sohrab is committed to delivering outstanding digital solutions that not only meet but exceed clients' expectations. His expertise in building scalable and efficient web applications, responsive websites, and e-commerce platforms is unparalleled. Sohrab has a keen eye for detail and a passion for creating seamless user experiences. He is a problem-solver at heart and enjoys working with clients to find innovative solutions to their digital needs. When he's not coding, you can find him lifting weights at the gym, pounding the pavement on the run, exploring the great outdoors, or trying new restaurants and cuisines. Sohrab believes in a healthy and balanced lifestyle and finds that these activities help fuel his creativity and problem-solving skills.

Connect with Sohrab