---
title: "Getting started"
url: "https://twistcal.com/docs/getting-started"
description: "Install TwistCal via npm or CDN, pick a build variant, and drop your first Add to Calendar button on the page."
---

## Install

```
npm install @freshjuice/twistcal
```

Or load from a CDN — no build step required:

```
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.min.js"></script>
```

## Build variants

| File | Format | Size | Icons | Languages |
| --- | --- | --- | --- | --- |
| dist/twistcal.min.js | IIFE | 19 KB | Yes | All 12 |
| dist/twistcal.slim.min.js | IIFE | 11 KB | No | All 12 |
| dist/twistcal.esm.min.js | ESM | 19 KB | Yes | All 12 |
| dist/twistcal.slim.esm.min.js | ESM | 11 KB | No | All 12 |
| dist/twistcal.{lang}.min.js | IIFE | 17 KB | Yes | Single lang |
| dist/twistcal.{lang}.slim.min.js | IIFE | 9 KB | No | Single lang |

`{lang}` is a language code: `en`, `de`, `es`, `fr`, `it`, `pt`, `nl`, `pl`, `uk`, `ru`, `ja`, `zh`. See [Internationalization](/docs/i18n/).

CDN examples (self-executing, no build step):

```
<!-- Full build with icons -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.min.js"></script>

<!-- Slim build, no icons -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.slim.min.js"></script>

<!-- Single language (e.g. German only) -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.de.min.js"></script>
```

## First usage

Drop `<twist-cal>` on the page. It renders a button with a dropdown menu. All styles live in a Shadow DOM root — no bleed in either direction.

```
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.min.js"></script>

<twist-cal
  title="Product Launch Webinar"
  start="2026-02-10T14:00:00"
  end="2026-02-10T15:30:00"
  location="Online"
  description="Join us for the launch of TwistCal v1.">
</twist-cal>
```

That’s it. `title`, `start`, and `end` are the only required attributes — see the [full attributes table](/docs/web-component/).

## What’s next

-   [Web component](/docs/web-component/) — all attributes, calendar selection, JSON event data
-   [Declarative triggers](/docs/triggers/) — use your own buttons with `data-twistcal`
-   [API](/docs/api/) — import the generators directly