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.
What is @escapehub/token-creator?
The @escapehub/token-creator SDK is a TypeScript library that handles:
Token deployment to 40+ EVM-compatible blockchainsVanity address mining — generate custom token addresses (e.g., starting with 0xCAFE…)Configurable token features — burns, fees, limits, security optionsChain configuration — built-in factory addresses, RPCs, and explorers for all supported networks
Supported Chains
The SDK supports major networks including:
Ethereum & SepoliaBase & Base SepoliaBNB Smart Chain & BSC TestnetPolygon & Polygon AmoyArbitrum One & Arbitrum SepoliaAvalanche, Fantom, Optimism, and 30+ more
Live Examples
Before diving into code, check out these production implementations:
bnbtoken.ai/explore — BNB Chain token creatormoonbeamtoken.ai/explore — Moonbeam token creatorbasetokencreator.ai/explore — Base chain token creatorapp.escapehub.ai/token-creator/explore — Multi-chain creator
Core SDK Usage
The SDK is framework-agnostic. Here’s the core pattern used across all frameworks:
Installation
npm install @escapehub/token-creator ethers
Token Deployment
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);
Vanity Address Mining
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);
}
Framework Integrations
Now let’s see how to wrap the SDK for each framework. The core logic is identical — only the state management differs.
React Integration
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
Vue Integration
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
Svelte Integration
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
Project Structure
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
Token Features
The SDK supports extensive token customization:
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
Prerequisites
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 dev
Resources
NPM Package: npmjs.com/package/@escapehub/token-creatorDocumentation: app.escapehub.ai/docsReact Demo: github.com/escapehub-ai/token-creator-reactVue Demo: github.com/escapehub-ai/token-creator-vueSvelte Demo: github.com/escapehub-ai/token-creator-svelte
Conclusion
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 SDKCreate a wrapper (hook/composable/store) for state managementUse createDefaultConfig() to build your token configCall 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
Build Your Own Token Creator: Integrating @escapehub/token-creator SDK with React, Vue, and Svelte was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.