Free template for devtool landing pages
Use this template to launch a landing page for your next developer tool or open-source project.
Trusted by fast-growing companies worldwide
Feature showcase blocks
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique
Feature 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Feature 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique
Cards with icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Block with one big image and CTA
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Description and a code block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
# lefthook.yml
# See the FAQ for instructions
# on how to update this block.
# Build commit messages
prepare-commit-msg:
commands:
commitzen:
interactive: true
run: yarn run cz --hook
env:
LEFTHOOK: 0
# Validate commit messages
commit-msg:
commands:
"lint commit message":
run: yarn run commitlint --edit {1}FAQ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique
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