Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Tool & Calculator Snippets — Free HTML CSS JS Mini Apps

67 tools and calculators · Finance & Health Calculators, Converters, Generators, Timers, Text & Color Utilities · Exports to React, Vue, Angular & Tailwind

What's included

Features

Finance calculators: mortgage, loan EMI, compound interest, tax brackets, tips, and bill splits
Converters for units, currency, time zones, and Roman numerals
Secure generators using the Web Crypto API for passwords, tokens, and UUIDs
QR code, lorem ipsum, avatar, box shadow, theme palette, and cron expression generators
Text case, statistics, palindrome/anagram, Morse code, citation, and hash utilities
Stopwatch, lap timer, Pomodoro, workout interval timer, and metronome
Colour contrast checker, colour mixer, and colour palette extractor
Everything runs client-side — no server, no API key, no data leaves the browser

About this category

Tool & Calculator Snippets — Free, Working Mini Apps You Can Embed Anywhere

Some snippets are not components at all; they are complete little tools. A mortgage calculator, a unit converter, a password generator, a Pomodoro timer, a colour contrast checker. Each one does a single job from start to finish, with its own inputs, logic, and output, and can be dropped into a page as a working feature.

Every tool is plain HTML, CSS, and vanilla JavaScript that runs entirely in the browser. Nothing is sent to a server.

Finance calculators. Mortgage Calculator, Loan EMI Calculator, Compound Interest Calculator, Tax Bracket Estimator, Tip Calculator, Expense Split Calculator, Split Payment Calculator, Percentage Change Calculator, Unit Price / Best Value Calculator, and Insurance Quote Calculator.

Everyday calculators and converters. Calculator, BMI Calculator, GPA Calculator, Days Between Dates Calculator, Unit Converter, Currency Converter Widget, Timezone Converter, Timezone Meeting Overlap Finder, and Roman Numeral Converter.

Generators. Password Generator (with an entropy meter variant), Secure Token Generator, UUID v4 Generator, QR Code Generator, Lorem Ipsum Generator, Avatar Generator, Box Shadow Generator, Theme Palette Generator, Cron Expression Builder, and Return Label Generator.

Text utilities. Text Case Converter, Text Statistics Analyzer, Palindrome & Anagram Checker, Morse Code Translator & Player, Citation Style Formatter, Text Hash Generator, and JSON Diff Viewer.

Timers and creative tools. Stopwatches, Pomodoro and workout interval timers, metronomes, a drawing canvas, image filter editor, colour mixer, colour palette extractor, colour contrast checker, and bezier curve editor.

Real-world uses

Common Use Cases

Finance, real estate, and insurance sites
Drop a mortgage, loan, compound interest, or quote calculator onto a landing page as an interactive lead magnet that answers a visitor's first question on the spot.
Developer and content utilities
Password, token, and UUID generators, hash tools, JSON diff, cron builder, and text utilities for internal dashboards, docs sites, and developer tools.
Design and colour tooling
Contrast checking against WCAG thresholds, palette generation and extraction, box shadow generation, and a bezier curve editor for design-system work.
Productivity and focus features
Pomodoro, stopwatch, workout interval, and metronome timers for study, fitness, music practice, and productivity apps.
Learning to build a complete feature
Each tool is a small end-to-end app — input handling, validation, calculation, and formatted output — which makes it a good model for structuring your own interactive features.

Got questions?

Frequently Asked Questions

No. Every tool runs entirely in the browser with vanilla JavaScript. Inputs never leave the page, which also means the tools work offline once the page has loaded.

The generators use crypto.getRandomValues() from the Web Crypto API rather than Math.random(), which gives cryptographically strong randomness suitable for passwords and tokens.

They implement the standard formulas — amortised loan payments, compound interest, bracketed tax — and are accurate for estimates. For anything with legal or financial consequences, check the result against an official source and local rules.

Yes. Export the snippet to React, Vue, or Angular, or use the Embed option to place a live preview in WordPress or any other site with an iframe.