Frontend Hero

What it does

Frontend Hero is a 10-in-1 extension for frontend devs. Use it to screenshot any element, watch console messages in floating bubbles, extract & edit Tailwind classes live, convert CSS to Tailwind, inspect styles, pick colors, detect fonts & more.

11 essential dev tools in one browser extension. CSS inspector, color picker, font detector, Tailwind converter & more. One-time purchase, no subscription.

Inspect CSS, scan Tailwind classes, pick colors, identify fonts, measure spacing, capture screenshots — all from one toolbar icon. Make any text on the page editable to preview different content without changing the source code. Perfect for testing headlines, copy changes, and content variations. Capture any element as an image, just click and save. Perfect for bug reports and documentation. See and edit all the styles of an element including media queries and pseudo-classes like :hover. See console messages without opening DevTools. With optional filters to only show messages you want to see. Get the Tailwind classes of any element ordered by category. Disable classes and edit them on the…from frontend-hero.com

• 
  Frontend AI2024 · ▲1,005

  Your UI generated from prompts or images

• 
  BrandBird Chrome Extension2022 · brandbird.app · ▲507

  A Chrome extension for beautiful screenshots

• 
  Frontend Mentor2020 · frontendmentor.io · ▲262

  Improve your coding skills by building real projects

• 
  A Chrome extension that tracks front-end JavaScript at runtime2018 · github.com · ▲95

  A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) at runtime. - pilagod/js-tracker

• MW
  My weekend project, Frontends – a Hacker News for Front-end developers2014 · frontends.org · ▲56
• 
  Bandwidth Hero2017 · bandwidth-hero.com · ▲81

  Browser extension which saves data by compressing images

• 
  /dev/null▲486

  a social network for devs

  Dev tools · 3d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 28d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 26d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 23d ago · openbot.run

• 
  Talanoa▲346

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 21d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 28d ago · corespeed.io

• 
  Trace▲1,555

  Workflow Automations for the Human 👾 AI Workforce

  AI · 2025 · trace.so

• 
  I spent 6 years building a ridiculous wooden pixel display▲1,145

  I built the world's most impractical 1000-pixel display and anyone in the world can draw on it. It draws a single pixel at a time and takes 30-60 minutes to complete a single image. Anyone can participate in the project by voting for the next image to be drawn, and submitting images. https://kilopx.com/

  Work · 2025 · benholmen.com

• 
  Indy AI by Contra▲1,070

  Job boards are dead. Your network is alive

  AI · 2025 · contra.com

• 
  Kitten TTS – 25MB CPU-Only, Open-Source TTS Model▲1,003

  Kitten TTS is an open-source series of tiny and expressive text-to-speech models for on-device applications. We are excited to launch a preview of our smallest model, which is less than 25 MB. This model has 15M parameters. This release supports English text-to-speech applications in eight voices: four male and four female. The model is quantized to int8 + fp16, and it uses onnx for runtime. The model is designed to run literally anywhere eg. raspberry pi, low-end smartphones, wearables, browsers etc. No GPU required! We're releasing this to give early users a sense of the latency and voices…

  AI · 2025 · github.com

• 
  I was curious about spherical helix, ended up making this visualization▲865

  I was wondering how I can arrange objects along a spherical helix path, and read some articles on it. I ended up learning about parametric equations again, and make this visualization to document what I learned: https://visualrambling.space/moving-objects-in-3d/ feel free to visit and let me know what you think!

  Life & fun · 2025 · visualrambling.space

• 
  The current sky at your approximate location, as a CSS gradient▲788

  For HTML Day 2025 [1], I made a web service that displays the current sky at your approximate location as a CSS gradient. Colours are simulated on-demand using atmospheric absorption and scattering coefficients. Updates every minute, without the use of client-side JavaScript. Source code and additional information is available on GitHub: https://github.com/dnlzro/horizon [1] https://html.energy/html-day/2025/index.html

  Dev tools · 2025 · sky.dlazaro.ca