# Setting up the IDE

{% hint style="warning" %}
You are reading the **NextGen Documentation**

**NextGen widgets** are a new and improved way to display UGC content onsite. 

From September 23rd 2025, all new widgets created will be NextGen.

Please check your widget version on the **Widget List page** to see if it is a **Classic** or **NextGen** widget.

You can read the [Classic Widget Documentation](https://docs.nosto.com/ugc/guides/onsite-widgets) here.

**Note: This feature is unique to NextGen widgets**
{% endhint %}

Once you have read our guide on [creating-a-development-space-for-your-team](https://docs.nosto.com/ugc/guides/widgets-nextgen/widget-creation-guides/creating-your-first-widget/creating-a-widget-from-blank-canvas-developer-guide/creating-a-development-space-for-your-team "mention"), you can begin setting up your IDE for widget template development.

To get started, follow the instructions below

1\) Clone your Forked repo of stackla/stackla-widget-templates. You can do this by executing 

`git clone https://your-github-repo-here`

<figure><img src="https://3731068598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F903dsFKGBuxQbjtVNMIV%2Fuploads%2FIUE1CTjDhn9ClIp7Isar%2Fimage.png?alt=media&#x26;token=4aafe1cb-d284-4f42-8297-2f457afaf844" alt=""><figcaption></figcaption></figure>

2\) Utilise a code editor such as [VSCode](https://code.visualstudio.com/) to prepare your IDE for development

3\) Inside the folder, fetch the latest widget-utils repository submodule:&#x20;

**NOTE:** If you would like to use your own widget utilities fork, you can also update the **.gitmodules** file and place the URL to your git repository there.

<figure><img src="https://3731068598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F903dsFKGBuxQbjtVNMIV%2Fuploads%2FJnNjCSL4KOcZukto2T82%2Fimage.png?alt=media&#x26;token=4f440593-a2bf-4804-96d1-f16977c39e10" alt=""><figcaption></figcaption></figure>

**Execute the following;**

`git submodule init && git submodule update`

4\) Install all packages by executing: `npm install`

5\) Execute `npm run start` to see our gallery of widgets in action.

6\) Access the following URL, substituting the widgetType with any widget you wish to preview.

{% embed url="<https://localhost:4003/preview?widgetType=carousel>" %}

Congratulations! You are now ready to start developing your first widget.&#x20;

Lets get started.

[creating-a-starter-project](https://docs.nosto.com/ugc/guides/widgets-nextgen/widget-creation-guides/creating-your-first-widget/creating-a-widget-from-blank-canvas-developer-guide/creating-a-starter-project "mention")