Forem: Sachin Dilshan

Type-Safe Design Tokens in Vue: Introducing TokiForge v1.1.0

Sachin Dilshan — Tue, 11 Nov 2025 11:51:30 +0000

If you've ever worked with design tokens in Vue, you know the pain of losing type safety. You define your tokens with a specific structure, but when you access them in components, TypeScript treats them as a generic DesignTokens type. No autocomplete, no type checking, and plenty of opportunities for typos.

TokiForge v1.1.0 solves this problem by introducing type-safe token access for Vue developers. In this post, we'll explore how this feature works, why it matters, and how to use it in your projects.

The Problem: Losing Type Information

Before v1.1.0, when you used useTheme() in Vue, you'd get back a ComputedRef<DesignTokens>. While this works, it's not very helpful:

// Before v1.1.0
const { tokens } = useTheme();

// TypeScript only knows it's DesignTokens
// No autocomplete for token paths
// No type checking for token structure
tokens.value.color.primary // ❌ TypeScript doesn't know if this exists

This means:

❌ No IntelliSense/autocomplete
❌ No compile-time type checking
❌ Easy to make typos in token paths
❌ No refactoring support

The Solution: Generic Type Parameters

TokiForge v1.1.0 introduces generic type support to useTheme() and provideTheme(). Now you can specify your exact token type and get full type safety:

// v1.1.0 - Type-safe!
const { tokens } = useTheme<MyDesignTokens>();

// Full autocomplete and type checking! ✅
tokens.value.color.primary.value // TypeScript knows this exists

Getting Started

Installation

npm install @tokiforge/core @tokiforge/vue

Define Your Token Type

First, define your token structure as a TypeScript interface:

import type { DesignTokens, TokenValue } from '@tokiforge/core';

interface MyDesignTokens extends DesignTokens {
  color: {
    primary: TokenValue;
    secondary: TokenValue;
    background: {
      default: TokenValue;
      muted: TokenValue;
    };
  };
  radius: {
    sm: TokenValue;
    md: TokenValue;
    lg: TokenValue;
  };
  spacing: {
    xs: TokenValue;
    sm: TokenValue;
    md: TokenValue;
    lg: TokenValue;
  };
}

Create Your Tokens

const lightTokens: MyDesignTokens = {
  color: {
    primary: { value: '#7C3AED', type: 'color' },
    secondary: { value: '#06B6D4', type: 'color' },
    background: {
      default: { value: '#FFFFFF', type: 'color' },
      muted: { value: '#F9FAFB', type: 'color' },
    },
  },
  radius: {
    sm: { value: '4px', type: 'dimension' },
    md: { value: '8px', type: 'dimension' },
    lg: { value: '12px', type: 'dimension' },
  },
  spacing: {
    xs: { value: '4px', type: 'dimension' },
    sm: { value: '8px', type: 'dimension' },
    md: { value: '16px', type: 'dimension' },
    lg: { value: '24px', type: 'dimension' },
  },
};

const darkTokens: MyDesignTokens = {
  color: {
    primary: { value: '#A78BFA', type: 'color' },
    secondary: { value: '#22D3EE', type: 'color' },
    background: {
      default: { value: '#0F172A', type: 'color' },
      muted: { value: '#1E293B', type: 'color' },
    },
  },
  radius: {
    sm: { value: '4px', type: 'dimension' },
    md: { value: '8px', type: 'dimension' },
    lg: { value: '12px', type: 'dimension' },
  },
  spacing: {
    xs: { value: '4px', type: 'dimension' },
    sm: { value: '8px', type: 'dimension' },
    md: { value: '16px', type: 'dimension' },
    lg: { value: '24px', type: 'dimension' },
  },
};

Provide Theme with Type Safety

<script setup lang="ts">
import { provideTheme } from '@tokiforge/vue';

const themeConfig = {
  themes: [
    { name: 'light', tokens: lightTokens },
    { name: 'dark', tokens: darkTokens },
  ],
  defaultTheme: 'light',
};

// Type is automatically inferred from config!
provideTheme(themeConfig);
</script>

Use Theme with Type Safety

<script setup lang="ts">
import { useTheme } from '@tokiforge/vue';

// Specify your token type for full type safety
const { tokens, setTheme } = useTheme<MyDesignTokens>();

// Now you get full autocomplete! 🎉
const primaryColor = tokens.value.color.primary.value;
const borderRadius = tokens.value.radius.lg.value;
const spacing = tokens.value.spacing.md.value;
</script>

<template>
  <div>
    <button
      :style="{
        backgroundColor: tokens.value.color.primary.value,
        borderRadius: tokens.value.radius.lg.value,
        padding: tokens.value.spacing.md.value,
      }"
      @click="setTheme('dark')"
    >
      Switch Theme
    </button>
  </div>
</template>

Real-World Example

Here's a complete example showing how type-safe tokens work in a real component:

<template>
  <div class="card" :style="cardStyles">
    <h2 :style="headingStyles">Type-Safe Tokens</h2>
    <p :style="textStyles">
      This component uses type-safe design tokens with full IntelliSense support.
    </p>
    <button :style="buttonStyles" @click="toggleTheme">
      Current Theme: {{ theme }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTheme } from '@tokiforge/vue';
import type { DesignTokens, TokenValue } from '@tokiforge/core';

interface AppDesignTokens extends DesignTokens {
  color: {
    primary: TokenValue;
    secondary: TokenValue;
    text: {
      primary: TokenValue;
      secondary: TokenValue;
    };
    background: {
      default: TokenValue;
      card: TokenValue;
    };
  };
  radius: {
    sm: TokenValue;
    md: TokenValue;
    lg: TokenValue;
  };
  spacing: {
    sm: TokenValue;
    md: TokenValue;
    lg: TokenValue;
  };
}

const { theme, tokens, setTheme } = useTheme<AppDesignTokens>();

const cardStyles = computed(() => ({
  backgroundColor: tokens.value.color.background.card.value,
  borderRadius: tokens.value.radius.md.value,
  padding: tokens.value.spacing.lg.value,
}));

const headingStyles = computed(() => ({
  color: tokens.value.color.text.primary.value,
  marginBottom: tokens.value.spacing.md.value,
}));

const textStyles = computed(() => ({
  color: tokens.value.color.text.secondary.value,
  marginBottom: tokens.value.spacing.md.value,
}));

const buttonStyles = computed(() => ({
  backgroundColor: tokens.value.color.primary.value,
  color: '#FFFFFF',
  borderRadius: tokens.value.radius.sm.value,
  padding: `${tokens.value.spacing.sm.value} ${tokens.value.spacing.md.value}`,
  border: 'none',
  cursor: 'pointer',
}));

const toggleTheme = () => {
  setTheme(theme.value === 'light' ? 'dark' : 'light');
};
</script>

Benefits of Type-Safe Tokens

1. IntelliSense/Autocomplete

Your IDE now knows exactly what tokens are available:

tokens.value.color. // IDE suggests: primary, secondary, text, background
tokens.value.radius. // IDE suggests: sm, md, lg

2. Compile-Time Type Checking

TypeScript will catch errors before runtime:

// ❌ TypeScript error: Property 'invalid' does not exist
tokens.value.color.invalid.value;

// ✅ TypeScript knows this is valid
tokens.value.color.primary.value;

3. Refactoring Support

When you rename tokens, your IDE can refactor all usages automatically.

4. Better Documentation

The type definition serves as documentation for your token structure.

Type Inference

You don't always need to explicitly specify the type. TokiForge can infer it from your config:

const config = {
  themes: [
    { name: 'light', tokens: lightTokens },
    { name: 'dark', tokens: darkTokens },
  ],
  defaultTheme: 'light',
};

// Type is automatically inferred!
const context = provideTheme(config);
// context.tokens is now typed based on your token structure

Backward Compatibility

All existing code continues to work without changes. If you don't specify a type parameter, it defaults to DesignTokens:

// Still works - defaults to DesignTokens
const { tokens } = useTheme();

This means you can migrate gradually, adding type safety where it matters most.

Migration Guide

Migrating to type-safe tokens is straightforward:

Step 1: Define Your Token Type

Create an interface that extends DesignTokens:

interface MyDesignTokens extends DesignTokens {
  // Your token structure
}

Step 2: Update Your Token Definitions

Add type annotations to your token objects:

const lightTokens: MyDesignTokens = {
  // Your tokens
};

Step 3: Use Generic Type Parameter

Update your useTheme() calls:

// Before
const { tokens } = useTheme();

// After
const { tokens } = useTheme<MyDesignTokens>();

That's it! Your code now has full type safety.

Advanced Usage

Extracting Token Types

You can extract the token type from your config:

import type { ExtractTokenType } from '@tokiforge/vue';

type Config = {
  themes: Array<{ name: string; tokens: MyDesignTokens }>;
  defaultTheme?: string;
};

type InferredTokens = ExtractTokenType<Config & ThemeConfig>;

Multiple Token Types

If you have different token structures for different parts of your app:

interface ComponentTokens extends DesignTokens {
  button: {
    primary: TokenValue;
    secondary: TokenValue;
  };
}

const { tokens } = useTheme<ComponentTokens>();

Performance

Type safety comes with zero runtime overhead. The generic types are purely compile-time features:

✅ No runtime performance impact
✅ Still <3KB gzipped
✅ Uses CSS variables for instant theme switching
✅ SSR-friendly

What's Next?

Type-safe token access is currently available for Vue. We're planning to extend this to:

React: Type-safe useTheme() hook
Svelte: Type-safe createThemeStore()
Angular: Type-safe theme service

If you're interested in contributing, we'd love your help! Check out our roadmap for more details.

Conclusion

Type-safe design tokens in TokiForge v1.1.0 bring the full power of TypeScript to your design system. With autocomplete, type checking, and better developer experience, building type-safe design systems has never been easier.

Try it out today:

npm install @tokiforge/core @tokiforge/vue

Resources:

Have questions or feedback? Drop a comment below or open an issue on GitHub!

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

Sachin Dilshan — Thu, 06 Nov 2025 09:15:18 +0000

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

API Documentation: https://tokiforge.github.io/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

🚀 ngxsmk-datatable v1.7.0 — Enterprise Edition is here!

Sachin Dilshan — Wed, 29 Oct 2025 09:16:48 +0000

We’re thrilled to announce the release of ngxsmk-datatable v1.7.0, our biggest update yet — introducing the Enterprise Edition, designed for modern data-driven Angular applications.

✨ What’s New

📄 PDF Export (powered by jsPDF)
🤝 Real-time Collaboration via WebSocket
📊 Inline Charts & Sparklines
🎨 Advanced Theming with 11 built-in themes
🧮 Formula Engine (Excel-style expressions)
🗂️ Multi-sheet & Multi-view Support
💾 Data Import Wizard (CSV, Excel, JSON)

All new features are opt-in, fully backward compatible, and built for enterprise-grade performance.

🧠 Why it matters

ngxsmk-datatable now goes beyond tables — it’s a data platform for building dashboards, internal tools, and enterprise UIs faster than ever.

🔗 Check out the full release:
👉 https://github.com/toozuuu/ngxsmk-datatable/releases/tag/1.7.0

Angular #WebDev #OpenSource #DataTable #Frontend #EnterpriseUI

ngxsmk-datatable v1.1.0 – Type-Safe Angular Tables with Virtual Scrolling & Frozen Columns

Sachin Dilshan — Tue, 28 Oct 2025 21:45:57 +0000

Hey Angular devs! 👋

The ngxsmk-datatable library just released v1.1.0, and it comes with some great updates:

Full TypeScript type safety for rows, columns, and templates – no more runtime surprises!
Virtual scrolling for smooth performance with large datasets.
Frozen columns for better usability in wide tables.
Improved row selection and checkbox handling.

It’s perfect if you work with large data tables in Angular and want both performance and safety.

Check it out here: GitHub – ngxsmk-datatable

Would love to hear how others plan to use it in their projects!

Stop the Bloat: Introducing lite-schema-check, the Zero-Dependency Runtime Validator You Didn't Know You Needed

Sachin Dilshan — Sun, 26 Oct 2025 22:43:28 +0000

Hello DEV Community!

I've just released a minimal, zero-dependency NPM package called lite-schema-check and I think it directly addresses a common pattern in the JavaScript ecosystem.

We all know the moment: we need to check if a simple object—a configuration file, an options parameter, or a JSON payload—has the right keys and types. The common choices are either writing verbose, custom type checks or pulling in a huge dependency like Zod or Joi.

lite-schema-check is the ultimate minimalist solution, built for Node.js microservices and lightweight libraries where every kilobyte counts.

What is it and Why is it "Lite"?

This utility exports a single, pure function: validate(object, schema).

It performs the minimum viable validation: it only checks for key presence and primitive type matching. It validates for string, number, boolean, array, and object.

The core philosophy is minimalism over complex data modeling. It doesn't do nested validation, unions, or transforms—that's what the bigger libraries are for. It exists to solve the 80% case: ensuring a flat config object or API input meets its basic primitive contract. And crucially, it does this with zero external dependencies.

🎯 Use Case: Fail Fast on External Data
This tool is perfect for asserting data integrity when dealing with inputs that TypeScript can't guarantee at compile time (like API responses or environment variables).

Imagine validating a module's configuration object:

TypeScript

// Define the expected contract
const MODULE_CONFIG_SCHEMA = {
  apiKey: 'string',
  port: 'number',
  useCache: 'boolean',
};

// Check the incoming data
const options = getExternalConfig(); 

const result = validate(options, MODULE_CONFIG_SCHEMA);

if (!result.isValid) {
    // Throw a clear, immediate error on initialization
    throw new Error(`Config validation failed: ${result.errors[0].message}`);
}
// Configuration is now safe and guaranteed to have the right primitives.

If a user passes the wrong type (e.g., port: "8080"), the app fails immediately with a clear error message, saving hours of downstream debugging.

🛠️ Get Involved
This is a true MVP. I'd love your feedback, especially on:

The "Lite" Promise: What is the next most critical, simple feature that could be added without breaking the zero-dependency promise?

Missing Primitives: Should we add types like 'function' or 'symbol'?

Check out the GitHub repo and help us keep the utility ultra-light!

➡️ GitHub Repo: https://github.com/toozuuu/lite-schema-check

javascript #typescript #nodejs #opensource #validation

Angular Datepicker v1.3.6: Popovers, Smooth Transitions, and a Pluggable Holiday System! 🎁

Sachin Dilshan — Fri, 17 Oct 2025 06:25:13 +0000

We've just rolled out a major feature upgrade for our Angular datepicker component, ngxsmk-datepicker, focusing heavily on delivering a cleaner user experience and powerful new extensibility points.

If you're building a business application, booking system, or any tool that needs advanced date handling, this update is for you.

✨ Highlights of v1.3.6
We addressed three key areas in this release: UX flow, visual performance, and modularity.

Adaptive Display Modes (Popover & Inline) We've transformed how the calendar is displayed, making it flexible for any screen or layout:

Popover Mode (New Default): The calendar appears as a discrete popover when the input field is clicked. This mode is excellent for forms and complex views where space is limited. It automatically includes a Clear button in both the input field and the popover footer.

Inline Mode: For dashboards or permanent views, setting the [inline] input to true embeds the calendar directly into the page.

🚀 Silky Smooth Month Navigation
Nobody likes jumpy UI elements. We've introduced fluid CSS transitions to the month navigation. When you click the arrow buttons, the calendar grid now slides smoothly into the next month, dramatically enhancing the component’s overall feel and visual polish.
🎁 The Big Feature: Pluggable Holiday Provider
This is the largest architectural improvement. For any application dealing with specific dates (like scheduling, payroll, or booking), marking and disabling non-working days is crucial.

We introduced the HolidayProvider interface, allowing you to inject your own logic for defining important dates.

How it works:

You create a simple class that implements the new interface, fetching or defining your custom rules (e.g., regional holidays, company shutdown days).

TypeScript

export interface HolidayProvider {
  isHoliday(date: Date): boolean;
  getHolidayLabel?(date: Date): string | null;
}

The datepicker uses your provider to automatically style (mark) these dates and display a tooltip with the holiday name.

Use the new [disableHolidays] input to instantly enforce these rules by blocking selection on all provided dates. This simplifies validation logic significantly!

Source Code

Want to see the fluid transitions or test the holiday disabling toggle?

Source Code: https://github.com/toozuuu/ngxsmk-datepicker

NPM: https://www.npmjs.com/package/ngxsmk-datepicker

Feel free to check out the repo, submit issues, or ask any questions about integrating the new features! We look forward to your feedback.

I built this to simplify date range selection in Angular 17+. If you’re an Angular dev, try it out and let me know what features you’d love next! Star it on GitHub if you’d like to support the project ❤️ 🔗 https://github.com/toozuuu/ngxsmk-datepicker

Sachin Dilshan — Tue, 14 Oct 2025 20:12:04 +0000

Antonio Cardenas for Angular Firebase

Oct 9 '25

Angular 20: De la programación imperativa a la creación declarativa de componentes dinámicos

#angular #webdev #spanish #frontend

Comments

6 min read

GitHub - toozuuu/ngxsmk-datepicker: A powerful, modern, and highly customizable Angular date range picker with built-in time selection. · GitHub

A powerful, modern, and highly customizable Angular date range picker with built-in time selection. - toozuuu/ngxsmk-datepicker

github.com

I built a zero-dependency, standalone date range picker for Angular 17+ (ngxsmk-datepicker)

Sachin Dilshan — Thu, 09 Oct 2025 10:12:46 +0000

Hello Angular devs!

I've been working on a new component and am excited to share ngxsmk-datepicker 📅. This is a highly customizable date range picker built from the ground up to be a zero-dependency, standalone component for the latest versions of Angular (17+).

The goal was to create a feature-rich datepicker that doesn't force users to pull in a massive UI library.

Why use ngxsmk-datepicker?
⚡ Truly Standalone: No external dependencies. Just drop the component in for maximum performance and smallest bundle size.

🌍 Advanced i18n & Localization: It automatically handles the complex regional settings, correctly formatting month names and determining the first day of the week based on the user's browser locale (navigator.language).

🎨 Highly Customizable: Built-in Light/Dark themes and easy custom color theming using simple CSS variables.

🛠️ Full Flexibility: Supports Single Date and Date Range modes, comes with pre-defined quick ranges (like "Last 7 Days"), and allows for custom date disabling logic (e.g., locking out weekends/holidays).

🔄 Input Compatibility: Accepts Date objects, strings, Moment, or Dayjs objects for maximum compatibility.

I'm currently working on version 1.0.4 and would love any feedback from the community on features or styling, especially regarding real-world use cases!

GitHub / Installation:https://github.com/toozuuu/ngxsmk-datepicker

NPM: https://www.npmjs.com/package/ngxsmk-datepicker

Thanks for checking it out!

🚀 Introducing ngxsmk-stripe: A Modern Angular Stripe Plugin

Sachin Dilshan — Wed, 20 Aug 2025 04:58:02 +0000

I’m excited to share my latest open-source project: ngxsmk-stripe, an Angular 17+ plugin that makes integrating Stripe payments simple, customizable, and future-proof.

💳 Why I Built This

If you’ve ever tried to integrate Stripe into an Angular app, you know it can feel a bit overwhelming. I wanted a solution that was:

✅ Angular-first (built with standalone components)
✅ Future-proof (compatible with Angular 17+)
✅ Flexible (one-time payments + subscriptions)
✅ Customizable (SCSS theming + Stripe Appearance API)
✅ Developer-friendly (success/error event emitters)

That’s how ngxsmk-stripe was born!

🔑 Key Features

💳 One-time payments via Stripe PaymentElement
🔄 Subscription & recurring billing with SetupIntent
🎨 Theme customization using SCSS + Stripe Appearance API
🌍 Localization support (locale input)
⚡ Standalone Angular components (no NgModule required)
📤 Event emitters for handling success and error states

⚡ Quick Example

Here’s how easy it is to drop a payment form into your Angular app:

<ngxsmk-stripe-payment
  [publicKey]="publicKey"
  [clientSecret]="paymentClientSecret"
  [returnUrl]="returnUrl"
  [appearance]="appearance"
  (paymentSuccess)="onPaymentSuccess($event)"
  (paymentError)="onPaymentError($event)">
</ngxsmk-stripe-payment>

And for subscriptions:

<ngxsmk-stripe-subscription
  [publicKey]="publicKey"
  [clientSecret]="subscriptionClientSecret"
  [returnUrl]="returnUrl"
  [appearance]="appearance"
  (subscriptionSuccess)="onSubSuccess($event)"
  (subscriptionError)="onSubError($event)">
</ngxsmk-stripe-subscription>

🎨 Customization

Use SCSS variables for button styles, colors, and typography
Leverage Stripe’s Appearance API for advanced UI theming

📦 Installation

npm install ngxsmk-stripe @stripe/stripe-js

🛠 Contributing

I’d love to see the community extend this plugin with new features (like saved payment methods, invoicing tools, etc.). PRs are welcome!

Repo 👉 GitHub: ngxsmk-stripe

📜 Closing Thoughts

With ngxsmk-stripe, you can focus on building your product while handling payments securely and elegantly in Angular. I hope this saves other devs the hours I spent piecing everything together!

🚀 Try it out, give it a ⭐ on GitHub, and let me know your feedback!

Drop-in spinner for any Angular 17+ button (no CSS imports): ngxsmk-button-spinner

Sachin Dilshan — Wed, 20 Aug 2025 04:45:07 +0000

Drop-in spinner for any Angular 17+ button (no CSS imports): `ngxsmk-button-spinner`

Add a loading spinner to any existing <button> with one attribute.
No component swap. No global stylesheet. SSR-safe. A11y-friendly.

✨ What it is

ngxsmk-button-spinner is a tiny Angular 17+ directive that overlays a spinner on your button during async work.

✅ Drop-in: [ngxsmkButtonSpinner]="loading"
✅ Two modes
- Inline (default): spinner appears after the text with a small gap
- Overlay (centered): [ngxsmkButtonSpinnerHideLabel]="true"
✅ Zero CSS imports — styles are injected once
✅ CSS variables theming (bind directly in the template)
✅ A11y: role="status", configurable aria-label
✅ SSR-safe

🧩 Install

npm i ngxsmk-button-spinner

Peer deps: @angular/core@>=17, @angular/common@>=17.

🚀 Quick start (Signals)

// app.component.ts
import { Component, signal } from '@angular/core';
import { NgxSmkButtonSpinnerDirective } from 'ngxsmk-button-spinner';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxSmkButtonSpinnerDirective],
  template: `
    <button [ngxsmkButtonSpinner]="saving()" (click)="save()">
      Save
    </button>
  `
})
export class AppComponent {
  saving = signal(false);

  save() {
    this.saving.set(true);
    setTimeout(() => this.saving.set(false), 1200);
  }
}

That’s it. No module boilerplate. No style imports.

🎛️ Theming (recommended): bind CSS variables directly

Bind these CSS variables right on the button for instant updates (no restarts, no object cloning):

--ngxsmk-color (spinner color)
--ngxsmk-track (trail color, default transparent)
--ngxsmk-thickness (2px, 3px, …)
--ngxsmk-size (20px, 1.2em, …)
--ngxsmk-speed (700ms, 450ms, …)

Inline (default)

<button
  [ngxsmkButtonSpinner]="loading"
  [style.--ngxsmk-color]="'#0ea5e9'"
  [style.--ngxsmk-thickness]="'2px'"
  [style.--ngxsmk-size]="'22px'"
  [style.--ngxsmk-speed]="'600ms'">
  Publish
</button>

Overlay (centered, text hidden)

<button
  [ngxsmkButtonSpinner]="loading"
  [ngxsmkButtonSpinnerHideLabel]="true"
  [style.--ngxsmk-color]="'#0ea5e9'"
  [style.--ngxsmk-thickness]="'6px'"
  [style.--ngxsmk-size]="'20px'"
  [style.--ngxsmk-speed]="'500ms'">
  Save
</button>

Prefer variable binding over passing a theme object — it updates immediately with Angular HMR/Signals and avoids change-detection gotchas.

You can also set per-class defaults:

/* component.css */
.primary-btn {
  --ngxsmk-color: #2563eb;
  --ngxsmk-thickness: 3px;
  --ngxsmk-size: 22px;
  --ngxsmk-speed: 450ms;
}

🧠 API (tiny)

<button
  [ngxsmkButtonSpinner]="loading"         <!-- boolean or Signal<boolean> -->
  [ngxsmkButtonSpinnerHideLabel]="true"   <!-- optional overlay mode -->
  [ngxsmkButtonSpinnerOptions]="{ ariaLabel: 'Saving' }">
  Save
</button>

ngxsmkButtonSpinner: boolean | Signal<boolean) — toggles spinner; also disables the button.
ngxsmkButtonSpinnerHideLabel?: boolean | Signal<boolean) — overlay mode when true.
ngxsmkButtonSpinnerOptions?: { ariaLabel?: string } — a11y label for the spinner.

♿ Accessibility

Spinner uses role="status" with an aria-label (default: “Loading”).
Button is disabled while loading to prevent duplicate submissions.
Overlay mode hides the label visually but keeps the status for screen readers.

🌐 SSR / hydration

The directive injects DOM only in the browser after view init. Toggle loading in response to user actions or browser-only effects.

🛠️ Troubleshooting

Theme not updating Bind CSS variables directly ([style.--ngxsmk-*]). This updates instantly without rebuilding.
Spinner not centered in overlay Ensure the button doesn’t clip positioned children with overflow: hidden.
Text not hiding in overlay Upgrade to the latest build — the label is wrapped and hidden safely.

📦 Links

If you build something with it, drop a comment — I’d love to see it!

ngxsmk-tel-input — International Phone Input for Angular (E.164, i18n, RTL)

Sachin Dilshan — Mon, 18 Aug 2025 03:19:02 +0000

I’ve shipped a small, focused UI component for modern Angular apps: an international telephone input with country flags, dropdown, and real validation/formatting.

It wraps the excellent intl-tel-input for UI and libphonenumber-js for validation/parsing, and exposes a clean Angular API that works with Reactive & Template-driven Forms (CVA). It emits E.164 numbers by default (e.g. +14155550123), and is SSR-safe.

TL;DR

✅ UI via intl-tel-input, rules via libphonenumber-js

✅ Emits clean E.164 values

✅ Works with Reactive & Template forms (ControlValueAccessor)

✅ Angular 17–19, standalone, SSR-friendly

✅ Options: separateDialCode, nationalMode, preferredCountries, attach dropdown to

, sizes, variants, clear button, autofocus, select-on-focus

🌍 Localization & RTL: customize labels, country names, and direction

🔒 Optional digits-only input mode (with single leading +)

NPM: https://www.npmjs.com/package/ngxsmk-tel-input
GitHub: https://github.com/toozuuu/ngxsmk-tel-input

Install

npm i ngxsmk-tel-input intl-tel-input libphonenumber-js

Add styles & flag assets in your app (not the library). Update angular.json:


{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/intl-tel-input/build/css/intlTelInput.css"
            ],
            "assets": [
              { "glob": "**/*", "input": "node_modules/intl-tel-input/build/img", "output": "assets/intl-tel-input/img" }
            ]
          }
        }
      }
    }
  }
}

Optional (helps some setups resolve flags):

/* global styles */

.iti__flag { background-image: url("/assets/intl-tel-input/img/flags.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url("/assets/intl-tel-input/img/flags@2x.png"); }
}

Restart your dev server after editing angular.json.

Quick Start (Reactive Forms)

// app.component.ts
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { JsonPipe } from '@angular/common';
import { NgxsmkTelInputComponent } from 'ngxsmk-tel-input';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, NgxsmkTelInputComponent, JsonPipe],
  template: `
    <form [formGroup]="fg" style="max-width:420px;display:grid;gap:12px">
      <ngxsmk-tel-input
        formControlName="phone"
        label="Phone"
        hint="Include area code"
        [initialCountry]="'US'"
        [preferredCountries]="['US','GB','AU']">
      </ngxsmk-tel-input>

      <pre>Value: {{ fg.value | json }}</pre>
    </form>
  `,
})
export class AppComponent {
  private readonly fb = inject(FormBuilder);
  fg = this.fb.group({ phone: ['', Validators.required] });
}

Value semantics: The control emits E.164 (e.g., +14155550123) when valid, or null when empty/invalid.

Localization & RTL (i18n)

Customize dropdown/search labels and country names. RTL is as easy as dir="rtl".

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { NgxsmkTelInputComponent, IntlTelI18n, CountryMap } from 'ngxsmk-tel-input';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, NgxsmkTelInputComponent],
  template: `
    <form [formGroup]="fg" style="max-width:420px;display:grid;gap:12px">
      <ngxsmk-tel-input
        formControlName="phone"
        label="전화번호"
        hint="지역 번호를 포함하세요"
        placeholder="전화번호 입력"
        dir="ltr"
        [initialCountry]="'KR'"
        [preferredCountries]="['KR','US','JP']"
        [i18n]="koLabels"
        [localizedCountries]="koCountries">
      </ngxsmk-tel-input>

      <pre>Value: {{ fg.value | json }}</pre>
    </form>
  `
})
export class AppComponent {
  private fb = inject(FormBuilder);
  fg = this.fb.group({ phone: ['', Validators.required] });

  // Korean UI labels (dropdown/search/ARIA)
  koLabels: IntlTelI18n = {
    selectedCountryAriaLabel: '선택한 국가',
    countryListAriaLabel: '국가 목록',
    searchPlaceholder: '국가 검색',
    zeroSearchResults: '결과 없음',
    noCountrySelected: '선택된 국가 없음'
  };

  // Korean country names (override what you need)
  koCountries: CountryMap = {
    KR: '대한민국',
    US: '미국',
    JP: '일본',
    CN: '중국',
    GB: '영국',
    DE: '독일',
    FR: '프랑스',
    AU: '호주',
    CA: '캐나다',
    IN: '인도'
  };
}

Prefer Korean? Swap labels/countries to ko-KR equivalents and set dir="ltr".

Optional: Digits-Only Input

You can forbid non-numeric characters (optionally allowing a single leading +):

<ngxsmk-tel-input
  formControlName="phone"
  [digitsOnly]="true"
  [allowLeadingPlus]="true">
</ngxsmk-tel-input>

This filters typing/paste (and keeps programmatic updates clean), while validation still uses libphonenumber-js.

Theming (CSS Variables)

<ngxsmk-tel-input style="
  --tel-border:#cbd5e1;
  --tel-ring:#22c55e;
  --tel-radius:14px;
  --tel-dd-item-hover: rgba(34,197,94,.12);
"></ngxsmk-tel-input>

Dark mode? Wrap a parent in .dark — tokens adapt automatically.

SSR Notes

The component lazy-loads intl-tel-input only in the browser (guarded with isPlatformBrowser), so no window access on the server.

Troubleshooting

Unstyled dropdown / missing flags → ensure CSS & assets are added in angular.json, then restart dev server.
Flags don’t show → add the CSS override block shown above to point to /assets/intl-tel-input/img.
Peer dependency conflict → the library peers target @angular/* >=17 <20.
Can’t import the package in a workspace → build the lib (ng build ngxsmk-tel-input) or use a tarball install.

Roadmap & Contributions

Accessibility polish & docs samples
More presets & examples (StackBlitz)
Community requests!

PRs, issues, and ideas are super welcome 🙌

NPM: https://www.npmjs.com/package/ngxsmk-tel-input
GitHub: https://github.com/toozuuu/ngxsmk-tel-input

If you try it, I’d love your feedback. Happy building! 💚