# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/tools/hmac-generator. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
[tools](/tools)/[encoding](/tools/category/encoding)

# HMAC generator

Sign a message with a shared secret and read the HMAC in hex or base64, with the Web Crypto code to verify it on the other side.

Message1

The quick brown fox jumps over the lazy dog

Secret

Algorithm

2561384512

Output

HexBase64

HMAC SHA-256

Signing happens in this tab and the secret is never sent anywhere. It is still a secret: use a throwaway value here if the real one belongs to production.

verify.tsts

// Node, and anywhere else with Web Crypto
const key = await crypto.subtle.importKey(
  "raw",
  new TextEncoder().encode(secret),
  { name: "HMAC", hash: "SHA-256" },
  false,
  ["sign"],
);

const signature = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(message));

## Questions

Why does my webhook signature not match?+

Almost always because the message is not byte for byte what was signed. Sign the raw request body, before any JSON parsing and re-serialising, and check whether the sender prefixes the digest with something such as sha256=.

Hex or base64?+

Whichever the other side expects, they carry the same bytes. Stripe and GitHub use hex; several others use base64.

Is it safe to paste my secret here?+

The signing happens in this tab and nothing is sent anywhere, but a production secret should not be pasted into any web page as a habit. Use a throwaway value to work out the shape, then run the code on the last line.

How do I compare two signatures safely?+

With a constant-time comparison: crypto.timingSafeEqual in Node, hmac.compare\_digest in Python. A plain === returns as soon as two bytes differ, and that difference in timing is enough to recover a signature byte by byte.

## Related tools

[Hash generatorHash any text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, in hex or base64, computed in your browser.](/tools/hash-generator)[JWT decoderPaste a JSON Web Token and read its header, payload and expiry. Decoding only, in your browser, with no secret asked for and nothing sent anywhere.](/tools/jwt-decoder)[Base64 encoder and decoderEncode text to base64 or decode it back, with UTF-8 handled correctly and a URL-safe variant for tokens and query strings.](/tools/base64)

Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · 

## The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

[Browse the blocksBrowse the blocks](/blocks)

No signup for the tools. MIT for free blocks, commercial licence for Pro.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.