DEV Community

Cover image for I Built 43 Browser Tools That Never Upload Your Files — Including a Video Editor
dragkitapp
dragkitapp

Posted on

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

#webdev #javascript #privacy #showdev

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
Enter fullscreen mode Exit fullscreen mode

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' });
}
Enter fullscreen mode Exit fullscreen mode

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'
]);
Enter fullscreen mode Exit fullscreen mode

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 };
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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

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

Try It

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

Top comments (0)