The first free template for dev tools
The first free template specifically designed for developer tools and open source projects.
Versatile elements
The LaunchKit template has all the essential blocks startups need to launch fast. It’s ideal for quickly validating ideas and going live — without building things from scratch.
Read our study of 100+ dev tool landing pages that inspired us to create this template.
Attractive hero section
Show your product in the best light
Cards with icons
Highlight features at a glance without overwhelming detail
Bento block
For more detailed feature descriptions with screenshots
Code snippet
Perfect for installation instructions or onboarding users to a library
FAQ section
Answer your audience’s most common questions with ease
Call to action
Effectively convert visitors to product users
Flexible and customizable
Easily adapt the template to match your brand and product needs.
Fine-tune
layout, colors, and spacing without touching complex code.
Mobile friendly
Your page looks great on mobile, tablet, and desktop — no extra setup needed.
Light and Dark mode
Fast track theming with easily switchable light and dark modes built in.
Over 50,000 icons
Includes Font Awesome icons to cover a wide range of use cases.
Pricing page
This template has a pricing page specifically designed with developer tool products in mind.
Here’s a full preview of the template:
FAQ
How do I use this template?
First, clone the template to your account. Then, decide which blocks make sense for your landing and delete the rest. Replace all “Lorem ipsum” text with your copy, upload your images, and set up actions for the buttons and links.
How do I adjust the color theme to match my brand identity?
You can update the color theme in two ways:
-
Switching between light and dark modes.
Apply the theme-dark class to the html element of any page to enable the dark theme. This will apply the theme across the entire page. If no class is set, the light theme is used by default. -
Customize the color palette.
Use this tool to tweak the overall color theme. Adjust the two sliders until both themes match your brand’s vibe. Then, go to index.css and copy-paste the color codes from the tool into the corresponding --colors variable.
How can I update the code block?
The code block uses inline token styles and raw HTML which reduces the bundle size. To update the code:
- Use this tool
- Paste your code into the Input code field
- Choose Highlighter and Theme you prefer (the demo on the right uses GitHub dark default from Shiki), as well as the Language
- Follow the instructions in How to use the generated HTML section
- Press Copy HTML and paste the copied HTML into the <div class="card-code-block dark">…</div> block
How can I use a different icon?
This template uses Font Awesome icons as classes, which makes it easy to add them to buttons and links.
To add a new icon:
- Go to fontawesome.com/icons
- Search for an icon in the free set
- Copy the HTML code
- Paste it into a place where you want the icon to appear
How do I add a new page?
Simply copy index.html, rename it, and edit it to your liking.
How do I add update the favicon?
Read this article to prepare your own favicon, or use free online tools like this one.
How do I add update the OG image?
Open Graph (OG) image, or social image, increases the click-through rate of your links on social media. Follow these steps to update it:
- Design your own OG image, or use free online tools like this one.
- Replace social-image.png
- If you don’t need OG image, remove all meta tags below Open Graph comment
How do I publish my website?
This template consists of static files (HTML, CSS, JS), so it’s ready to go. You can host it on any static hosting service — like Firebase, Netlify, Vercel, GitHub Pages, or your own server. Just upload the files and you’re live.