embed.

Drop nap tools into any HTML page. Runs in your visitor's browser. No API key. No rate limit. No uploads.

How it works

One script tag registers a set of Web Components. Then you use them like normal HTML. Each component runs the tool's logic entirely on the visitor's device — same as our site — and encapsulates its styles in Shadow DOM so it never fights with your page CSS.

<script src="https://tools.napdesigns.com/embed.js" defer></script>

no api keyno rate limitno uploadsshadow DOMSRI verified

Available components

<nap-qr> — QR code

<nap-qr text="https://your.site/" size="256" fg="#000000" bg="#ffffff" level="M"></nap-qr>

Attribute	Default	Description
text	—	Content to encode (URL, WiFi, vCard, anything)
size	256	Pixel size (square)
fg	#000000	Foreground color (hex)
bg	#ffffff	Background color (hex)
level	M	Error correction: L / M / Q / H
margin	4	Quiet-zone modules
hide-attrib	false	Hide the "powered by @nap.codes" line

<nap-hash> — Cryptographic hash

<nap-hash text="hello world" algo="SHA-256" encoding="hex"></nap-hash>

Attribute	Default	Description
text	""	String to hash
algo	SHA-256	SHA-1 · SHA-256 · SHA-384 · SHA-512
encoding	hex	hex · base64

<nap-random> — CSPRNG string

<nap-random length="32" charset="alphanumeric" count="3" prefix="sk_" suffix=""></nap-random>

Attribute	Default	Description
length	32	Characters per string, 1-1024
charset	alphanumeric	alphanumeric · alpha · digits · hex · base64 · base64url · custom
custom	""	When charset="custom", use these characters
count	1	Number of strings, 1-100
prefix	""	Literal prefix (e.g. "sk_live_")
suffix	""	Literal suffix

<nap-base> — Number base converter

<nap-base value="255" from="10"></nap-base>

Attribute	Default	Description
value	""	Input number as string
from	10	Input base: 2 · 8 · 10 · 16 (or any 2-36)

<nap-lorem> — Placeholder text

<nap-lorem count="2" unit="paragraphs" start-lorem="true"></nap-lorem>

Attribute	Default	Description
count	3	Number of paragraphs / sentences / words
unit	paragraphs	paragraphs · sentences · words
start-lorem	true	Start first output with "Lorem ipsum…"

Live examples

WiFi QR for your office / cafe

Password / token generator on your signup page

SHA-256 hash of your build for integrity display

Events + JS access

Every component fires nap-ready when rendered:

const el = document.querySelector('nap-qr');
el.addEventListener('nap-ready', e => {
  console.log('QR modules:', e.detail.count);
  const dataUrl = el.toDataURL('image/png');
});

Random component exposes el.values (array). Hash exposes el.value (string).

Theming

Add theme="dark" to any component to switch text/background:

<nap-hash text="hello" algo="SHA-256" theme="dark"></nap-hash>

Attribution

By default a small "powered by @nap.codes" line appears under each component. Add hide-attrib to remove it — you are free to do so. If your project can spare the space we do appreciate the credit.

Framework usage

Web Components work natively in React, Vue, Svelte, Angular, and vanilla HTML. In React, use lowercase kebab-case attributes as strings:

<nap-qr text="https://your.site/" size="256" />

What we do not provide

A REST API — everything runs in the browser, there is no server endpoint to call
An API key or rate-limit dashboard — same reason
Server-side rendering — the components produce output in the browser only. Use a headless browser (Puppeteer / Playwright) if you need pre-rendered output.

Licensing

Free for any use, including commercial. See terms.

Source

github.com/pratham19980315/napdesigns-tools — embed.js at the repo root.