Hash Generator

A no-code tool for Framer designers. Type your password, generate a SHA-256 hash, copy it in one click, and paste it into the PasswordGate component. Delete the page before publishing — your real password never ships in your site's code.

Hash Generator

Turn your password into a secure code to paste into the PasswordGate component. Your real password is never stored anywhere.

Delete or unpublish this page before going live. This tool is only for setup — it should never be visible to your visitors.

Your password

The problem it solves

When you store a password directly in a Framer code component, anyone can open Chrome DevTools, go to the Sources tab, and read it in plain text in under thirty seconds. For most portfolio use cases this is an acceptable tradeoff — but if you're protecting genuinely sensitive client work or NDA material, it's worth closing that gap.

The standard fix is password hashing: run your password through a one-way function so only a scrambled version lives in the code. The problem is that generating a hash normally requires pasting a command into the browser console — something completely out of reach for designers who don't write code.

HashGenerator removes that barrier entirely. It's a Framer component you drop onto a private draft page. Type your password, click one button, copy the hash, paste it into PasswordGate, then delete the generator page before going live. The whole setup takes under two minutes with no console, no terminal, and no coding knowledge.

Features

Type your password and generate its SHA-256 hash entirely inside Framer — no browser console needed
One-click copy with visual confirmation
Show/hide toggle on the password input
Built-in step-by-step instructions shown immediately after hash generation — exactly what to do next, in plain language
Warning banner reminding you to delete or unpublish the page before going live
Resets the hash display if you edit the password after generating, preventing accidental use of a stale hash
All colours and fonts match the PasswordGate component's property controls for visual consistency

Use cases

Anyone using the PasswordGate component who wants the added security of hashed passwords without writing any code
Framer creators building and distributing their own password-protected components who want to offer their users a safe, no-code setup flow
Designers sharing components with clients or teammates who need a foolproof way to set their own password securely

How to use

In Framer, go to Assets → Code → New File, name it HashGenerator, paste the component code, and save.
Create a new page in Framer — name it something like _setup or hash-tool. Make sure it is not linked from your site navigation.
Drag the HashGenerator component onto that page.
In the canvas preview or published draft, type your chosen password into the input field and click Generate hash.
Click Copy hash — the 64-character hash is now in your clipboard.
Go to your PasswordGate component. In the right-hand properties panel, paste the hash into the Password field and enable the Hash password → SHA-256 toggle.
Return to your setup page and delete it or set it to unpublished before publishing your site.

Notes

This component uses the browser's built-in Web Crypto API (crypto.subtle) — no third-party libraries, no external requests, nothing leaves your browser.
The component is intentionally not useful to your visitors. It is purely a designer setup tool and should never be part of your published site.
The hash is one-way — there is no way to reverse it back to your original password. Keep a note of your original password somewhere safe.
HashGenerator pairs exclusively with the PasswordGate component (listed separately). The SHA-256 toggle in PasswordGate must be enabled for hashed passwords to work correctly.