Catalog – Item Management

The Catalog is the heart of Art.Works! Studio. Here you organize all your artworks, assets, and projects.

Concept

Each item in the Catalog has:

• Sidecar file – Metadata as JSON
• Artwork folder – Your creative code
• Attachments – Additional files
• Snapshots – Saved states

Directory Structure

workspace/catalog/items/
├── item-001/
│   ├── sidecar.json         # Metadata
│   ├── Artwork/             # Creative Code
│   │   ├── package.json
│   │   ├── src/
│   │   └── dist/
│   ├── Attachments/         # PDFs, images, etc.
│   └── Snapshots/           # Saved states
├── item-002/
└── ...

Creating Items

Via UI

1. Click + New in the toolbar
2. Choose a template (Blank, Particles, Grid, etc.)
3. Enter name and labels
4. Click Create

Via CLI

npm run create:artwork -- --name "My Artwork" --template particles

Sidecar File

The sidecar.json contains all metadata:

{
  "id": "item-001",
  "name": "Entities",
  "alias": "entities-001",
  "type": "cc-artwork",
  "labels": ["generative", "particles"],
  "tags": ["animation", "interactive"],
  "created": "2024-01-15T10:30:00Z",
  "modified": "2024-06-20T14:22:00Z",
  "description": "Agent-based particle system",
  "thumbnail": "Snapshots/thumb.png"
}

Labels & Tags

Using Filters

// Filter by labels
const filtered = items.filter(item => 
  item.labels.includes('generative')
);

// Search by tags
const tagged = items.filter(item =>
  item.tags.some(tag => tag.includes('animation'))
);

Aliases

Aliases enable readable URLs:

Mapping in index.json:

{
  "aliases": {
    "entities-001": "item-001",
    "particles-wind": "item-002"
  }
}

Number Sequence

IDs are automatically assigned:

item-001, item-002, item-003, ...

The NumberSequenceManager handles the sequence and prevents conflicts.

Import / Export

Export

# Export as ZIP
npm run export:item -- item-001 --output ./exports/

Import

# Import ZIP
npm run import:item -- ./exports/item-001.zip