Creating ERC20 tokens has traditionally required deep Solidity knowledge and complex deployment scripts. The @escapehub/token-creator SDK changes that by providing a simple, framework-agnostic JavaScript library for deploying feature-rich tokens across 40+ EVM chains.

This guide shows you how to integrate the SDK into React, Vue, and Svelte applications—complete with wallet connections, vanity address mining, and multi-step token configuration wizards.

The @escapehub/token-creator SDK is a TypeScript library that handles:

• Token deployment to 40+ EVM-compatible blockchains

• Vanity address mining — generate custom token addresses (e.g., starting with 0xCAFE...)

• Configurable token features — burns, fees, limits, security options

• Chain configuration — built-in factory addresses, RPCs, and explorers for all supported networks

The SDK supports major networks including:

• Ethereum & Sepolia

• Base & Base Sepolia

• BNB Smart Chain & BSC Testnet

• Polygon & Polygon Amoy

• Arbitrum One & Arbitrum Sepolia

• Avalanche, Fantom, Optimism, and 30+ more

Before diving into code, check out these production implementations:

• bnbtoken.ai/explore — BNB Chain token creator

• moonbeamtoken.ai/explore — Moonbeam token creator

• basetokencreator.ai/explore — Base chain token creator

• app.escapehub.ai/token-creator/explore — Multi-chain creator

The SDK is framework-agnostic. Here's the core pattern used across all frameworks:

npm install @escapehub/token-creator ethers

import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

// Get ethers signer from your wallet provider
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

// Build token configuration
const config = createDefaultConfig('My Token', 'MTK', '1000000', ownerAddress, {
  burnEnabled: true,
  feesEnabled: true,
  buyFeeBps: 300,      // 3% buy fee
  sellFeeBps: 300,     // 3% sell fee
  // ... more options
});

// Get chain config (factory address, RPC, explorer, etc.)
const chainConfig = getChainConfig(chainId);

// Deploy the token
const result = await deployToken(signer, config, chainConfig, salt);
console.log('Token deployed:', result.tokenAddress);

Want your token address to start with 0xDEAD or 0xCAFE? The SDK includes async vanity mining:

import {
  generateSaltAsync,
  getImplementation,
  getMinimalProxyInitCodeHash,
  getChainConfig,
} from '@escapehub/token-creator';

const chainConfig = getChainConfig(chainId);
const implementation = await getImplementation(provider, chainConfig.factoryAddress);
const initCodeHash = getMinimalProxyInitCodeHash(implementation);

const result = await generateSaltAsync(chainConfig.factoryAddress, initCodeHash, {
  pattern: 'CAFE',
  mode: 'prefix',          // or 'suffix', 'contains'
  maxAttempts: 10_000_000,
  onProgress: (attempts, hashRate) => {
    console.log(`Mining: ${attempts} attempts at ${hashRate} H/s`);
  },
});

if (result) {
  console.log('Found address:', result.address);
  console.log('Use this salt:', result.salt);
}

Now let's see how to wrap the SDK for each framework. The core logic is identical—only the state management differs.

Tech Stack: React 18, TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a custom hook for deployment:

// hooks/useTokenDeploy.ts
import { useState } from 'react';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
  const [status, setStatus] = useState<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const [tokenAddress, setTokenAddress] = useState<string | null>(null);
  const [error, setError] = useState<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    setStatus('confirming');
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      setStatus('deploying');

      const result = await deployToken(signer, config, chainConfig, salt);
      setTokenAddress(result.tokenAddress);
      setStatus('success');
      return result;
    } catch (e) {
      setError(e as Error);
      setStatus('error');
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

Usage in a component:

function TokenCreator() {
  const { deploy, status, tokenAddress } = useTokenDeploy();

  return (
    <div>
      {status === 'confirming' && <p>Confirm in your wallet...</p>}
      {status === 'deploying' && <p>Deploying token...</p>}
      {status === 'success' && <p>Deployed at: {tokenAddress}</p>}
      <button onClick={() => deploy(walletClient, formData)}>
        Deploy Token
      </button>
    </div>
  );
}

Full demo: github.com/escapehub-ai/token-creator-react

Tech Stack: Vue 3.5 (Composition API), TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a composable for deployment:

// composables/useTokenDeploy.ts
import { ref } from 'vue';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
  const status = ref<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const tokenAddress = ref<string | null>(null);
  const error = ref<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    status.value = 'confirming';
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      status.value = 'deploying';

      const result = await deployToken(signer, config, chainConfig, salt);
      tokenAddress.value = result.tokenAddress;
      status.value = 'success';
      return result;
    } catch (e) {
      error.value = e as Error;
      status.value = 'error';
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

Usage in a component:

<script setup lang="ts">
import { useTokenDeploy } from '@/composables/useTokenDeploy';
import { useVanityMining } from '@/composables/useVanityMining';

const { deploy, status, tokenAddress } = useTokenDeploy();
const { mine, salt, mining, progress } = useVanityMining({
  chainId: 11155111,
  pattern: 'CAFE',
  mode: 'prefix',
});

async function handleDeploy() {
  await deploy(walletClient, formData, salt.value);
}
</script>

<template>
  <div>
    <p v-if="status === 'confirming'">Confirm in your wallet...</p>
    <p v-else-if="status === 'success'">Deployed at: {{ tokenAddress }}</p>
    <button @click="handleDeploy">Deploy Token</button>
  </div>
</template>

Full demo: github.com/escapehub-ai/token-creator-vue

Tech Stack: SvelteKit 2, Svelte 5 (with runes), TypeScript, @wagmi/core v2, Reown AppKit, Tailwind CSS

Create a store for deployment:

// stores/deploy.ts
import { writable, derived } from 'svelte/store';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

function createDeployStore() {
  const status = writable<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const tokenAddress = writable<string | null>(null);
  const error = writable<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    status.set('confirming');
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      status.set('deploying');

      const result = await deployToken(signer, config, chainConfig, salt);
      tokenAddress.set(result.tokenAddress);
      status.set('success');
      return result;
    } catch (e) {
      error.set(e as Error);
      status.set('error');
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

export const deployStore = createDeployStore();

Usage in a component:

<script lang="ts">
  import { deployStore } from '$lib/stores/deploy';
  import { vanityStore, vanitySalt } from '$lib/stores/vanity';

  const { status, tokenAddress } = deployStore;

  async function handleDeploy() {
    await deployStore.deploy(walletClient, formData, $vanitySalt);
  }
</script>

{#if $status === 'confirming'}
  <p>Confirm in your wallet...</p>
{:else if $status === 'success'}
  <p>Deployed at: {$tokenAddress}</p>
{/if}

<button on:click={handleDeploy}>Deploy Token</button>

Full demo: github.com/escapehub-ai/token-creator-svelte

All three demos follow a similar architecture:

src/
├── components/
│   ├── steps/              # Multi-step wizard
│   │   ├── BasicsStep      # Name, symbol, supply
│   │   ├── FeaturesStep    # Burns, fees, etc.
│   │   ├── FeesStep        # Buy/sell fee configuration
│   │   ├── LimitsStep      # Max wallet, max tx
│   │   ├── SecurityStep    # Anti-bot, blacklist
│   │   ├── AdvancedStep    # Custom options
│   │   ├── VanityStep      # Vanity address mining
│   │   └── ReviewStep      # Final review & deploy
│   └── ui/                 # Reusable components
├── [hooks|composables|stores]/
│   ├── useTokenDeploy      # Deployment logic
│   └── useVanityMining     # Vanity mining logic
├── config/
│   └── web3.ts             # Wallet configuration
└── types.ts                # TypeScript definitions

The SDK supports extensive token customization:

To run any of the demos:

1. Node.js 18+

2. Reown Project ID — Get one free at cloud.reown.com

# Clone any demo
git clone https://github.com/escapehub-ai/token-creator-react
cd token-creator-react

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Add your VITE_REOWN_PROJECT_ID to .env

# Start dev server
npm run dev

• NPM Package: npmjs.com/package/@escapehub/token-creator

• Documentation: app.escapehub.ai/docs

• React Demo: github.com/escapehub-ai/token-creator-react

• Vue Demo: github.com/escapehub-ai/token-creator-vue

• Svelte Demo: github.com/escapehub-ai/token-creator-svelte

The @escapehub/token-creator SDK abstracts away the complexity of ERC20 token deployment while giving you full control over token features. Whether you're building with React, Vue, or Svelte, the integration pattern is straightforward:

1. Install the SDK

2. Create a wrapper (hook/composable/store) for state management

3. Use createDefaultConfig() to build your token config

4. Call deployToken() with an ethers signer

The demos provide production-ready starting points with wallet connections, multi-step wizards, and vanity mining already implemented.

Happy building!

Tags: ethereum, erc20, token, web3, react, vue, svelte, blockchain, smart-contracts, typescript

Creating ERC20 tokens has traditionally required deep Solidity knowledge and complex deployment scripts. The @escapehub/token-creator SDK changes that by providing a simple, framework-agnostic JavaScript library for deploying feature-rich tokens across 40+ EVM chains.

This guide shows you how to integrate the SDK into React, Vue, and Svelte applications—complete with wallet connections, vanity address mining, and multi-step token configuration wizards.

The @escapehub/token-creator SDK is a TypeScript library that handles:

• Token deployment to 40+ EVM-compatible blockchains

• Vanity address mining — generate custom token addresses (e.g., starting with 0xCAFE...)

• Configurable token features — burns, fees, limits, security options

• Chain configuration — built-in factory addresses, RPCs, and explorers for all supported networks

The SDK supports major networks including:

• Ethereum & Sepolia

• Base & Base Sepolia

• BNB Smart Chain & BSC Testnet

• Polygon & Polygon Amoy

• Arbitrum One & Arbitrum Sepolia

• Avalanche, Fantom, Optimism, and 30+ more

Before diving into code, check out these production implementations:

• bnbtoken.ai/explore — BNB Chain token creator

• moonbeamtoken.ai/explore — Moonbeam token creator

• basetokencreator.ai/explore — Base chain token creator

• app.escapehub.ai/token-creator/explore — Multi-chain creator

The SDK is framework-agnostic. Here's the core pattern used across all frameworks:

npm install @escapehub/token-creator ethers

import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

// Get ethers signer from your wallet provider
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

// Build token configuration
const config = createDefaultConfig('My Token', 'MTK', '1000000', ownerAddress, {
  burnEnabled: true,
  feesEnabled: true,
  buyFeeBps: 300,      // 3% buy fee
  sellFeeBps: 300,     // 3% sell fee
  // ... more options
});

// Get chain config (factory address, RPC, explorer, etc.)
const chainConfig = getChainConfig(chainId);

// Deploy the token
const result = await deployToken(signer, config, chainConfig, salt);
console.log('Token deployed:', result.tokenAddress);

Want your token address to start with 0xDEAD or 0xCAFE? The SDK includes async vanity mining:

import {
  generateSaltAsync,
  getImplementation,
  getMinimalProxyInitCodeHash,
  getChainConfig,
} from '@escapehub/token-creator';

const chainConfig = getChainConfig(chainId);
const implementation = await getImplementation(provider, chainConfig.factoryAddress);
const initCodeHash = getMinimalProxyInitCodeHash(implementation);

const result = await generateSaltAsync(chainConfig.factoryAddress, initCodeHash, {
  pattern: 'CAFE',
  mode: 'prefix',          // or 'suffix', 'contains'
  maxAttempts: 10_000_000,
  onProgress: (attempts, hashRate) => {
    console.log(`Mining: ${attempts} attempts at ${hashRate} H/s`);
  },
});

if (result) {
  console.log('Found address:', result.address);
  console.log('Use this salt:', result.salt);
}

Now let's see how to wrap the SDK for each framework. The core logic is identical—only the state management differs.

Tech Stack: React 18, TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a custom hook for deployment:

// hooks/useTokenDeploy.ts
import { useState } from 'react';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
  const [status, setStatus] = useState<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const [tokenAddress, setTokenAddress] = useState<string | null>(null);
  const [error, setError] = useState<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    setStatus('confirming');
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      setStatus('deploying');

      const result = await deployToken(signer, config, chainConfig, salt);
      setTokenAddress(result.tokenAddress);
      setStatus('success');
      return result;
    } catch (e) {
      setError(e as Error);
      setStatus('error');
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

Usage in a component:

function TokenCreator() {
  const { deploy, status, tokenAddress } = useTokenDeploy();

  return (
    <div>
      {status === 'confirming' && <p>Confirm in your wallet...</p>}
      {status === 'deploying' && <p>Deploying token...</p>}
      {status === 'success' && <p>Deployed at: {tokenAddress}</p>}
      <button onClick={() => deploy(walletClient, formData)}>
        Deploy Token
      </button>
    </div>
  );
}

Full demo: github.com/escapehub-ai/token-creator-react

Tech Stack: Vue 3.5 (Composition API), TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a composable for deployment:

// composables/useTokenDeploy.ts
import { ref } from 'vue';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
  const status = ref<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const tokenAddress = ref<string | null>(null);
  const error = ref<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    status.value = 'confirming';
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      status.value = 'deploying';

      const result = await deployToken(signer, config, chainConfig, salt);
      tokenAddress.value = result.tokenAddress;
      status.value = 'success';
      return result;
    } catch (e) {
      error.value = e as Error;
      status.value = 'error';
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

Usage in a component:

<script setup lang="ts">
import { useTokenDeploy } from '@/composables/useTokenDeploy';
import { useVanityMining } from '@/composables/useVanityMining';

const { deploy, status, tokenAddress } = useTokenDeploy();
const { mine, salt, mining, progress } = useVanityMining({
  chainId: 11155111,
  pattern: 'CAFE',
  mode: 'prefix',
});

async function handleDeploy() {
  await deploy(walletClient, formData, salt.value);
}
</script>

<template>
  <div>
    <p v-if="status === 'confirming'">Confirm in your wallet...</p>
    <p v-else-if="status === 'success'">Deployed at: {{ tokenAddress }}</p>
    <button @click="handleDeploy">Deploy Token</button>
  </div>
</template>

Full demo: github.com/escapehub-ai/token-creator-vue

Tech Stack: SvelteKit 2, Svelte 5 (with runes), TypeScript, @wagmi/core v2, Reown AppKit, Tailwind CSS

Create a store for deployment:

// stores/deploy.ts
import { writable, derived } from 'svelte/store';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

function createDeployStore() {
  const status = writable<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
  const tokenAddress = writable<string | null>(null);
  const error = writable<Error | null>(null);

  async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
    status.set('confirming');
    try {
      const provider = new BrowserProvider(walletClient, walletClient.chain.id);
      const signer = await provider.getSigner();

      const config = createDefaultConfig(
        formData.name,
        formData.symbol,
        formData.supply,
        formData.owner,
        formData.options
      );

      const chainConfig = getChainConfig(walletClient.chain.id);
      status.set('deploying');

      const result = await deployToken(signer, config, chainConfig, salt);
      tokenAddress.set(result.tokenAddress);
      status.set('success');
      return result;
    } catch (e) {
      error.set(e as Error);
      status.set('error');
      throw e;
    }
  }

  return { deploy, status, tokenAddress, error };
}

export const deployStore = createDeployStore();

Usage in a component:

<script lang="ts">
  import { deployStore } from '$lib/stores/deploy';
  import { vanityStore, vanitySalt } from '$lib/stores/vanity';

  const { status, tokenAddress } = deployStore;

  async function handleDeploy() {
    await deployStore.deploy(walletClient, formData, $vanitySalt);
  }
</script>

{#if $status === 'confirming'}
  <p>Confirm in your wallet...</p>
{:else if $status === 'success'}
  <p>Deployed at: {$tokenAddress}</p>
{/if}

<button on:click={handleDeploy}>Deploy Token</button>

Full demo: github.com/escapehub-ai/token-creator-svelte

All three demos follow a similar architecture:

src/
├── components/
│   ├── steps/              # Multi-step wizard
│   │   ├── BasicsStep      # Name, symbol, supply
│   │   ├── FeaturesStep    # Burns, fees, etc.
│   │   ├── FeesStep        # Buy/sell fee configuration
│   │   ├── LimitsStep      # Max wallet, max tx
│   │   ├── SecurityStep    # Anti-bot, blacklist
│   │   ├── AdvancedStep    # Custom options
│   │   ├── VanityStep      # Vanity address mining
│   │   └── ReviewStep      # Final review & deploy
│   └── ui/                 # Reusable components
├── [hooks|composables|stores]/
│   ├── useTokenDeploy      # Deployment logic
│   └── useVanityMining     # Vanity mining logic
├── config/
│   └── web3.ts             # Wallet configuration
└── types.ts                # TypeScript definitions

The SDK supports extensive token customization:

To run any of the demos:

1. Node.js 18+

2. Reown Project ID — Get one free at cloud.reown.com

# Clone any demo
git clone https://github.com/escapehub-ai/token-creator-react
cd token-creator-react

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Add your VITE_REOWN_PROJECT_ID to .env

# Start dev server
npm run dev

• NPM Package: npmjs.com/package/@escapehub/token-creator

• Documentation: app.escapehub.ai/docs

• React Demo: github.com/escapehub-ai/token-creator-react

• Vue Demo: github.com/escapehub-ai/token-creator-vue

• Svelte Demo: github.com/escapehub-ai/token-creator-svelte

The @escapehub/token-creator SDK abstracts away the complexity of ERC20 token deployment while giving you full control over token features. Whether you're building with React, Vue, or Svelte, the integration pattern is straightforward:

1. Install the SDK

2. Create a wrapper (hook/composable/store) for state management

3. Use createDefaultConfig() to build your token config

4. Call deployToken() with an ethers signer

The demos provide production-ready starting points with wallet connections, multi-step wizards, and vanity mining already implemented.

Happy building!

Tags: ethereum, erc20, token, web3, react, vue, svelte, blockchain, smart-contracts, typescript