Skip to main content
Kits package everything needed for a complete feature: code, styles, setup instructions, dependencies, and even Webflow snippets to copy.

​
What is a Kit?

A kit is more than just code—it’s a complete solution. While a block is a simple reusable script, a kit includes:
  • JavaScript and CSS code
  • Setup instructions (Markdown documentation)
  • External dependencies (CDN libraries)
  • Linked files from existing sites
  • Referenced blocks
  • Webflow HTML snippets to copy/paste
  • Source attribution (credit original authors)
Example use cases:
  • A complete slider with styles, animation library, and setup guide
  • A cookie consent system with GDPR compliance instructions
  • A filterable portfolio with Isotope integration
  • An accessibility toolkit with implementation checklist

​
Creating a Kit

1

Go to Kits

Click Kits in the sidebar navigation.
2

Click New Kit

Click New Kit to open the kit builder.
3

Add basic info

  • Name: Descriptive name (e.g., “Lottie Animation System”)
  • Description: What the kit provides
  • Category: Organization category
4

Add code

Write JavaScript and CSS in their respective tabs.
5

Add instructions

Write setup instructions in Markdown. Explain:
  • What the kit does
  • How to configure it
  • Required Webflow setup
  • Customization options
6

Add dependencies

If your kit needs external libraries (GSAP, Swiper, etc.), add their CDN URLs.
7

Save

Click Save to create the kit.

​
Kit Contents

​
Code (JS & CSS)

The main code that powers the feature. This is what gets installed on sites.

​
Instructions

Markdown documentation that appears when viewing the kit. Use this to explain: 
## Setup

1. Add the `data-slider` attribute to your slider container
2. Each slide needs the `slider-slide` class
3. Navigation arrows need `data-slider-prev` and `data-slider-next`

## Options

| Attribute | Values | Default |
|-----------|--------|---------|
| data-autoplay | true/false | false |
| data-speed | milliseconds | 500 |

## Customization

Override these CSS variables to customize:
- `--slider-gap`: Space between slides
- `--slider-transition`: Transition timing

​
Dependencies

External libraries your kit requires. When the kit is installed, these are added as external scripts. Common dependencies:
  • GSAP for animations
  • Swiper for sliders
  • Lottie for animations
  • Isotope for filtering

​
Webflow Copy

HTML snippets that users paste into Webflow. Useful for:
  • Component structure
  • Required attributes
  • Example markup
<!-- Paste this into Webflow -->
<div data-slider>
  <div class="slider-slide">Slide 1</div>
  <div class="slider-slide">Slide 2</div>
  <button data-slider-prev>Previous</button>
  <button data-slider-next>Next</button>
</div>

​
Linked Files

Reference existing scripts from your sites without copying them:
  1. Open your kit
  2. Click Add Linked File
  3. Select a script from one of your sites
  4. The script is now referenced by the kit
Linked files are references, not copies. When the kit is installed, the current content is copied to the new site.

​
Referenced Blocks

Include existing blocks in your kit:
  1. Open your kit
  2. Click Add Block
  3. Select from your team’s blocks
  4. The block is bundled with the kit

​
Installing a Kit

1

Find the kit

Go to Kits and find the kit you want.
2

Review contents

Click on the kit to see what’s included:
  • Code preview
  • Setup instructions
  • Dependencies
  • Included blocks and files
3

Click Install

Click Install to Site.
4

Select site

Choose which site should receive the kit.
5

Confirm

The kit installs:
  • Creates scripts from the JS/CSS code
  • Copies all linked files and blocks
  • Adds all dependencies as external scripts
6

Follow instructions

Read the setup instructions to complete configuration.

​
Linked Files vs Direct Code

Direct code (in the JS/CSS tabs):
  • Part of the kit itself
  • You edit it in the kit editor
  • Changes update the kit
Linked files (referenced scripts):
  • Pointers to scripts on your sites
  • Edit them in the original site
  • Kit uses current content at install time
When to use linked files:
  • You’re building a kit from existing work
  • You want to maintain scripts in their original context
  • Multiple kits share the same base scripts
Converting linked files to blocks: Click Make a Copy on a linked file to convert it to a block. This makes it more portable and independent of the source site.

​
Kit vs Block

FeatureBlockKit
ContainsCode onlyCode + docs + dependencies
DocumentationComments in codeFull Markdown instructions
DependenciesManualBundled and auto-installed
ComplexitySimple utilitiesComplete features
Best forSingle-purpose codeMulti-part solutions

​
Sharing Kits

​
Within Your Team

All kits are automatically available to team members.

​
Publicly

Share with the GoodCraft Script community:
  1. Open the kit
  2. Toggle Make Public
  3. Add Source URL and Source Author if based on someone else’s work

​
Best Practices

Don’t assume users know how to set things up. Include:
  • Step-by-step setup
  • Required Webflow structure
  • Configuration options
  • Troubleshooting tips
Make it easy for users by providing copy-paste HTML for Webflow’s embed element.
Show users how to modify colors, speeds, and behaviors without editing code.
If your kit is based on someone else’s work, add the source URL and author name.
Install your kit on a fresh site to make sure everything works and instructions are complete.
If multiple kits use the same utility code, make it a block and reference it. This keeps things DRY.

​
Example Kit Structure

Kit: Filterable Portfolio 
├── JavaScript
│   └── Portfolio filter logic with Isotope
├── CSS
│   └── Filter button styles, grid layout
├── Dependencies
│   └── Isotope CDN, imagesLoaded CDN
├── Instructions
│   └── Setup guide with attribute reference
├── Webflow Copy
│   └── Portfolio grid HTML structure
└── Blocks
    └── "Debounce Utility" helper function

​
Next Steps

Kit vs Block vs Script

Understand when to use each type.

Exporting

Export kits for client handoff.