Introducing TokiForge: A Framework-Agnostic Design Token Engine with Runtime Theme Switching

The Problem As frontend developers, we’ve all been there. You’re working on a React project, and you need a theming solution. So you set up styled-components or Theme UI. Then you start a Vue project, and you need a different solution. Then Svelte, and another approach. Before you know it, you’re maintaining three different theming systems, each with its own quirks and limitations.

The pain points:

• Different solutions for each framework
• Theme switching requires reloads or rebuilds
• Inconsistent token management across projects
• Time wasted on setup and configuration

The Solution: TokiForge

We built TokiForge - a framework-agnostic design token and theming engine that works with React, Vue, Svelte, Angular, and any JavaScript framework. One tool, multiple frameworks, zero friction.

What Makes TokiForge Different?

Framework-Agnostic Core

Unlike framework-specific solutions, TokiForge’s core works everywhere:

typescript
import { ThemeRuntime } from '@tokiforge/core';

const runtime = new ThemeRuntime({
themes: [
{ name: 'light', tokens: lightTokens },
{ name: 'dark', tokens: darkTokens }
],
defaultTheme: 'light'
});

runtime.init();
runtime.applyTheme('dark'); // Switch instantly!

Runtime Theme Switching

Switch themes without page reloads or rebuilds. Perfect for light/dark mode, multi-brand applications, or dynamic theming.

Framework Adapters

While the core works everywhere, we provide dedicated adapters for popular frameworks:

React:

tsx
import { ThemeProvider, useTheme } from '@tokiforge/react';

function App() {
return (
<ThemeProvider config={themeConfig}>
<MyComponent />
</ThemeProvider>
);
}

function MyComponent() {
const { theme, setTheme } = useTheme();
return <button onClick={() => setTheme('dark')}>Dark Mode</button>;
}

Vue:

vue
<script setup>
import { useTheme } from '@tokiforge/vue';

const { theme, setTheme } = useTheme(config);
</script>

<template>
<button @click="setTheme('dark')">Switch Theme</button>
</template>

Svelte:

svelte
<script>
import { createThemeStore } from '@tokiforge/svelte';

const theme = createThemeStore(config);
</script>

<button on:click={() => theme.setTheme('dark')}>
Switch Theme
</button>

Key Features

✨ Runtime Theme Switching - No reloads or rebuilds needed 🎨 Framework-Agnostic - Works with React, Vue, Svelte, Angular, and vanilla JS 🔧 CLI Tool - Get started in seconds 🧪 Production Ready - 58 tests, 100% passing, TypeScript support 📦 Multiple Export Formats - CSS, SCSS, JavaScript, TypeScript, or JSON 🎯 Token Parsing - Supports JSON and YAML 🔒 Type Safe - Full TypeScript definitions ♿ Accessibility - Built-in color contrast checking

Quick Start

Installation

Install CLI globally

npm install -g tokiforge-cli

Or install packages directly

npm install @tokiforge/core
npm install @tokiforge/react  # or vue, svelte

Initialize a Project

tokiforge init

This creates:

• tokens.json - Your design tokens
• tokiforge.config.json - Configuration file

Build Tokens

tokiforge build

Generates token exports in multiple formats based on your config.

Use in Your App

React Example:

tsx
import { ThemeProvider, useTheme } from '@tokiforge/react';

const themeConfig = {
themes: [
{
name: 'light',
tokens: {
color: {
primary: { value: '#7C3AED', type: 'color' },
background: { value: '#FFFFFF', type: 'color' }
}
}
},
{
name: 'dark',
tokens: {
color: {
primary: { value: '#A78BFA', type: 'color' },
background: { value: '#1F2937', type: 'color' }
}
}
}
],
defaultTheme: 'light'
};

function App() {
return (
<ThemeProvider config={themeConfig}>
<ThemeSwitcher />
</ThemeProvider>
);
}

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

return (
<div style={{
background: tokens.color.background.value,
color: tokens.color.primary.value
}}>
<p>Current theme: {theme}</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</div>
);
}

Real-World Use Cases

• Design Systems - Manage tokens across multiple projects
• Multi-Theme Apps - Light/dark mode, brand variations
• Runtime Theming - Switch themes based on user preferences
• Token Validation - Ensure consistency across your codebase
• Accessibility - Built-in color contrast checking

What’s Included

• ✅ Token parser (JSON/YAML support)
• ✅ Token exporter (CSS, SCSS, JS, TS, JSON)
• ✅ Theme runtime engine
• ✅ Color utilities with accessibility checking
• ✅ Framework adapters (React, Vue, Svelte)
• ✅ CLI tool for development workflow
• ✅ Comprehensive test suite (58 tests)
• ✅ Full TypeScript support

Production Ready

TokiForge is fully tested and production-ready:

• 58 tests covering all core functionality
• 100% passing test suite
• TypeScript support with full type definitions
• Optimized bundle size (<3KB gzipped)
• SSR-safe for Next.js, Nuxt, SvelteKit, etc.

Get Started

GitHub: https://github.com/TokiForge/tokiforge

npm:

• @tokiforge/core - Core engine
• @tokiforge/react - React adapter
• @tokiforge/vue - Vue adapter
• @tokiforge/svelte - Svelte adapter
• tokiforge-cli - CLI tool

Documentation: https://github.com/TokiForge/tokiforge#readme

Why We Built It

We were tired of managing different theming solutions for each framework. TokiForge solves this by providing one tool that works everywhere, with runtime theme switching and a great developer experience.

What’s Next?

We’re open to feedback and contributions! What features would you like to see?

• Figma plugin for bidirectional sync
• More framework adapters
• Enhanced CLI features
• Visual token editor

Try It Now

npm install -g tokiforge-cli
tokiforge init
tokiforge build

Let us know what you think! 🚀

Tags: #webdev #javascript #react #vue #svelte #typescript #designtokens #theming #opensource #frontend