TokiForge

Framework-agnostic design token engine for React, Vue, Angular, Svelte & vanilla JS

Documentation • Examples • Report Bug • Request Feature

</div>  <meta name="description" content="TokiForge is a lightweight, framework-agnostic design token and theming engine for React, Vue, Angular, Svelte, Next.js, Remix, and more. Runtime theme switching, CSS variables, TypeScript support, and <3KB bundle size."> <meta name="keywords" content="design tokens, theme engine, theming, CSS variables, design system, React theming, Vue theming, Angular theming, Svelte theming, runtime theming, dark mode, light mode, framework-agnostic, TypeScript, design system tools">

Features

Framework-agnostic - Works with React, Vue, Angular, Svelte, Next.js, Remix, Solid, Qwik, or vanilla JS
Runtime theme switching - Change themes instantly without page reload
Lightweight - Less than 3KB gzipped
Full TypeScript support - Type-safe tokens with autocomplete
Powerful CLI - Initialize, build, validate, and analyze tokens
CSS custom properties - Native browser support with smart fallbacks
Dark mode ready - Built-in light/dark theme support
Token versioning - Track versions, deprecations, and migrations
Component theming - Scoped themes for individual components
Plugin system - Extensible with custom exporters and validators
Accessibility - Built-in WCAG compliance checking and contrast analysis
Responsive tokens - Breakpoint and state-aware token variations
Figma sync - Compare and sync tokens with Figma designs
CI/CD ready - Automated validation for PRs and pipelines
Analytics - Token usage tracking and bundle impact analysis
Multi-team support - Versioned token registry for design systems
IDE support - Autocomplete and hover previews (VSCode ready)
Tailwind integration - Generate Tailwind config from tokens

Quick Start

Get started with TokiForge in minutes. TokiForge works with any JavaScript framework and provides runtime theme switching, CSS variable generation, and comprehensive token management.

Installation

# React
npm install @tokiforge/core @tokiforge/react

# Vue
npm install @tokiforge/core @tokiforge/vue

# Angular
npm install @tokiforge/core @tokiforge/angular

# Svelte
npm install @tokiforge/core @tokiforge/svelte

# Vanilla JS / Any Framework
npm install @tokiforge/core

Basic Usage

1. Define your tokens (tokens.json):

{
  "color": {
    "primary": { "value": "#7C3AED", "type": "color" },
    "accent": { "value": "#06B6D4", "type": "color" },
    "text": {
      "primary": { "value": "#1F2937", "type": "color" },
      "secondary": { "value": "#6B7280", "type": "color" }
    }
  },
  "spacing": {
    "sm": { "value": "8px", "type": "dimension" },
    "md": { "value": "16px", "type": "dimension" },
    "lg": { "value": "24px", "type": "dimension" }
  },
  "radius": {
    "sm": { "value": "4px", "type": "dimension" },
    "lg": { "value": "12px", "type": "dimension" }
  }
}

2. Use in React:

import { ThemeProvider, useToken } from "@tokiforge/react";
import tokens from "./tokens.json";

function App() {
  return (
    <ThemeProvider tokens={tokens} defaultTheme="light">
      <Button />
    </ThemeProvider>
  );
}

function Button() {
  const primaryColor = useToken("color.primary");
  const spacing = useToken("spacing.md");
  const radius = useToken("radius.lg");

  return (
    <button
      style={{
        backgroundColor: primaryColor,
        padding: spacing,
        borderRadius: radius,
      }}
    >
      Click me
    </button>
  );
}

3. Switch themes at runtime:

import { useTheme } from "@tokiforge/react";

function ThemeSwitcher() {
  const { setTheme, currentTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(currentTheme === "light" ? "dark" : "light")}
    >
      Switch to {currentTheme === "light" ? "dark" : "light"} mode
    </button>
  );
}

View full documentation →

Why TokiForge?

| Feature | TokiForge | Others | | ------------------------------ | --------- | -------------------------- | | Runtime theme switching | Yes | Often requires rebuild | | Framework-agnostic | Yes | Usually framework-specific | | TypeScript support | Yes | Partial or manual | | Bundle size | <3KB | Often larger | | CSS custom properties | Yes | JS-heavy runtime | | Zero JS overhead (static mode) | Yes | Always requires JS |

Packages

| Package | Description | npm | | -------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | @tokiforge/core | Core engine (works with any framework) | | | @tokiforge/react | React adapter with hooks | | | @tokiforge/vue | Vue 3 composables | | | @tokiforge/angular | Angular service with Signals | | | @tokiforge/svelte | Svelte stores | | | tokiforge-cli | CLI tool for token management | |

Architecture

┌──────────────────────────────┐
│      Design Tokens (JSON)    │
│   (colors, spacing, etc.)    │
└─────────────┬────────────────┘
              │
┌─────────────▼───────────────┐
│   TokiForge Core Engine     │
│  - Token Parser/Validator    │
│  - Runtime CSS Generator     │
│  - Theme Manager             │
└─────────────┬───────────────┘
              │
┌─────────────▼───────────────┐
│   Framework Adapters        │
│ (React/Vue/Angular/Svelte)  │
└─────────────┬───────────────┘
              │
┌─────────────▼───────────────┐
│   Your Application          │
│   Using Design Tokens       │
└──────────────────────────────┘

Framework Examples

React

import { ThemeProvider, useToken } from "@tokiforge/react";

function App() {
  return (
    <ThemeProvider tokens={tokens}>
      <Component />
    </ThemeProvider>
  );
}

Vue

<script setup>
import { useToken } from "@tokiforge/vue";

const primaryColor = useToken("color.primary");
</script>

Angular

import { ThemeService } from '@tokiforge/angular';

constructor(private themeService: ThemeService) {
  const primaryColor = this.themeService.getToken('color.primary');
}

Svelte

<script>
  import { useToken } from '@tokiforge/svelte';
  const primaryColor = useToken('color.primary');
</script>

Vanilla JS

import { ThemeRuntime } from "@tokiforge/core";

const runtime = new ThemeRuntime(tokens);
const primaryColor = runtime.getToken("color.primary");
runtime.applyTheme("dark");

View complete examples →

CLI Tool

Install the CLI globally:

npm install -g tokiforge-cli

Commands:

# Initialize a new token file
tokiforge init

# Build tokens to CSS/SCSS/JS
tokiforge build

# Start development server with live preview
tokiforge dev

# Validate token schema
tokiforge lint

# Validate tokens for CI/CD
tokiforge validate [--strict] [--figma]

# Compare Figma ↔ Code tokens
tokiforge figma:diff --token TOKEN --file-key KEY

# Generate token analytics
tokiforge analytics

Documentation

Getting Started - Quick setup guide
Installation - Framework-specific setup
React Guide - React integration
Vue Guide - Vue integration
Angular Guide - Angular integration
Svelte Guide - Svelte integration
Examples - Complete example projects

Contributing

Contributions are welcome! Here's how you can help:

Star the project - It helps others discover TokiForge
Report bugs - Open an issue on GitHub
Suggest features - Share your ideas
Submit PRs - Fix bugs or add features
Improve docs - Help make documentation b

Tokiforge

Install / Use

README