Skip to main content
GoodCraft Script offers four ways to organize your code. Here’s when to use each one.

​
Quick Comparison

FeatureScopeBest ForContains
ScriptSingle siteSite-specific codeJS or CSS
BlockTeam-wideReusable componentsJS and/or CSS
KitTeam-wideComplete featuresCode + docs + dependencies
SnippetTeam-wideCode templatesJS or CSS with variables

​
Scripts

Scripts are files that belong to a single site. Use scripts when:
  • The code is specific to one site
  • You’re building something custom that won’t be reused
  • You’re experimenting or prototyping
// A script for a specific site's hero animation
gsap.from('.hero-heading', { opacity: 0, y: 50, duration: 1 });
Scripts live in your site’s script manager and are served by the loader.

​
Blocks

Blocks are reusable code units shared across your team. Use blocks when:
  • You have code that works on multiple sites
  • The code is self-contained (doesn’t need setup instructions)
  • You want to maintain one source of truth
// A block for smooth scroll - works anywhere
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});
When you install a block on a site, it copies the code as a new script. Updates to the block don’t automatically update installed copies.
Block = “I want to reuse this code”If you find yourself copying the same script between sites, make it a block.

​
Kits

Kits bundle everything needed for a complete feature. Use kits when:
  • The feature needs setup instructions
  • Multiple files work together (JS + CSS)
  • External dependencies are required
  • You want to include documentation
A kit can contain:
  • JavaScript code
  • CSS code
  • Setup instructions (Markdown)
  • External dependencies (CDN links)
  • Referenced blocks
  • Linked files from other sites
  • Webflow HTML to copy/paste
## Kit: Lottie Animations

### What's included:
- Lottie player initialization script
- Default animation styles
- Lottie library dependency

### Setup:
1. Add the Lottie JSON URL as a data attribute
2. Add the `.lottie-animation` class to your container
Kit = “I want to package a complete solution”If someone needs instructions to use your code, make it a kit.

​
Snippets

Snippets are code templates with fillable variables. Use snippets when:
  • You have boilerplate code with changing values
  • You want to insert code fragments into scripts
  • The same pattern repeats with different parameters
// Snippet: Track Button Click
// Variables: {{buttonSelector}}, {{eventName}}

document.querySelector('{{buttonSelector}}').addEventListener('click', () => {
  analytics.track('{{eventName}}');
});
When you insert a snippet, you fill in the variables and the code is added to your script.
Snippet = “I want a template I can customize”If you’re typing the same pattern with different values, make it a snippet.

​
Decision Flowchart

Is this code for one site only?
├── Yes → Use a Script
└── No → Will others need setup instructions?
    ├── Yes → Use a Kit
    └── No → Is it a template with variables?
        ├── Yes → Use a Snippet
        └── No → Use a Block

​
Common Scenarios

ScenarioUse
Custom animations for one clientScript
Smooth scroll you use everywhereBlock
Complete slider with styles and instructionsKit
Analytics tracking with custom event namesSnippet
Form validation for a specific formScript
GSAP helper functions you reuseBlock
Full modal system with accessibilityKit
Console log wrapper for debuggingSnippet

​
Converting Between Types

You can promote code up the hierarchy:
  1. Script → Block: Click “Save as Block” in the script editor
  2. Block → Kit: Create a kit and add the block to it
  3. Script → Kit: Create a kit with linked files from your site
Converting creates a copy. The original script or block remains unchanged.