What should be on your dev tool landing page?

I like the framework of high-converting landing pages from the book “Websites that convert” by Claire Suellentrop.

She explains that the reader needs to answer the following questions on your landing page to convert:

• What do you do?
• Why should I care?
• Am I alone in caring, do others care?
• How do you do what you say you do?
• If I believe you, how will my life improve?
• Why is it safe for me to believe you?
• Okay, I think I believe you. Now, what do I do?

This is how I convert this to what you should address on a dev tool landing page:

• What is it? What does it do? 
• How is it different than other tools like it? What is so special?
• Do devs like me use it? Do respectable companies use it in production?
• What does this product/framework/tool look and feel like?
• Does it integrate/work with my current tool stack?
• How can I start? How can I explore more?

Now, let's go deeper on each of these (with examples).

What is it? What does it do? 

Give people a hook like a product category (CMS) or a known incumbent that people can compare you to (Datadog). Or say what it does plainly. 

Examples: 

• “Open source Firebase alternative” (from Supabase)
• “API for stock and crypto trading” (from Alpaca)
• “Next generation ORM for Node.js & Typescript” (from Prisma)

How is it different than other tools like it? What is so special?

People need to know why you and not 10 other tools that do (almost) the same thing. Help them see the reason why your dev tool was created in the first place. There usually is a good reason for it. 

Example:

• 2x Faster than Dino, Node.js (from Bun)
• “Build modern websites without leaving HTML” (from TailwindCSS)
• 100x more scalable than Datadog, Sumologic, Papertrail (from Axiom) 

Do devs like me use it? Do respectable companies use it in production?

People need to know if they will be the first production team to use your dev tool. No one really wants that but if the pain they feel is big enough some will agree to it. 

That said you want to make people feel comfortable. You want logos, you want testimonials. Ideally from companies that are known for good engineering or are just well-known brands or hot startups. 

If you are open-source then you definitely want to show your GitHub star count (if it is solid for your niche). 

Example:

• Interactive testimonials that highligt features (from Appsmith)
• Wall of love with testimonials (from TailwindCSS)
• “Top JS ecom on Github” (from MedusaJS)

Should you show your Y combinator logo in there? 

If you are early and it is the best social proof you can do, go for it. But if you have customers/users show them. Presenting the YC logo makes you feel early stage and a high risk to use in production. 

What does this product/framework/tool look and feel like?

Show people the code, show them the UI, and explain how it works. Use jargon and real, dev-to-dev language. 

Example:

• Code and interactive results section (from TailwindCSS)
• Feature with code (from Auth0)
• How it works as timeline (from SST)

Does it integrate/work with my current tool stack?

People need to know if they will be able to use it in their current workflow. They need to know if you integrate with other core components of their stack. 

Example:

• Integrations and SDKs section (from Meilisearch)
• Frontend and Backend integrations in header (from Algolia)
• Interactive product tour (from Vercel)

How can I start? How can I explore more?

Say devs believe you and want to know more. What do you want them to do? Where do you want to send them next? 

Example:

• Docs and install code (from Astro)
• Install code in header (from Cypress)
• Classic Signup | Docs | Examples CTA (from Auth0)

Alright, this is what I think every dev tool landing page should have. Does your page address all of these?

Resources

• The definitive SaaS homepage framework
• How to create value proposition for developer tools (with 20+ examples)

‍