DEV Community

charlie-morrison
charlie-morrison

Posted on

Building a LinkedIn Headline Generator in Pure HTML/JS (No API Needed)

LinkedIn headlines are one of those things everyone knows matter but nobody wants to spend time on. So I built a tool that generates 30 variations in seconds — and it doesn't need any API calls.

Why No API?

The obvious approach would be to hit GPT/Claude and generate headlines. But:

  1. Cost — API calls add up fast, especially for a free tool
  2. Latency — users don't want to wait 3-5 seconds
  3. Reliability — API goes down = tool goes down
  4. Privacy — no reason to send job title to a third party

Instead, I used template-based generation with enough variation to produce genuinely useful results.

The Approach

The generator uses 6 headline templates across 5 tone options (Professional, Creative, Bold, Minimal, Results-Focused), producing 30 unique variations per input.

Each template is a function that takes the user role and specialization as input. The templates are designed around patterns that perform well on LinkedIn:

  • Professional: Title | Specialty | Value prop
  • Creative: Hook | Role | Personality
  • Bold: Numbers/claims | Role
  • Minimal: Clean, two-part headlines
  • Results-Focused: Outcome | Method | Role

Character Count Matters

LinkedIn headlines have a 220-character limit. Go over, and your headline gets truncated in search results. The tool shows character count for each generated headline with a warning when you are close to the limit.

Copy-to-Clipboard UX

Small detail that matters: each headline has a copy button that gives visual feedback. No one wants to manually select text on mobile.

Try It

charliemorrison.dev/linkedin-headline

Enter your role (e.g., "Software Engineer") and specialization (e.g., "React and TypeScript"), pick a tone, and get 6 headlines instantly.

Takeaway

Not everything needs an AI API. For structured generation with clear patterns, templates work great and they are instant, free, and private. Save the API calls for tasks that genuinely need language understanding.


More free tools: Resume ATS Score Checker | AI Developer Prompts (GitHub)

Top comments (0)