We’re excited to announce a major update to Explainer that brings a host of new features, components, and design improvements. Here’s a summary of everything that’s changed.
This release includes breaking changes. If you’re upgrading from a previous version, please review each section carefully.
New landing page
Explainer now ships with a fully designed landing page — ready to use out of the box.
A bold, animated hero with primary and secondary call-to-action buttons.
Showcase your project’s key features in a responsive grid layout.
Display user feedback with a clean, rotating testimonial section.
Automatically pull your latest blog posts onto the homepage.
New MDX components
Guide readers through multi-step processes with a clear, numbered layout.
Show live rendered output alongside source code — perfect for documenting UI components.
Styled citations with optional author attribution using the — convention.
Tabbed code blocks to present multiple files or languages side by side.
Display feature cards in a responsive grid with icons and descriptions.
Embed a blog article listing directly inside your documentation pages.
Heading anchor links
All h2 and h3 headings now generate clickable anchor links. Hover over any heading to reveal the # symbol, click it to update the URL, and share a direct link to that section.
The best documentation is the one you can link to directly.
— The Explainer Team
Improved navigation
Doc Switcher
A redesigned documentation switcher in the sidebar with descriptions and active state indicators.
Navbar Dropdowns
The navbar now supports dropdown menus with icons and descriptions for richer navigation.
Full-text Search
The search bar now indexes all documentation content for full-text search across your docs.
Previous / Next
Navigate between documentation pages with contextual links at the bottom of each page.
Auto-generated thumbnails
Blog posts and documentation pages now get automatically generated Open Graph thumbnails during build. Powered by Satori, each thumbnail features your project’s primary color, the page title, and a clean dark design.
No manual image creation needed — thumbnails are generated at build time and served as static assets.
Documentation restructuring
The documentation now supports multiple doc collections with a clean switcher. Direct pages at the root of a collection are also supported alongside nested folder structures.
content/
docs/
getting-started/
installation.mdx
configuration.mdxcontent/
docs/
framework/
getting-started/
installation.mdx
documentation/
demo.mdxDesign polish
If you customized the color tokens in your global.css, make sure to update them to match the new naming convention.
| Feature | Status |
|---|---|
| Landing page | New |
| Step groups | New |
| Code previews | New |
| Blockquote | New |
| Card groups | New |
| Heading anchors | New |
| Doc switcher | Improved |
| Navbar dropdowns | Improved |
| Search | Improved |
| Thumbnails | Improved |
| Dark mode | Improved |
Getting started
Ready to try it out? Head over to the Getting Started guide to set up your own Explainer documentation.
Find our recent articles
Lorem ipsum
Discover Explainer is a tool that helps you create beautiful, responsive, and accessible web documentation using Astro. It's built with Astro, Tailwind CSS, and TypeScript.
LeadcodeDev
@leadcode_dev
Discover Explainer fondations and use markdown
Discover Explainer is a tool that helps you create beautiful, responsive, and accessible web documentation using Astro. It's built with Astro, Tailwind CSS, and TypeScript.
LeadcodeDev
@leadcode_dev