Docs · Kits
Kits
Create a kit
- Sign in and open Dashboard → Kits, then choose New kit.
- Tick the sets this site uses: animations, patterns, icons (Font Awesome Free). Nothing is ticked for you, and a kit never reaches anything else.
- Add at least one lock: the domains the site runs on, the IP ranges of your servers, or turn on Server use for a personal kit.
- Keep the monthly limit at 100,000 requests or set your own, then choose Create kit.
You can have up to 10 active kits. Make one per site, so you can lock, limit and revoke each one on its own.
The loader
The quickest way in. Put it in your page's <head> and it adds the stylesheets and custom elements for the kit's sets, at latest:
<script src="https://cdn.htmltool.io/kit/YOUR_KIT_TOKEN.js" crossorigin="anonymous" defer></script>| Set | Files |
|---|---|
| Animations | devops-animations.min.css, devops-animations-elements.js |
| Patterns | devops-patterns.min.css, devops-patterns-elements.min.js |
| Icons | Nothing up front. Each icon is its own SVG (see below). |
Direct URLs
Every file in the kit's sets also works by path, with the token after /t/. Use these for one animation or pattern, an icon SVG, SCSS and Stylus sources, or a pinned version:
https://cdn.htmltool.io/t/YOUR_KIT_TOKEN/animations/1.0.0/css/devops-animations.min.csshttps://cdn.htmltool.io/t/YOUR_KIT_TOKEN/patterns/1.0.0/css/devops-patterns.min.csshttps://cdn.htmltool.io/t/YOUR_KIT_TOKEN/free/7.3.1/svgs/solid/house.svgThe animations, patterns and icons docs write every URL this way. Replace YOUR_KIT_TOKEN with your kit's token from its dashboard page.
Locks
Every kit needs at least one lock. When a kit has more than one kind, a request must pass all of them.
Domains
- Pages on these sites can load the kit's files. The browser's
OriginorReferermust match; a request with neither is refused. - Enter
example.comorhttps://example.com.*.example.comcovers its subdomains. A bare*is not allowed. - https only; plain http works only for localhost. Up to 20 domains.
- The token is visible in your page source. That's expected: the domain lock is what protects it.
IP addresses
- Only requests from these addresses are served: single IPv4/IPv6 addresses or CIDR ranges such as
198.51.100.0/24. Up to 50. - Ranges can be no wider than
/8(IPv4) or/16(IPv6).
Server use (personal kits)
For build scripts, servers and Workers that fetch files from the CDN. A personal kit accepts its token only in an Authorization: Bearer header, never in a URL, a ?token= or the loader. Combine it with an IP lock when your servers have fixed addresses.
curl -H "Authorization: Bearer YOUR_KIT_TOKEN" \
https://cdn.htmltool.io/animations/1.0.0/css/devops-animations.min.css
# Node / Workers
const res = await fetch("https://cdn.htmltool.io/animations/1.0.0/css/devops-animations.min.css", {
headers: { Authorization: `Bearer ${process.env.HTMLTOOL_KIT}` },
});Monthly limit
- Each kit has a request limit per calendar month (UTC): 100,000 by default, anything from 1 to 10,000,000.
- Over the limit the CDN answers
429withkit_limit_reacheduntil the month ends. Raise the limit on the kit's page to lift it straight away. - Counts are collected about once a minute, so the cutoff is approximate.
- The dashboard shows each kit's requests this month against its limit.
Revoke and delete
Revoke stops a kit right away and keeps it listed. Delete removes it from the CDN and your dashboard. Deleting your account deletes all of your kits.