# Getting Started with Croupier
In this tutorial, you'll build a working swipe deck to review a list of articles. By the end, you'll have a functional Croupier instance running in your browser.
## Before you start
- A modern browser (Chrome 120+, Safari 17+, Firefox 121+)
- A text editor
- No build tools, no npm, no frameworks required
## Step 1: Download Croupier
Download the IIFE bundle and save it alongside your HTML file:
- **IIFE (script tag):** `dist/croupier.js`
- **CSS:** `src/croupier.css`
Or use the CDN:
```html
```
## Step 2: Create your HTML page
Create a file called `index.html`:
```html
My Croupier
```
## Step 3: Define your data
Each item in your array can be any shape you want. For this tutorial, we'll use articles:
```js
const articles = [
{
title: 'SQLite is not a toy database',
author: 'Anton Zhiyanov',
summary: 'Why SQLite is a perfect tool for developers and data analysts.',
url: 'https://antonz.org/sqlite-is-not-a-toy-database/',
},
{
title: 'The Grug Brained Developer',
author: 'Grug',
summary: "A layman's guide to thinking like the self-aware smol brained.",
url: 'https://grugbrain.dev/',
},
{
title: 'Building a Second Brain',
author: 'Forte Labs',
summary: 'The proven method to organize your digital life.',
url: 'https://fortelabs.com/blog/basboverview/',
},
];
```
## Step 4: Write a render function
The `renderCard` function tells Croupier how to display each item. It receives the item and a context object, and returns HTML or an HTMLElement:
```js
function renderArticle(article) {
return `
${article.title}
by ${article.author}
${article.summary}
`;
}
```
## Step 5: Create the deck
Add this inside your `