Toolchain Docs
Introduction
Welcome to ToolChain
Toolchain is a modern, CMS-powered tool directory template built for Framer. It’s designed for solo founders, indie hackers, and lean teams who want to launch a tool listing site with minimal overhead and maximum flexibility. Whether you're showcasing your own software stack or curating a collection of favorite tools, Toolchain gives you the foundation to go live quickly.
Requirements
Framer Pro plan — the template relies on Framer’s CMS features.
Basic familiarity with the Framer interface — including editing pages, modifying CMS fields, and working with canvas components.
With Toolchain, you can expect a polished, scalable structure built with curated collections, reusable components, dynamic content display, and thoughtful interactions. It's not just a landing page—it's a full-featured tool directory system.
CMS Reference
Toolchain includes a powerful CMS schema designed to support rich content and seamless interlinking.
Tools
The core collection. Each tool entry includes:
Visual identity: name, logo, icon
Classification: category, tags, pricing
Content: short description, use cases, key features, audience, recommendations, and alternatives
Media: screenshots
Links: primary link + optional affiliate disclaimer
Categories
Each tool belongs to a category, defined by:
Name
Slug (for URLs)
Short description
Icon (as SVG string, not file)
Tags
Tags are used to surface tool attributes. These visually enrich listings and help users scan features quickly.
Pricing Options
Centralized pricing labels to ensure consistency across tools. Each pricing model includes a name and slug.
Stacks
Curated tool bundles for specific workflows. Each stack includes:
Metadata: name, slug, preview image, short description
Content: target audience, stack rationale, tool-by-tool breakdown
Each tool in a stack is referenced from the Tools collection, with a custom note on its role
Rankings
Highlight top tools through curated rankings. Each entry includes:
Name, slug, creation date
Featured flag (for homepage display)
Rich intro text
Tool ranking table: tool reference + corresponding trend label
Ranking Trends
Visual labels to indicate tool status—e.g., "Trending", "Growing", "Top Rated". These are connected to the Rankings collection.
Note: CMS icon fields require SVG strings. Use the Framer Icons plugin to copy SVG code and paste into the field.
Layout Templates
Toolchain comes with two layout templates to streamline page creation:
Main Template
Used across primary pages, includes:
Top announcement bar (optional)
Header with navigation
Newsletter Call To Action
Footer
Built-in scroll behavior: top bar hides on scroll, header stays fixed
Note: If you remove the top bar, adjust the scroll effect in the canvas. Otherwise, header positioning may be offset.
Minimal Template
Stripped-down layout for utility pages. It includes only the header and footer—ideal for 404s, legal pages, and lightweight content.
Pages
Homepage
Showcases the directory’s best content:
Hero section with visual
Editor’s Picks carousel (from featured tools)
Category previews
Highlighted stacks
A featured ranking
Tools Index
All tools grouped by category. Each group shows six tools by default, configurable via Framer’s "Limit To" setting.
Tool Details
Split into sidebar and main content:
Sidebar: icon, name, categories, pricing, short description, CTA button, affiliate note (optional—can be removed if affiliate monetization is not part of your plan), tags, social icons, related tools
Main Area: screenshot slider (custom built), rich content blocks (recommendations, features, use cases, audience, alternatives)
Categories
Index: grid of all categories
Detail: tools within the category + sidebar with navigation. Includes pagination (adjustable via canvas sidebar)
Rankings
Index: all rankings sorted by date
Detail: intro text + tool ranking table (rank, icon, description, category, pricing, trend label)
Stacks
Index: list of curated stacks
Detail: hero visual + sections for purpose, audience, tools breakdown, tool synergy
Submit a Tool
User submission form for new tools:
Fields: name, URL, logo link, short description, email
Validation states included
Utility Pages
Includes 404 and legal templates (Terms, Privacy, Cookies, Affiliate Disclosure). These are starting points and should be customized for your legal context.
Design System
Toolchain includes a robust design system for consistent styling.
Typography
Text styles are structured for clarity:
Headings
UI Headings: for visual prominence
RichText Headings: optimized for long-form content
Body
Large: for hero sections and major section intros
Default: for general body content
Small: for compact elements like cards and labels
Extra Small: for secondary UI text such as captions and input hints.
Links
Normal Link: default across site
Footer Link: adjusted for the footer’s muted aesthetic
Colors
Structured into semantic groups:
Brand
Primary: applied for branding accents
OnPrimary: used for text on top of elements with primary color
Backgrounds
Body: default site background
Surface: used on cards and grouped sections
Overlay: for modals and overlays
Muted: for subdued containers or low-priority content
Hover & Pressed: used for interactive states
Input: background of form fields
Backdrop: dimmed background behind modals
Transparent: used for layered visual effects
Foregrounds
Strong: for headings and high-emphasis elements
Medium: standard text color
Light: for secondary UI text (e.g., unselected tabs)
Extra Light: for subtle elements like placeholder text
Borders
Light: for dividers and background outlines
Medium: standard borders on inputs and cards
Strong: used in hover states to enhance interactivity
Component Reference
Components are organized by function.
Visuals & Branding
Logo: the site’s primary branding mark
Reusable icons: used for CMS entries and visual context
Social icons: appear in footer and social sharing components
Low Impact Hero Texture: subtle background texture used in secondary hero sections
Content Display
Tool Card: displays tool info throughout the site
Category Card: visual + text representation of a category
Stack Card: visual preview of curated stacks
Tabs: for toggling between related content views
RankingTableRow: structures each row in a ranking list
RankingTrendLabel: hoverable badge to indicate tool momentum (e.g., Trending, Top Rated)
FeaturedLabel: highlights featured tools in carousels and grids
Tooltip: used for inline hover explanations
FeaturedToolsCarousel: dynamic CMS-driven carousel for Editor’s Picks
Custom Code Components
CMS Carousel: built with Glide.js, allows carousel functionality from CMS content. Configurable in canvas for responsiveness and styling.
How to Use the CMS Carousel Component
To set up and use the CMS Carousel component in Framer, follow these steps:
1. Create and Configure the Collection
Drag a collection onto the canvas and name it (e.g., “Slides”).
Set the collection’s layout to:
Stack
Direction: Horizontal
Width: Fit
Gap: 0 (The gap will be controlled via the CMS Carousel component's properties.)
2. Style the Collection Items
Style each child item in the collection freely.
Ensure the following settings:
Position: Relative
Width: Any fixed width (temporary – the final width will be calculated based on the number of slides per view).
Each collection item will serve as a carousel slide.
To ensure all items have equal height, apply the following override to the carousel items:
File:
CMSCarouselOverridesOverride:
withEqualHeight
Important: If a carousel item contains a nested component, apply the
withEqualHeightoverride to the nested component itself, not the carousel item. In that case, set the carousel item’s height to Fit.
3. Add Navigation Arrows
Create two arrow elements on the canvas: one for navigating to the previous slide, and one for the next.
Name them appropriately (e.g., “Previous” and “Next”).
4. Add and Configure the CMS Carousel Component
Go to: Assets Panel > Components > Custom
Drag the CMSCarousel component onto the canvas.
In the Properties Panel:
Set the Slides field to the collection layer you created (e.g., “Slides”).
Assign the Previous Control and Next Control fields to the navigation arrows.
Set the ID property to a unique name (e.g.,
carousel-1).
This is important to avoid conflicts if you have multiple carousels on the same page.
5. Configure Carousel Properties
Customize the carousel to suit your layout and device needs. Available properties include:
Slides per view: Number of visible slides at once
Slides per scroll/touch: Number of slides that move per interaction
Gap between slides: Spacing between carousel items
Edge padding: Margin on the start and end of the carousel
Arrow visibility: Toggle the navigation arrows on/off
Fade edges: Add a soft gradient fade at the carousel edges
Breakpoint-specific settings: Configure all properties per device (Desktop, Tablet, Mobile)
Note: If the CMS carousel looks off in the canvas, don't worry—it’s a known bug. It works as expected in the live preview, so always check your changes there.
Forms
Input: single-line form field with interactive states
Text Area: multiline form field
Newsletter Form: used in persistent CTA and modal
Newsletter Modal: popup triggered via header CTA
SubmitToolForm: collects tool suggestions through a front-end form component. It supports built-in validation states for success and error feedback but does not include any back-end logic by default. To make it functional, users must configure a submission handler—either by adding a webhook URL in the Framer form settings, routing responses to an email address, or integrating with an automation platform like Make.com. This enables actions such as storing entries in Airtable, sending notifications, or triggering follow-ups.
ToolsSearchInput: searchable input that uses Framer’s native search
Layout
Header: navigation and CTA trigger (newsletter)
Footer: global footer with links and social icons
Divider: a gradient-based separator used between sections
UI Elements
Button Link: navigational button styled as a link, used for page transitions
Button: HTML button with interaction states for submitting forms or toggling overlays
Close Button: used to dismiss modals and overlays
Hamburger Menu Button: displays mobile navigation
Nav Link: styled link used in header navigation
CMS Navigation Button: lets users go to next or previous item in a CMS collection
Carousel Arrow: navigates between slides in carousels
Code Overrides
Toolchain includes a few carefully crafted code overrides that add polish and advanced functionality across your site. You don’t need to write code to use them—but understanding what they do helps you unlock their full potential.
Text Overrides
Sometimes, long text entries can break layouts or overwhelm the design. The text overrides help keep things neat by limiting how many lines of text are shown in a block. They automatically add ellipses (...) after 2, 3, 4, or 5 lines—so your cards, lists, and summaries always look balanced and clean.
CMS Carousel Overrides
By default, carousel items can vary in height depending on their content. To keep things aligned, the withEqualHeight override ensures every visible slide in the carousel matches the tallest one. You’ll want to apply this override directly to each slide—not the carousel as a whole—for consistent visuals.
Layout Override
This override brings subtle but meaningful enhancements to the scrollbar styling across your site. You can change its color, width, and border radius to better match your branding—all from the top of the override file. No need to dive into the code itself—just adjust the variables provided.
Social Share Overrides
Want to make it easy for visitors to share tools or rankings on their favorite platforms? These overrides enable one-click sharing via icons. When applied, they open the native share window for services like X (Twitter), WhatsApp, LinkedIn, Facebook, Reddit, Email, and Telegram. Just drop the corresponding override onto a social icon and you're set.
SEO & Metadata
Optimize your Toolchain site with these built-in features:
Metadata fields: Use Framer’s native meta field support per page
Open Graph + social previews: Add images and descriptions for link previews
Image alt text: Always fill in descriptive alt attributes, especially for tools and hero images
Semantic structure: Use proper heading levels (H1–H3) for better crawlability
Support & Contact
Before reaching out, review this documentation and Framer’s official help center. Most issues can be resolved by revisiting CMS settings, component visibility, or canvas configuration.
For bugs or essential questions, reach out via support@nectarstudio.com and we'll get back to you promptly.