Tools SDK

A scalable SDK to build, manage, and deploy 100+ interactive web tools
as self-contained web components. Zero dependencies. Framework agnostic. CDN-optimized.

🚀 CDN-Optimized 📦 Self-Contained ⚡ 5-30KB per tool 🎨 Framework Agnostic 🔒 Shadow DOM ♿ Accessible

Why Tools SDK?

🎯 Zero Dependencies

Built with vanilla JavaScript and Web Components. No framework lock-in, no external dependencies to manage.

⚡ Lightning Fast

Each tool is individually optimized and bundled. Load only what you need, when you need it.

🎨 Theme Adaptive

Tools automatically adapt to your site's theme using CSS custom properties. Light, dark, or custom - it just works.

🔧 Easy Integration

Drop in a single script tag and use the web component. Works with React, Vue, Svelte, Astro, or plain HTML.

📱 Fully Responsive

Every tool is mobile-first and responsive. Desktop sidebar, mobile touch, and everything in between.

🔒 Encapsulated

Shadow DOM ensures complete style isolation. No CSS conflicts, no global namespace pollution.

Available Tools

📝 Font Generator

Transform your text into 30+ stylish Unicode fonts. Choose from serif, sans-serif, script, decorative, and special effect styles.

27.9 KB (7.1 KB gzipped) 30+ font styles 6 categories

➕ More Tools Coming Soon

We're constantly adding new tools to the collection. Each tool is independently deployable and optimized for performance.

🎨 Try It Live: Font Generator

🌐 CDN Usage

All tools are available via CDN. Simply include the script tag and use the web component in your HTML:

<!-- Add to your HTML -->
<smptool-font-generator></smptool-font-generator>
<script src="https://tools-sdk.vercel.app/dist/font-generator.js"></script>

Note: All web components use the smptool- prefix to ensure global namespace safety.

📦 Getting Started

Start building your own tools:

# Install dependencies
pnpm install

# Create a new tool
node scripts/create-tool.js my-tool

# Start development
cd tools/my-tool && pnpm dev

# Build all tools
node scripts/build-all.js