<100 subscribers


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 ethersimport { 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 definitionsThe SDK supports extensive token customization:
Feature | Description |
|---|---|
Burn | Allow token holders to burn their tokens |
Fees | Configure buy/sell fees (in basis points) |
Limits | Max wallet balance, max transaction size |
Security | Anti-bot protection, blacklist functionality |
Ownership | Renounce or transfer ownership |
To run any of the demos:
Node.js 18+
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 devNPM Package: npmjs.com/package/@escapehub/token-creator
Documentation: app.escapehub.ai/docs
React Demo: github.com/escapehub-ai/token-creator-react
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:
Install the SDK
Create a wrapper (hook/composable/store) for state management
Use createDefaultConfig() to build your token config
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 ethersimport { 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 definitionsThe SDK supports extensive token customization:
Feature | Description |
|---|---|
Burn | Allow token holders to burn their tokens |
Fees | Configure buy/sell fees (in basis points) |
Limits | Max wallet balance, max transaction size |
Security | Anti-bot protection, blacklist functionality |
Ownership | Renounce or transfer ownership |
To run any of the demos:
Node.js 18+
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 devNPM Package: npmjs.com/package/@escapehub/token-creator
Documentation: app.escapehub.ai/docs
React Demo: github.com/escapehub-ai/token-creator-react
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:
Install the SDK
Create a wrapper (hook/composable/store) for state management
Use createDefaultConfig() to build your token config
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
Share Dialog
Share Dialog
EscapeHub
EscapeHub
No comments yet