Slugify: Turn Any Title into a Clean URL
Every blog post, documentation page, and product listing needs a URL slug. And every time, the same question: how do you turn "How I Built a $10K/month SaaS (in 3 Months)" into something that works in a URL?
The answer is how-i-built-a-10k-month-saas-in-3-months. Lowercase, no special characters, words joined by hyphens. That's what this tool does — paste any text, get a clean, URL-safe slug.
Runs in your browser. Nothing leaves your machine.
What's actually happening
Slugification follows a specific sequence:
Normalize Unicode — the text is run through
normalize("NFD")which decomposes accented characters into their base letter + combining mark. Then the combining marks are stripped. Socafébecomescafe,überbecomesuber,résumébecomesresume.Lowercase — everything gets lowercased (if that option is on, which it is by default).
Strip non-alphanumeric — anything that isn't a letter, number, space, hyphen, or underscore gets removed. Parentheses, dollar signs, ampersands — all gone.
Collapse separators — multiple consecutive spaces or hyphens become a single separator. "hello---world" becomes "hello-world".
Trim — leading and trailing separators are removed.
The result is a string that's safe to use in any URL, filename, or identifier context.
Using it
Paste or type your text. The slug generates instantly as you type. Choose your separator (dash or underscore) and toggle lowercase and accent stripping. Hit Copy to grab the result.
When you'd actually reach for this
- You're writing a blog post and need a permalink from the title
- You're building a CMS and need to auto-generate URL slugs for content
- You're creating SEO-friendly product URLs from product names
- You're generating safe filenames from user-submitted titles
- You're building an API and need human-readable resource identifiers instead of UUIDs
Why not just use encodeURIComponent()?
Because encodeURIComponent("How I Built It!") gives you How%20I%20Built%20It! — technically valid in a URL but terrible for SEO, readability, and sharing. Nobody wants to share a link full of %20 and %26.
Slugs are designed for humans. They're readable, memorable, and clean. They also perform better in search engines — Google explicitly recommends using hyphens in URLs to separate words.
encodeURIComponent() makes URLs safe. Slugification makes URLs good.
Dashes vs underscores
Google treats hyphens as word separators but treats underscores as word joiners. So web-development is two words to Google, but web_development is one. For SEO, use hyphens.
Underscores are common in other contexts — Python package names, file systems, database identifiers. The tool lets you pick either.
If you're building URLs that humans or search engines will see, use dashes. For everything else, pick whatever matches your project's convention.
Edge cases and gotchas
Accented characters — by default, ñ becomes n, ü becomes u, ø becomes o. This is correct for URL slugs but might lose meaning in some languages. If you're building a multilingual site and want to preserve non-Latin characters, you'll need a more sophisticated approach (like punycode for internationalized domain names).
CJK characters — Chinese, Japanese, and Korean characters are stripped entirely. These scripts don't have a clean slug representation in ASCII. If your content is in CJK, consider using romanized versions or numeric IDs.
Emoji — removed completely. 🚀 Launch Day becomes launch-day.
HTML entities — & stays as amp (the & and ; are stripped). If your input has HTML entities, decode them first.
Consecutive special characters — hello!!!world becomes helloworld (no separator added). The tool strips characters, it doesn't replace them with separators. If you want hello-world, add a space between them before slugifying.
Very long titles — the tool doesn't truncate. A 200-word title produces a 200-word slug, which is terrible for URLs. Keep slugs under 5-8 words. Trim the output manually or truncate in your code.
Troubleshooting
My slug has double dashes — your input probably had multiple spaces, punctuation between words, or a combination. The tool collapses these into single separators, but check if your input has hidden characters (like non-breaking spaces from copy-pasting from Word).
Accented characters are still in my slug — the "Strip accents" option might be toggled off. Turn it on.
The slug is empty — your input was entirely special characters or emoji with no alphanumeric content.
My slug doesn't match what my CMS generates — different frameworks have slightly different slugification rules. WordPress strips HTML tags first. Django's slugify uses a different Unicode normalization. This tool follows the most common convention, but your framework might have quirks.
The slug has trailing or leading dashes — this shouldn't happen (the tool trims them), but if it does, check for invisible whitespace characters in your input.
What to do with it
Paste the slug into your CMS, router, or wherever you need it. For programmatic slugification in code:
- JavaScript:
github.com/simov/slugifyor roll your own with the logic above - Python:
django.utils.text.slugify() - Ruby:
ActiveSupport::Inflector.parameterize
For one-off needs, this tool is faster than importing a library. For production, generate slugs in your application code and store them alongside the content.