Skip to main content
Snippets are code templates with placeholder variables. Insert them into scripts and fill in the values—perfect for repetitive patterns.

​
What is a Snippet?

A snippet is a reusable code fragment with variables you fill in when using it: 
// Snippet template
document.querySelector('{{selector}}').addEventListener('{{event}}', () => {
  console.log('{{message}}');
});

// After inserting and filling variables
document.querySelector('.cta-button').addEventListener('click', () => {
  console.log('CTA clicked!');
});
Use snippets for:
  • Boilerplate code you type often
  • Patterns with different values each time
  • Team-standard code structures
  • Quick utilities

​
Creating a Snippet

1

Go to Snippets

Click Snippets in the sidebar navigation.
2

Click New Snippet

Click the New Snippet button.
3

Fill in details

  • Name: What this snippet does (e.g., “Track Event”)
  • Description: When to use it
  • Language: JavaScript or CSS
  • Category: For organization
4

Write the template

Write your code using {{variableName}} for placeholders:
analytics.track('{{eventName}}', {
  category: '{{category}}',
  label: '{{label}}'
});
5

Define variables

For each variable, specify:
  • Description: What value to enter
  • Default value: Pre-filled suggestion
  • Required: Whether it must be filled
6

Save

Click Save to create the snippet.

​
Using Variables

​
Syntax

Use double curly braces for variables: 
{{variableName}}

​
Variable Names

Use descriptive camelCase names: 
// Good
{{buttonSelector}}
{{animationDuration}}
{{apiEndpoint}}

// Avoid
{{x}}
{{var1}}
{{thing}}

​
Repeated Variables

Use the same variable name multiple times—it fills in everywhere: 
const {{elementName}} = document.querySelector('.{{elementName}}');
{{elementName}}.classList.add('active');
When you enter modal for {{elementName}}, all three instances update.

​
Inserting a Snippet

1

Open a script

Go to your site and open a script in the editor.
2

Click Insert Snippet

Click the Insert Snippet button in the toolbar.
3

Find your snippet

Search or browse for the snippet you want.
4

Fill in variables

Enter values for each variable. Defaults are pre-filled.
5

Insert

Click Insert. The code is added at your cursor position.

​
Example Snippets

​
Event Listener

document.querySelector('{{selector}}').addEventListener('{{event}}', (e) => {
  {{code}}
});
Variables:
  • selector: CSS selector (default: .button)
  • event: Event type (default: click)
  • code: Handler code (default: console.log('clicked'))

​
Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('{{visibleClass}}');
    }
  });
}, { threshold: {{threshold}} });

document.querySelectorAll('{{selector}}').forEach(el => observer.observe(el));
Variables:
  • selector: Elements to observe (default: [data-animate])
  • visibleClass: Class when visible (default: is-visible)
  • threshold: Visibility threshold (default: 0.1)

​
Fetch API Call

fetch('{{url}}', {
  method: '{{method}}',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({{body}})
})
  .then(res => res.json())
  .then(data => {{successHandler}})
  .catch(err => console.error(err));
Variables:
  • url: API endpoint
  • method: HTTP method (default: POST)
  • body: Request body (default: {})
  • successHandler: Success code (default: console.log(data))

​
CSS Animation

@keyframes {{animationName}} {
  from {
    {{fromProperties}}
  }
  to {
    {{toProperties}}
  }
}

.{{className}} {
  animation: {{animationName}} {{duration}} {{easing}};
}
Variables:
  • animationName: Name for keyframes (default: fadeIn)
  • className: Class to animate (default: animate)
  • duration: Animation duration (default: 0.3s)
  • easing: Timing function (default: ease-out)
  • fromProperties: Starting styles (default: opacity: 0)
  • toProperties: Ending styles (default: opacity: 1)

​
Snippets vs Blocks

FeatureSnippetBlock
VariablesYes, fill-in placeholdersNo
InstallationInserted into scriptsCreates new script
SizeSmall code fragmentsComplete features
Use caseTemplates, patternsReusable components
Use Snippets for code patterns you customize each time. Use Blocks for complete, self-contained functionality.

​
Sharing Snippets

​
Within Your Team

All snippets are automatically available to team members.

​
Publicly

Make snippets available to all users:
  1. Open the snippet
  2. Toggle Make Public
  3. The snippet appears in the public library

​
Best Practices

Snippets work best for small patterns. If you’re creating large blocks of code, consider using a Block instead.
Variable names should make it clear what value to enter:
// Clear
{{buttonSelector}}

// Unclear
{{sel}}
Good defaults help users understand expected values and speed up insertion.
Explain what each variable is for, especially if it’s not obvious.
Use categories to group related snippets:
  • Events
  • DOM Manipulation
  • Animations
  • API Calls

​
Next Steps

Blocks

Create reusable code without variables.

Kit vs Block vs Script

Understand when to use each type.