---
title: "Introduction to Snippets"
slug: "introduction-to-snippets"
updated: 2025-09-26T01:24:31Z
published: 2025-09-26T01:24:31Z
canonical: "docs.unqork.io/introduction-to-snippets"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to Snippets

## Overview

**Snippet****s** are sets of pre-configured [components](/v1/docs/module-builder-component-library) that you can drag and drop into [application](/v1/docs/introduction-to-unqork-applications) modules. Snippets are resuable configurations that let you build applications quicker and ensure your configurations meet best practices. You can also create snippets from your own configurations to reuse or share with team members in the same environment.

A few example snippet configurations you can add to your application include:

- Sending customized emails at the click of a button.
- Displaying submissions and visualizing [submission data](/v1/docs/submission-data) with a dashboard (including [KPI](/v1/docs/kpi-component) and pie [chart](/v1/docs/chart-component) widgets).
- Filtering through large amounts of dashboard submissions by date.
- Creating a PDF of your your end-user's submission data on button-click.

## What You'll Learn

In this article, you'll learn about the different Unqork snippets and how to use them in a module.

## Marketplace Snippets and Local Snippets

In Unqork, there are two types of snippets: **Marketplace** and **Local**. You can find these snippets in the Snippets menu to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[![Snippets menu, including Markeplace and Local snippets, in the Module Editor.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets_01_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets%2001.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)

### Marketplace Snippets

Marketplace Snippets are snippets created by Unqork. These snippets are available across all Unqork environments and use best practice configurations.

Marketplace Snippets are a feature of the [Unqork Marketplace](/v1/docs/introduction-to-the-unqork-marketplace). You can access and download Marketplace Snippets for free by selecting the **Marketplace** tab at the top of your workspace.

> [!TIP]
> To learn more about the Unqork Marketplace, see our [Browsing the Unqork Marketplace](/v1/docs/browsing-the-unqork-marketplace) article. To access the Unqork Marketplace, click the following link: [https://marketplace.unqork.io/#/display/5f22ee671ee2280209e77f3a](https://marketplace.unqork.io/#/display/5f22ee671ee2280209e77f3a).

### Local Snippets

Local Snippets are snippet configurations made by other creators in your [environment](/v1/docs/introduction-to-snippets#). You can only access Local Snippets in the environment where they were created.

Because anyone can create Local Snippets, the configurations aren't vetted by Unqork. Before adding it to your application, ensure that the configuration works as intended and doesn't conflict with your application.

## How to Use Snippets

### Adding a Snippet to an Existing Module

You can add snippets to your module by dragging and dropping them from the **Snippet****s** menu onto your Module Builder canvas.

To add a snippet to an existing module:

1. Open your existing module in the Module Builder.
2. Click the **Snippet****s** button at the top of the component tray.
3. Find the snippet you want to use.

To find a snippet, you can do one of the following:

> [!TIP]
> You can learn more about a snippet by hovering over it and clicking the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_small.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) (**ellipsis**) button. A pop-up displays additional information about the snippet, including its version number, basic description, use cases, functionality, and requirements.
  - Use the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/search_grey_icon(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) Search Snippets search tool below the **Snippet****s** button.
  - Scroll through the list of available snippets in the **Marketplace** **Snippet****s** and **Local** **Snippet****s** groups.
4. Drag and drop the snippet onto your canvas.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets_Gif(1).mp4?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)
5. **Save** your module.

### Customizing Snippets

Once you add a snippet to your module, you can edit the configuration in the Module Builder.

> [!NOTE]
> It's important to note that adjusting a snippet might break your configuration. For example, configurations in a snippet might reference other components. Changing a component's Property ID, might sever those references and, as a result, break the configuration.

To make changes to a component's settings:

1. In the Module Builder, hover over the component.

A 5-button toolbar displays above the component on hover-over.

[![Image of 5-button toolbar displaying above a Text Field component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets_03_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets%2003.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(15).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) (**Settings**) button.
3. Using the Configuration window, make changes to the component’s settings as needed.
4. Click **Save**.
5. **Save** your module.

## Creating Local Snippets

When you complete a configuration in your module, you can save it as a Local Snippet. Once saved, other Creators in your environment can access and reuse your configuration.

### Save Configuration as a Snippet

To save a configuration as a Local Snippet:

1. Open a configured module you want to to a snippet.
2. To the right of the Module Builder's **Save** module button, select the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Preview_Icon.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) (**drop-down**) button.
3. Select **Save as Snippet**. The Save as Snippet modal displays.

> [!NOTE]
> Saving your configuration as a snippet creates a snippet using the entire module. Remove components you don't want in your new snippet before saving.

### Save as Snippet Modal Settings

The Save as Snippet settings modal lets you add and configure various attributes of your snippet. After making adjustments, click **Save** **Snippet**. Below are descriptions of the various attributes in the modal:

| Attribute | Description |
| --- | --- |
| **Snippet** **Name*** | Enter the name of your snippet. > [!NOTE] > A Snippet Name is required to save changes. |
| **Description** | Describe your configuration to others. Be detailed in your description so that other creators know what your snippet does and any adjustments needed to make it work in their application. |
| **Tags** | Create or select tags for your snippet. Tags are optional but can help locate specific snippets in your environment. |
| **Upload Image** | Add an image to make your snippet easier to identify. |
| **Configuration Level** | Select the appropriate configuration level (![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings_Radio_Button_Icon_Selected(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) **Basic**, ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings_Radio_Button_Icon_Selected(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) **Intermediate**, or ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings_Radio_Button_Icon_Selected(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D) **Advanced**) that matches your snippet complexity. |
| **Advanced Options** | Click this drop-down to access more fields that give additional context for your snippet to other creators. |
| **Additional Signaling** | Signals the status of your snippet to other Creators. For example, if your snippet contains multiple cross-references with other modules, enter the Caution signal to warn others. |
| **Feature Functionality** | If your snippet is a feature, use this field to describe what the feature is and how this snippet functions or contributes to related feature configurations. |
| **Requirements** | List the requirements necessary to use this snippet effectively in an application. |

![A static image displaying the Save as Snippet modal and its settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets_02.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A18Z&se=2026-11-09T04%3A51%3A18Z&sr=c&sp=r&sig=bdGewW%2Fsc6JC%2FkB2V7UAiz1DUR6pbE6ogcjC9LjO2UQ%3D)

Once saved, you can access the snippet in the Module Builder component under Local Snippets.

## Resources

- [Access Snippets on Unqork Marketplace](https://marketplace.unqork.io/app/marketplace#/display/listings?filter=Snippet).
- [Learn more about Unqork Marketplace](/v1/docs/introduction-to-the-unqork-marketplace).

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

A modal is a window that appears on top of the content you are currently viewing.

A functionality of a software. For example, Copy and Paste is a feature of a computer's operating system.