webdevpuneet.com

Related Snippets

63 in Heroes category
17–22 of 60

Hero with Live Slug Generator Demo

Hero with Image and Feature Checklist

Hero with Audience Toggle Switcher

Hero with Live Ticking User Counter

Bento Grid Showcase Hero

Hero with Terminal Boot Sequence

Hero with Live Slug Generator — Free HTML CSS JS Snippet

Hero with Live Slug Generator Demo · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsClipboard APILanding Page

Copy & paste

Source Code

<section class="ldi-hero">
  <span class="ldi-eyebrow">See it work before you sign up</span>
  <h1 class="ldi-h1">Clean URLs,<br>generated as you type</h1>
  <p class="ldi-sub">Type a post title below and watch the SEO-friendly slug build itself in real time — the exact logic that runs on every post you publish.</p>

  <div class="ldi-demo">
    <label class="ldi-label" for="ldiInput">Post title</label>
    <input type="text" id="ldiInput" class="ldi-input" placeholder="e.g. 10 Tips for a Faster Morning Routine" maxlength="90" autocomplete="off">

    <div class="ldi-out">
      <span class="ldi-out-label">webdevpuneet.com/blog/</span>
      <span class="ldi-out-slug" id="ldiSlug">your-post-title</span>
    </div>

    <div class="ldi-meta">
      <span id="ldiCount">0 / 90 characters</span>
      <button type="button" class="ldi-copy" id="ldiCopy">Copy slug</button>
    </div>
  </div>

  <a href="#" class="ldi-cta">Start writing for free</a>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real, deterministic slugify() function — no fake or scripted typing animation
Correctly strips accented characters via Unicode NFD normalization before filtering
Live character counter tied to the same maxlength as the input field
Copy-to-clipboard button with async Clipboard API and a safe fallback path
No debounce needed — the transform is cheap enough to run on every keystroke
Meaningful placeholder output shown when the input is empty
Dark, code-editor-styled demo panel that reads as "real product," not marketing chrome
Pattern generalizes to any live text-transform demo (password strength, Markdown, etc.)
Export as HTML file, React JSX, or React + Tailwind CSS
Mobile (375px), Tablet (768px), Desktop device preview buttons

About this UI Snippet

Hero with Live Slug Generator Demo — A Hero You Can Actually Use

Screenshot of the Hero with Live Slug Generator Demo snippet rendered live

Most heroes ask a visitor to take the product's usefulness on faith — a headline claims speed or simplicity, and the visitor has to sign up to find out if that's true. This hero instead embeds a small, fully working piece of the product directly in the fold: type a blog post title, and a real slugify function runs on every keystroke to build the exact URL slug that would be saved. There is no fake typing animation and no canned example rotating on a timer — the output is a genuine, deterministic transform of whatever the visitor types.

The slugify function, explained

slugify(text) runs six real transformation steps in sequence: normalize('NFD') decomposes accented characters into a base letter plus a combining diacritical mark, and the following replace(/[\u0300-\u036f]/g, '') strips those diacritical marks — so "Café" becomes "cafe" rather than being dropped or mangled. toLowerCase() and trim() normalize case and outer whitespace. replace(/[^a-z0-9\s-]/g, '') removes anything that isn't a lowercase letter, digit, whitespace, or hyphen — punctuation, emoji, and symbols all disappear. replace(/\s+/g, '-') turns any run of whitespace into a single hyphen, and replace(/-+/g, '-') collapses any resulting run of multiple hyphens (which happens when the title itself contained a hyphen next to a space) into one. A final replace(/^-|-$/g, '') trims a leading or trailing hyphen that can appear if the title started or ended with punctuation.

Why this exact sequence, not a shortcut regex

A single regex like replace(/[^a-z0-9]+/g, '-') looks tempting but silently breaks on accented input — "Café" would produce "caf-" (the é gets stripped as a non-ASCII character, leaving a dangling hyphen) instead of the correct "cafe". Running normalize('NFD') and stripping combining marks *before* the character-class filter is what makes accented titles produce clean, readable slugs instead of a mangled one.

Live output, not deferred to submit

The input event fires update() on every keystroke, which recomputes the slug and rewrites both the character counter and the slug display immediately. There is no debounce — slugify() is cheap enough (a handful of regex passes over a short string) to run on every keystroke without any perceptible lag, so the visitor sees the transform happen character-by-character as they type, which is the entire point of the demo.

The copy-to-clipboard button

Clicking "Copy slug" calls navigator.clipboard.writeText() when available, with a fallback that still shows the "Copied!" confirmation state even in environments where the Clipboard API is unavailable or blocked (some sandboxed iframes, for instance) — the button never silently does nothing. The confirmation state reverts after 1.4 seconds via setTimeout.

Why an empty input still shows a value

When raw is empty, slugify('') returns an empty string, and rather than showing a blank output box (which looks broken), update() falls back to displaying the placeholder text your-post-title so the demo always shows *something* meaningful, guiding the visitor toward typing.

Adapting this pattern to a different product

The structure — an input, a live-updating output panel styled to look like a real result, a character counter, and a copy action — generalizes well beyond slugs: a password-strength meter, a Markdown-to-HTML live preview, a regex tester, or a currency formatter could all sit in the same hero shape. Swap slugify() for whatever transform your product actually performs, and the rest of the layout, event wiring, and copy-button logic carries over unchanged.

Step by step

How to Use

  1. 1
    Type into the inputThe slug output beneath updates on every keystroke using a real slugify function — no canned demo text.
  2. 2
    Try accented or punctuated inputType something like "Café: A Cozy Guide!" to see diacritics stripped and punctuation removed correctly.
  3. 3
    Click "Copy slug"Copies the current generated slug to the clipboard and shows a temporary confirmation state.
  4. 4
    Adapt slugify() to your productReplace the transform function in the JS panel with your own logic (password strength, Markdown preview, etc.) — the input/output wiring stays the same.
  5. 5
    Change the max lengthEdit the MAX_LEN constant and the input's maxlength attribute together.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

CMS, blogging, and publishing tool heroes
Prove the exact URL-generation behavior a writer will experience, instead of describing it in a bullet point.
Developer tool and API product heroes
Swap slugify() for a real transform your API performs — formatting, validation, parsing — for an instant, credible demo.
SEO and content tooling landing pages
Directly demonstrates a core SEO concern (clean URLs) as the very first interaction on the page.
Learn Unicode-aware string normalization
Study why normalize('NFD') plus a combining-mark strip handles accented input correctly where a naive regex would not.
Interactive product-led landing pages
Fits the "show, don't tell" trend in SaaS marketing — letting a visitor experience a slice of the product before signing up.
Pair with a feature checklist hero
Combine with the Hero with Image and Feature Checklist directly below for both a working demo and a feature summary.

Got questions?

Frequently Asked Questions

It is a real, deterministic JavaScript function. Every keystroke fires the input event, which calls slugify() on the current input value and writes the result to the output element — there is no pre-recorded sequence or timer-driven fake typing.

Unicode NFD (Normalization Form Decomposed) splits an accented character like \u00e9 into a base letter e plus a separate combining accent mark. Stripping combining marks (the \u0300-\u036f range) after this decomposition turns "Café" into "cafe" correctly. Filtering with a plain [^a-z0-9] regex on the original, non-decomposed string would instead delete the accented character entirely, leaving "caf" with a dangling hyphen.

slugify() only runs a handful of regex passes over a short string (a blog title is rarely more than 90 characters), which completes in a fraction of a millisecond — far below any perceptible lag threshold. Debouncing would only add a false delay to a demo whose entire purpose is showing the transform happen live.

The copy handler checks for navigator.clipboard.writeText before calling it. If it is unavailable or the promise rejects (common in some sandboxed iframe contexts), the code still calls the same finish() function that shows the "Copied!" confirmation state, so the button never appears to silently fail even where the actual clipboard write could not occur.

Replace the slugify() function body with whatever transform your product performs, and update the output panel labels and placeholder text to match. The input listener, character counter, and copy-to-clipboard wiring do not need to change — they operate on whatever string the transform function returns.

An empty output box next to an empty input looks like the demo is broken rather than simply unused. update() checks if the computed slug has zero length and falls back to a placeholder string, so the panel always shows a plausible example, nudging the visitor to start typing.