Quickstart Guide

Get up and running with Tokencraft in just a few steps.

Step 1: Create an Account

Visit app.tokencraft.dev and sign up for a free account.

Step 2: Review Your Workspace

When you sign up, Tokencraft automatically creates a default workspace for you. You’re ready to go right away—no extra setup needed. Want additional workspaces?

Click “New Workspace”
Give it a name (e.g., “Design System”)
Add an optional description
Click “Create”

Step 3: Create a Tokenset

Inside your workspace:

Click “New Tokenset”
Name it (e.g., “Colors”)
The default mode “Base” is created automatically

Step 4: Add Your First Token

Click “Add Token” in your tokenset
Fill in the details:
- Name: colors.primary.500
- Type: Color
- Value: #3b82f6
- Description: “Primary brand color”
Click “Save”

Step 5: Generate an API Token

To access your tokens via the API:

Navigate to API in the sidebar
Click “New Token”
Give it a name (e.g., “Production API”)
Copy the token immediately (you won’t see it again!)

Store your API token securely. It provides full access to your design tokens.

Step 6: Make Your First API Call

Test your API token:

curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://app.tokencraft.dev/api/v1/workspaces

const TOKENCRAFT_TOKEN = 'tkc_your_token_here';

async function getWorkspaces() {
  const response = await fetch(
    'https://app.tokencraft.dev/api/v1/workspaces',
    {
      headers: {
        'Authorization': `Bearer ${TOKENCRAFT_TOKEN}`
      }
    }
  );
  
  const data = await response.json();
  console.log(data.workspaces);
}

getWorkspaces();

import requests

TOKENCRAFT_TOKEN = 'tkc_your_token_here'

response = requests.get(
    'https://app.tokencraft.dev/api/v1/workspaces',
    headers={'Authorization': f'Bearer {TOKENCRAFT_TOKEN}'}
)

print(response.json()['workspaces'])

Step 7: Export Your Tokens

Export your tokens in your preferred format:

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=css" \
  -o tokens.css

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=json" \
  -o tokens.json

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=ios" \
  -o DesignTokens.swift

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=android" \
  -o tokens.xml

What’s Next?

Learn Core Concepts

Understand workspaces, tokensets, and modes

Explore the API

Deep dive into all available endpoints

Setup MCP Server

Use Tokencraft with Claude Desktop

CI/CD Integration

Automate token syncing

Environment Setup

For convenience, store your credentials as environment variables:

.env

TOKENCRAFT_TOKEN=tkc_your_token_here

Common Use Cases

1. Web Development

Export as CSS variables and import into your stylesheet:

styles/tokens.css

@import url('tokens.css');

.button-primary {
  background-color: var(--colors-primary-500);
}

2. React/Vue Applications

Fetch tokens at build time:

scripts/sync-tokens.js

const fs = require('fs');
const fetch = require('node-fetch');

async function syncTokens() {
  const response = await fetch(
    `https://app.tokencraft.dev/api/v1/tokensets/${TOKENSET_ID}/modes/${MODE_ID}/export?format=json`,
    {
      headers: { 'Authorization': `Bearer ${process.env.TOKENCRAFT_TOKEN}` }
    }
  );
  
  const tokens = await response.json();
  fs.writeFileSync('src/tokens.json', JSON.stringify(tokens, null, 2));
}

syncTokens();

3. Mobile Applications

Download platform-specific files during your build:

prebuild.sh

#!/bin/bash

# iOS
curl -H "Authorization: Bearer $TOKENCRAFT_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/$TOKENSET_ID/modes/$MODE_ID/export?format=ios" \
  -o ios/DesignTokens.swift

# Android
curl -H "Authorization: Bearer $TOKENCRAFT_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/$TOKENSET_ID/modes/$MODE_ID/export?format=android" \
  -o android/app/src/main/res/values/tokens.xml

Need Help?

API Authentication

Learn more about API authentication and security

​Quickstart Guide

​Step 1: Create an Account

​Step 2: Review Your Workspace

​Step 3: Create a Tokenset

​Step 4: Add Your First Token

​Step 5: Generate an API Token

​Step 6: Make Your First API Call

​Step 7: Export Your Tokens

​What’s Next?

Learn Core Concepts

Explore the API

Setup MCP Server

CI/CD Integration

​Environment Setup

​Common Use Cases

​1. Web Development

​2. React/Vue Applications

​3. Mobile Applications

​Need Help?

API Authentication

Quickstart Guide

Step 1: Create an Account

Step 2: Review Your Workspace

Step 3: Create a Tokenset

Step 4: Add Your First Token

Step 5: Generate an API Token

Step 6: Make Your First API Call

Step 7: Export Your Tokens

What’s Next?

Environment Setup

Common Use Cases

1. Web Development

2. React/Vue Applications

3. Mobile Applications

Need Help?