I Built 43 Browser Tools That Never Upload Your Files — Including a Video Editor

dragkitapp — Sun, 01 Mar 2026 10:57:14 +0000

The Problem

I needed to compress a PDF. Google gave me 10 "free" options. Every single one wanted me to upload my file to their server.

I'm a developer. I know browsers can do this locally. So why is everyone building server-dependent tools?

The Solution: DragKit

I built DragKit — 43 tools that run 100% in the browser. No uploads, no accounts, no servers processing your files.

Complete Toolkit (43 tools)

Category	Count	Highlights
PDF Suite	13	Compress, merge, split, edit, sign, watermark, convert
Image Tools	9	Resize, crop, remove background, meme generator, favicon
Dev Tools	10	JSON/XML format, Base64, color picker, QR gen, MD preview
Calculators	4	Mortgage (French/German), BMI, percentage, tax
Video & Media	2	Full video editor (FFmpeg WASM), photo filters
Text Utilities	5	OCR, word counter, lorem ipsum, hex→rgb, AI prep

Tech Stack (intentionally simple)

Frontend: Vanilla HTML + CSS + JS
Hosting: Cloudflare Pages (free tier)
PDF: pdf-lib, pdf.js
Video: FFmpeg compiled to WASM (30MB, served via CDN)
Images: Canvas API
Languages: 10 (EN, ES, DE, FR, PT, IT, NL, JA, KO, ZH)
Total pages: 530
Monthly cost: $0

No React. No Next.js. No build step. Just files.

PDF Processing: pdf-lib

The pdf-lib library is incredible for client-side PDF manipulation:

import { PDFDocument } from 'pdf-lib';

async function compressPDF(file) {
    const bytes = await file.arrayBuffer();
    const pdf = await PDFDocument.load(bytes);

    pdf.setTitle('');
    pdf.setAuthor('');
    pdf.setSubject('');

    const compressed = await pdf.save({
        useObjectStreams: true,
        addDefaultPage: false,
    });

    return new Blob([compressed], { type: 'application/pdf' });
}

Everything happens in the browser's memory. The file never leaves the user's device.

Video Editor: FFmpeg in the Browser

The hardest tool to build. FFmpeg compiled to WASM lets you do real video editing in a browser tab:

import { FFmpeg } from './lib/ffmpeg/index.js';

const ffmpeg = new FFmpeg();
await ffmpeg.load({
    coreURL: './lib/core/ffmpeg-core.js',
    wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.wasm',
});

// Multi-track editing with transitions
await ffmpeg.exec([
    '-i', 'clip1.mp4',
    '-i', 'clip2.mp4',
    '-filter_complex', '[0:v][1:v]xfade=transition=fade:duration=1',
    '-c:v', 'libx264',
    'output.mp4'
]);

The WASM binary is 30MB — exceeds Cloudflare's 25MB file limit, so I serve it from unpkg CDN.

Features: 3 video tracks + 2 audio tracks, 7 transition types (crossfade, dissolve, wipe left/right, slide up/down, circle reveal), speed control (25%-400%), export to MP4 (H.264) or WebM (VP9).

Mortgage Calculator: French Amortization

function calcFrench(principal, annualRate, termMonths) {
    const r = annualRate / 100 / 12;
    const payment = principal * (r * Math.pow(1 + r, termMonths)) 
                  / (Math.pow(1 + r, termMonths) - 1);

    let balance = principal;
    const schedule = [];

    for (let m = 1; m <= termMonths; m++) {
        const interest = balance * r;
        const principalPart = payment - interest;
        balance -= principalPart;
        schedule.push({ month: m, payment, interest, principal: principalPart, balance });
    }

    return { payment, schedule };
}

No "Calculate" button — results update in real-time as you type.

Multi-Language SEO Strategy

Each tool has a translated URL slug:

/en/compress-pdf-free/
/es/comprimir-pdf-gratis/
/de/pdf-komprimieren-kostenlos/
/fr/compresser-pdf-gratuit/
/pt/comprimir-pdf-gratis/

Plus hreflang tags, translated meta descriptions, Schema.org markup, FAQ content, and 8 interactive tutorials for the most popular tools.

I wrote Node.js scripts to generate all 530 pages from templates.

Key Decisions & Trade-offs

Decision	Pros	Cons
No framework	Fast load, no build step	Painful i18n
Static generation	$0 hosting, CDN cached	Manual rebuild
Vanilla JS	Tiny bundle, no deps	More code
10 languages	10x search surface	10x maintenance
FFmpeg WASM	Real video editing	30MB download

What I Learned

Cloudflare Pages is incredibly generous — free hosting, unlimited bandwidth
Financial tools have 5-10x higher ad CPM — mortgage calculator >> PDF tool
Multi-language SEO compounds — each language is its own market
Privacy sells — people genuinely appreciate tools that don't upload files
WASM has real limits — 30MB for FFmpeg, cold start time matters
Tutorials boost engagement — interactive onboarding increased time-on-site

Try It

🔗 dragkit.app — 43 tools, 530 pages, 10 languages, $0/month

DEV Community: dragkitapp