Dev tool landing page examples

call to action
landing page
developer experience

Header with tabs from Appsmith

What to put in the header when your dev tool does a lot?

I like how Appsmith approaches it.

In their case, they have multiple use cases they want to showcase.

But you could use the same idea for many features or products.

Show multiple clickable tabs:

  • It invites the user to click and see.
  • It hints at all of those different use cases
  • It doesn't overwhelm your audience with too much info

A bonus idea is the "Try cloud" | "Self-hosted" CTA.

It communicates right away that you can deploy that dev tool anywhere.

If the self-hosted deployment is important to your customers let them know.

You don't want them to look for it and drop from the page trying to find the FAQ.

campaigns
developer experience
copy
vs competitor
landing page

VS page format from Ably

Vs pages are a classic SaaS marketing.

But I like how Ably adjusts them to the developer audience:

  • For each criterion, they say why it matters
  • They link to their resources to extend further why Ably works great there
  • They use a lot of developer jargon to make it feel like a dev wrote it for devs
  • They go over a lot of different categories to make this comparison deep enough to be valuable for the buyer
copy
developer experience
landing page
hero section

Header design from Alpaca

This is a simple but great header imho:

  • they explain what it is clearly: Stock trading API
  • they show the result: trading stocks
  • they show the code to drive the "it is for devs" point

Love it.

developer experience
landing page

Mongodb for developers section

Good in-place code pattern.

I can go and see different code snippets without moving to other parts of the website.

At the same time, I can read explanations and value propositions.

I like how "view documentation" is such a strong CTA with so much going on here already.

landing page
developer experience
call to action

Integrations section on Meilisearch homepage

How to show integrations on your dev tool homepage?

Every dev tool needs to integrate with other libraries in the space.

And you want to show how well integrated with the ecosystem you are.

But you ctually want to do a bit more than that.

You want devs to see how easy / flexible / clean it would be for them to use it.

That is why instead of showing just logos from your ecosystem it is good to show the code too.

Meilisearch does that beautifully:

  • They show a big list of integrations that show the breadth
  • For each, there is a code snippet on a relatable example
  • + call to action to all integrations and selected one

I am sure this is getting more clicks than just a list of logos.

developer experience
copy
call to action
product led growth
landing page

Hero section CTA from Cypress.io

That CTA.

You go straight for the install/download.

I don't know if you can go more developer-focused than that.

It sets the tone for the entire homepage.

And let's be honest (almost) nobody actually clicks that "Sign up" button in the hero section.

navbar
landing page
call to action
product tour

Playground CTA in the navbar resources section from Prisma

Simple yet powerful CTA in the navbar resources section.

The resources section in the navbar is mostly navigational. Well, the entire navbar is ;)

But you always have that one action that is more impactful than others.  

💚 And I think that a Plauground  is a great option. You get people to see how your product works. You let people play with it and see for themselves.

Not many next actions can be as impactful as getting people to experience the product.

Especially if you are a heavier infra tool that people cannot really test out in that first session. I mean, you won't really create a realistic example of your core database in 15 minutes to see how that new tool that you just saw works.

🔥 Making this CTA "big and shiny" and showing a glimpse of what will happen after clicking is great too.

🤔 2 changes I'd test out:

  • Making the copy more descriptive performs better.  Like "Launch playground", "Play with Sandbox", or something around "Run an example project/app/environment".
  • Showing something more exciting about the product (or playground/tour) on that visual

But the core idea behind making the playground your core navbar resource section CTA is just great.

copy
developer experience
landing page

How fast you ship your roadmap?

"How fast do you ship?"

Not many dev tools answer that on their homepage. PostHog does.

In a typical (enterprise) sales process, people often ask:

  • what is on your roadmap?
  • how fast do you deliver new features?
  • what has your product progress been like last year?

And you show them the roadmap or get someone from the product on the next call.

But I haven't yet seen dev tools talk about it on their homepage.

But why not?

Devs who want to buy self-serve want to know it almost just as much.

After all, they won't be able to twist your arm to build that custom feature cause "we are your biggest client and we need it".

I like it, it builds trust, it shows me you are transparent,

And it shows me that those features I can see on the public roadmap will come true.

developer experience
copy
call to action
product tour
product led growth

Header CTAs from Mixpanel

Mixpanel primary CTA is to take an interactive tour.

They take you to a 30min video + a guided UI tour.

Not a signup.

That is because with products that have long time to value (like analytics, observability etc) dev will not see value in the first session.

I mean to really see value you need to see real data, real use cases. And if you were to actually test it would take weeks.

That is why many companies do demos. But demos have their own problems (and most are bad).

Interactive tools make it possible for me to explore the value without talking to anyone.

I love this option.

copy
call to action
landing page
hero section

Great developer-focused CTAs from Plaid

Action-focused copy is usually better than "sign up".

But sometimes it is hard to find a good copy for this.

Some teams like Vercel or Auth0  do "Start building "  

But that doesn't always work.

I really like this "Get API keys" CTA copy.

Now for the Hero section I really like those two CTAs:

  • Main CTA: Sign up, again expressed with action-focused "Get API keys" copy
  • Secondary CTA: See docs, I like how "See API docs" makes it even more concrete.

Really great job imho.

developer experience
landing page

How it works as a timeline from SST

I like this idea of showing how your dev tool works.

With developers, you almost have to explain how it works on your homepage.

Many products do some version of Step 1 -> Step 2 -> Step 3 -> Success.

I really like how @SST approached it with a timeline.

I find it more engaging than those disconnected steps.

And when I follow this journey the final and logical step is to try it out. Get started.

developer experience
landing page

Before / After design from AhoyConnect

Very nice design solution on the homepage.

Classic communication of the world before using your tool and the world after.

Really liked how it felt messy before.

And is nice and clean after.

video
landing page

Streamlit explainer video

Streamlit has an amazing explainer.

They show how to go from:

  • Writing your first line of code
  • To creating data dashboard
  • To deploying it across the web

In 42 seconds.

No audio, just code and a simplified result window.

Amazing stuff.

landing page
social proof

Modal Community section

The main message you want to land on your homepage community section is:

"We have a big community of devs who love using the product"

🚧 That helps you tackle obstacles your dev reader has:

  • "is this tool any good"  
  • "do real companies use it in production"
  • "are there people who can help me when I hit roadblocks"
  • "where would I find others using the tool when I have questions"

💚 Modal solves it beautifully by going simple but smart:

  • Join our community header and a call to action to join Slack makes it obvious where users are
  • Wall of love style testimonials give a feel that there are so many users and they love it enough to share that with others
  • They all look like Tweets even though (I presume) some of them aren't. That is a nice trick to boost social proof. People give more value to social post testimonials.
  • They show a face, name, role, and company which builds trust and makes it obvious those are other devs (like me)

It lands the message that this section should land for sure. I really like it.

developer experience
landing page

How it works crossover from Mux

The problem with presenting API is that it is hidden. It gets the job done in the background.

So it is not "attractive" in the way some other dev tools can be.

But you can:

  • show the end result and how it gets the job done.
  • show how easy it is to use.
  • let people play with something interactive to make it real.

That is how Mux, video API, solves it.

Found this awesome crossover on their homepage.

They give you:

  • devvy language that just says what it does without high-level fluff
  • code, input/outputs
  • end result of your API call, to make it real
  • demo to get the feel real-time

Love it!

developer experience
landing page

1-2-3 how-to section from Appsmith

How easy it is to get started is a big conversion factor for any dev tool.

Devs want to test things out and if it is hard to do they will be gone testing a competitor that made it easy.

And so a good how-to section on your homepage can make a big difference in getting devs to that first experience.

Appsmith does it beautifully with their 1-2-3 How-to section:

  • 1-2-3 format: Connect data -> Drag and drop -> Customize with code
  • Interactive GIFs with code snippets and UI elements
  • CTAs to integrations, widget library, and docs
  • Dev testimonial at the end to make it real

It is so engaging and just beautifully designed. And the CTA to additional resources like integrations, widget library, and docs make the message land. I do believe it is easy to set this up.

Great pattern to copy-paste imho.

landing page
developer experience
call to action

Benchmark section on homepage from Astro

Your dev tool is faster/more scalable/more X -> show it with benchmarks.

For some tools the entire unique selling point is that they are faster.

You build your messaging around that, put a flavor of "fastest Y for X" in the header and call it a day.

But devs who come to your website cannot just take your word for it. They need to see it, test it.

For some tools it is possible to just see it for themselves, get started.

But you cannot expect devs to really take a database or an observability platform for a spin.

As to test the speed or scalability on realistic use case you need to...

... set up a realistic use case. Which takes a lot of time.

But you can set that use case and test it for them. With benchmarks.

I really like how Astro approached it:

  • they list out known competition by name
  • they hint at technical reasons for why they are faster
  • they shows those benchmarks high on their homepage
  • they link out to the full report and mention the trusted source

If your usp is that you are faster/more scalable/ more whatever. Back it up. This is the nr 1 thing devs on your website need to trust you with to move forward.

developer experience
landing page

Auth0 developer portal: How it works diagram

Show how product components fit together.

A good diagram is such a good solution to that.

They use the same colors and eyebrow copy that was used for body sections.
It all clicks now, I get the full picture.

social proof
landing page
developer experience

Showing testimonials related to features from Appsmith

How to bring attention and trust to a feature section?

Add a testimonial.

Ideally, it should talk about that feature to make your message even stronger.

I like how Appsmith made it animated and it just makes you look.

And you read the testimonial and look at the feature above it.

Good stuff.

copy
landing page
hero section

Auth0 header copy

Classic Auth0 campaign coming back in 2023.

I love how simple and powerful this message is.

You can outsource a dull but important problem of authentications to them.

That is all the say.

But it is enough to get you interested and understand what they do.

developer experience
copy
vs competitor
landing page
pricing

Competitor comparison page from New Relic

Sometimes your product just wins on price.

I like how New Relic owns it on this page:

  • They show you price comparison graphs
  • The CTAs are focused on helping you compare the prices
  • They use jargon specific to the category to drive the price argument: "peak usage", "overages and penalties", "SKUs"

After reading this I'd trust them to give me a solid price estimate and that it will likely be cheaper than Datadog.

Obviously price is not the only reason why we choose tools, but if that was a problem I had with Datadog, they have my attention.

developer experience
landing page
hero section

Auth0 developer portal hero section visual

I love that it is static and it blurs everything I don't need to get the concept.

For the dev audience, static graphics, when done well, are better than

  • videos
  • screenshots
  • or happy faces of happy customers :)

Tell me what you do in 1 sec, not 60

copy
developer experience
call to action
landing page
hero section

Header content CTA from Plaid

Sometimes you have an article, report, or event you want to drive people to.

And it is important that they read it.

What Plaid did here is an interesting way of putting it right in the hero section without making it overwhelming or distracting.

I like it.

call to action
landing page
developer experience
hero section

Header with benchmarks from Bun

If your dev tool's USP is that it is faster -> Show it in the header

I like how folks from Bun focus on the fact that they are a faster library.

They show the benchmark as the key visual on the homepage header.

I love it.

If you think about it how else do you really want to show that you are faster?

This is believable, especially with a link to the benchmark so that I can dig deeper.

They show competitors, they don't pretend they don't exist.

And they talk about being faster left right and center.

I mean, they drive this "we are faster" home for me.

If that was important to me, I'd check it out.

developer experience
landing page

Feature section design from TailwindCSS

I love the design of this crossover section on the Tailwind homepage.

I see the code and the result next to each other.

I see how I can get that result with code.

It is interactive and catches my attention.

It makes me feel inspired.

Great job Tailwind team!

copy
developer experience
landing page
hero section

Axiom competitor-focused messaging

In a mature category, it is safe to assume that people know about other tools.

Especially devs.

I love how Axiom owns its unique selling point and how it stands out from the competition.

  • They explicitly say how much more scalable they are vs well-known brands like DataDog, Splunk, SumoLogic, and others.
  • They don't pretend to be the only company in the observability space.
  • They just own their unique selling point and make it easy for people to understand why choose them not others.

Takes guts but I love it.

copy
developer experience
social proof
landing page
hero section

Powerful landing page messaging from Flighcontrol

Simple and powerful messaging.

They say what they do. Zero fluff.

They make it easy for devs by explaining how they are different than (obvious) competitors.

They add a little developer-focused social proof.

developer experience
landing page

Feature tabs header pattern from PostHog

Which feature/product to show in the header?

How about all?

Many dev tool products are feature-rich. And you want to show those awesome features.

But it is easy to overwhelm the reader when showing so much info.

That is why I really like the header tabs pattern that @PostHog uses:

  • You have clickable tabs with product names + descriptive icons
  • Copy + Supporting visual (UI, code etc) and a call to action in each tab
  • Supporting visuals are in vastly different colors to make it obvious you switch tabs.

This pattern is especially powerful when you want to communicate completeness.

Posthog definitely wants to do that. If you are on that train I'd strongly suggest considering/testing it.

developer experience
copy
call to action
landing page
hero section

Auth0 developers portal header

Great above the fold

The subheader explains the value proposition.

Header handles major objections:

  • is it easy to implement?
  • can I extend it?

Then we have 3 CTAs but they are super focused on devs: 

  • Signup (using action-focused copy)
  • See docs which is exactly what many devs want to do before signing up
  • See examples, again exactly what most devs want to see before signing up

Then it goes on to explain how it works with a simple, static graphic.

This whole thing makes me feel peaceful.

developer experience
copy
docs
landing page
hero section

Header search docs CTA from TailwindCSS

"See docs" is one of my favorite secondary CTA on dev-focused pages.

TailwindCSS takes it to the next level by inserting docs search right into the header CTA.

This takes devs directly to the page they are interested in rather than have them try and find things for themselves.

They could have searched the docs in the docs, of course.

But this is just this slightly more delightful developer experience that TailwindCSS is known for.

developer experience
social proof
landing page

Social proof from TailwindCSS homepage

Understand who is reading. Add social proof that speaks to them.

Social proof is about showing people/companies who are similar to the reader that they got success with the tool.

Company logos can be good if your reader knows and likes those companies.
But if those are random companies, I am not sure how much value does it bring.

Devs care what other devs who use your product have to say about it.
That's why I like testimonials.

Not the crafted, clean ones with features and values.
But the real stuff. Real devs sharing real stories.

Bonus points for "Okay, I get the point" button copy.
It changes from "Show more" when you click.

Nice!

copy
developer experience
social proof
landing page
hero section

Landing page header from MedusaJS

There are many things that I like about it.

  • A clear value proposition: Explains what it is: an open-source alternative to a well-known product Shopify.
  • Shows code and what the code does visually. Great product explanation.
  • Adds a social proof with "#1 JS ecom platform on GitHub:". When you have 16k stars you should use it!

Overall with very little effort, I understand what it is, and what it does.

And I can go and dig deeper for myself or spread the word with my circles.

call to action
landing page

Open-source project homepage CTA from Astro

What CTAs should you choose for your open-source project homepage?

Was always wondering what is my default.

There are many options: "See docs", "Get started", "Sign up", "Start X"

But in open-source you want people to start playing with it, install it.

So what should you choose?

Recently came across Astro homepage and loved what they chose.

"Get started"

  • Takes you to the quickstart in the docs
  • Is action-focused copy
  • Sets obvious(ish) expectations

Install code

  • Gives you copy-pasteable install command
  • + it shows the code to make it more devy

Whatever I choose I will actually get my hands dirty.

I think this will be my default from now on.

copy
landing page
hero section

Header copy from Supabase

Say what you do and how you do it.

What:

  • Supabase owns it with an "open-source firebase alternative"
  • They don't streamline project delivery or anything. 

How:

  • Value proposition around speed of set up
  • Then jargon that hits the spot with your ideal developers
  • Short, and to the point. 

CTA (bonus):

  • "Start your project" action-focused
  • Documentation. With devs, this is always a good alternative CTA
copy
developer experience
landing page
hero section

The header copy of Auth0 developers portal

I love this copy. It answers:

  • what it does -> "authentication and authorization"
  • how is it different -> "simple to implement, easy to extend"

It doesn't talk about the value as it is obvious to devs.

Obviously, it will save time and make things safer.

Don't talk about it.

landing page
hero section

Clickhouse header design

This has to be one of the better dev-focused headers I've seen in a while.

Headers should deliver your core product message and get people interested. That is true at any stage but early stage especially.

💡You want everyone, even those folks who just take a look and leave to remember. You want them to recall it in their next conversation around this topic.

There may be supporting messages for sure but there is always that one core thing. Make sure it lands.

In the case of Clickhouse, that core message is that they are a database that is fast at a huge scale.

Their supporting messages are:

  • they are best at analytics and real-time apps use cases (where speed/scale matters)
  • they are a very popular open-source project

💚And they deliver that beautifully with:

Headline

Clear as day headline speaking to value delivered at a level that builds rapport with their audience.

Not "Give users seamless web experience at scale" but "Query billions of rows in milliseconds". I like that little touch with "rows" which makes who they speak to obvious

Subhead

Subhead supporting it with "fastest and most resource-efficient DB"

+ talking about the use cases "real time apps and analytics" and it being open-source

Calls to action

These CTAs make the audience feel at home. There are docs in there + clear "we are open-source" CTA

Visual

That supporting visual is just amazing.

It shows the value in the most believable way you could deliver it here imho. Query and an Output that shows the size of the database and speed of the query

Social proof

Social proof in the navbar, almost 34k stars and a GitHub icon.

+ a way to get people to that repository, check it out and leave a star.

There is more social proof below the fold with big logos and stuff but the GitHub icon and stars make it immediately clear that this is a project that people care about.

It is remarkable how brilliantly simple it is all presented.  Just a fantastic work IMHO.

developer experience
landing page

Auth0 developer portal Getting started cross-section

This body cross-section is just awesome.

It makes it obvious that I can connect it to my workflow.

This is a must for dev-focused pages imho.

What I like:

- there are many integrations listed

- I can see the code and that it is easy to use

- The CTA is to integration docs, awesome!

copy
call to action
product tour
product led growth
landing page

Axiom "Playground" CTA

With infrastructure tools, it is notoriously difficult to show people the value quickly.

To really see it they would need to set up everything at their company infra, create dashboards for their use case, and so on. 

A lot of work.

That is why creating a sandbox experience is a good way of giving people a taste.

I like the way Axiom calls it a playground and says "Play with Axiom" and "Launch playground".

This copy is good because:

  • they acknowledge it isn't a real thing (but a playground)
  • it conveys that it will be interactive and you'll be able to click around
  • it makes it feel like less work and more, well play :)
copy
developer experience
call to action
landing page
hero section

Auth0 developer portal Hero section CTAs

There are three CTAs actually.

Common knowledge suggests doing one, maybe two, they do 3:

  • build
  • see docs
  • see examples

Devs want relevant and practical.

Also, devs love docs and examples and check them before signing up.

Action-focused copy is great as well.

developer experience
landing page
hero section

Algolia developer portal design

Devs are builders.

Make your home page for builders.
Go directly into the "how" instead of the way.
Many devs when they land on your home page, already know the "why".

I love that it:

  • shows the step-by-step right away in the hero
  • CTAs are links to integrations with particular frameworks and libraries
  • the hero copy is very toned-down
copy
hero section
landing page

Snyk narrow initial positioning

In dev tools, you really can solve the problem for a narrow market and extend to adjacent markets over time.

Use that -> Snyk did.

Their value proposition stayed pretty much the same for 7 years!

"Find and fix vulnerabilities in open-source software you use."

But the market they served got so much bigger over time:

  • They started super narrow with just one Javascript framework, Node.js
  • They focused on solving that pain very well before moving to the entire Javascript language
  • Then to other popular languages like Ruby, Java, and Python
  • Then to the entire Open Source dependencies
  • Then fast forward to today and they do Open source + containers +IaC

Again, their core value prop is the same in 2023 as it was in 2016.

But their target market (and revenue share) grew by... a lot ;)

Isn't that just beautiful marketing-wise?

So the takeaway is this:

Start narrow, solve the problem, and extend to other frameworks/languages/tech can still work.

copy
developer experience
landing page
hero section

Header design from Mux

Mux does a few things beautifully in this header.

Value proposition:

  • The "what" is explained right away: "Video API", "live and on-demand experiences"
  • Super clear on persona "developers" and job to be done "build online video"

Animated visual that is really good for dev tools:

  • that have an API/SDK
  • that have a UI where the results of that API calls go
developer experience
landing page
hero section

Header design from Iterative.ai

I love this simple design.

They show:

  • A GIF of code and console
  • Have a few tabs with features, explained
  • Social proof with Github stars

Simple, and powerful imho.

landing page
developer experience

Interactive feature tiles from clerk.dev

How to present many features at once?

Sometimes your dev tool has many features/products that you want to show.

❌ Showing all of them as separate sections doesn't work with more than 3. It just gets too long very quickly.

✅ You can go with the tabs pattern where each tab has copy+visual for a feature.

💡 But there is another option that makes a ton of sense when you have many features to show.

Interactive tiles of different sizes.

💚 I like the implementation of that pattern coming from Clerk:

  • Each tile is a combo of feature name + one-liner description + an interactive visual
  • When you hover over each tile it starts playing the visualization explaining the feature even more
  • Some of the tiles are bigger which makes the entire section more interesting. It could be one (core feature or differentiator) or a few if you present many.

That pattern can work really well on blogs or learning centers too but I think we're going to see more of it on dev tool websites.

call to action
landing page

Posthog funny CTA

Beautiful mockery of classic conversion tactics from PostHog website.

So what do we have here:

  • "3 people would have..."
  • "Not endorsed by Kim K"
  • "Eco-Friendly"
  • "$0 FREE"
  • ">1 left at this price"
  • "Act now and get $0 off your first order"

I have to admit I chuckled ;)

And I bet many devs who don't think of marketing very highly chucked too.

That builds rapport. (hopefully) makes you one of the tribe rather than another faceless corpo.

BTW, they used it as a bottom of the homepage call to action.

I like it.

Most of the people who scrolled there are not going to buy anyway.

But they may share the website with someone who will.

developer experience
landing page

Multi-tab GIF cross section website design from Supabase

I like the design of this crosshead.

  • Starts with the gif to catch my attention
  • When tabs change the copy, CTA, gif change
  • The figs have a nice click cursor that shows what I am doing
  • CTA is very "silent", non-intrusive
copy
call to action
product led growth
landing page

Posthog "do not talk to us" copy

Most devs want to explore products themselves.

They want to read the docs, see examples, play with the product, or watch a video.

They don't want to hop on a demo call, especially early on in the evaluation process.

And they definitely don't want to sit through the demo to learn what your pricing is.

But there will be moments when they will want to talk to you. They will raise their hands and let you know then.

Posthog speaks to this reality with this copy beautifully:

  • They basically say "don't talk to us"
  • They give you transparent pricing on the website
  • They give you a recorded demo on the website
  • They let you try the product for free without talking to them
  • But if you want to talk to sales/support you can reach out

This is very developer-focused approach and I love it.