Helios Theme

Modern documentation theme for Grav

1.7 compatible

A modern, feature-rich documentation theme for Grav CMS built on the latest Tailwind CSS 4 framework and Alpine.js. Helios provides a beautiful three-column layout with sidebar navigation, content area, and on-page table of contents - perfect for both developer documentation and product guides.

  1. Built on the latest Tailwind CSS 4 framework with modern best practices
  2. Responsive three-column layout with configurable widths
  3. Alpine.js powered interactivity for smooth UX
  4. Full Dark & Light mode support with system preference detection
  5. 5 color presets (Default, Ocean, Forest, Sunset, Midnight) plus custom colors
  6. 8 font choices including Inter, Open Sans, Nunito Sans, and more
  7. Configurable font sizing options (small, medium, large)
  8. Folder-based versioning with automatic detection and smart switching
  9. Built-in SimpleSearch integration with Cmd+K keyboard shortcut
  10. YetiSearch Pro ready for advanced fuzzy search capabilities
  11. 200+ language syntax highlighting via Codesh plugin
  12. 70+ code themes including GitHub, Dracula, Nord, One Dark Pro
  13. Code blocks with line numbers, highlighting, focus mode, and diffs
  14. Synced code groups for multi-file examples
  15. GitHub-style callout boxes (Note, Tip, Important, Warning, Caution)
  16. Cards & grids for flexible content layouts
  17. Synced tabs for OS or language selectors
  18. Steps component for tutorials and guides
  19. File tree component with auto-detected icons
  20. 30,000+ icons from Tabler, Heroicons, Bootstrap, Lucide, and more
  21. API documentation templates with method badges and parameter tables
  22. Scroll-spy TOC with active section highlighting
  23. Breadcrumb navigation with configurable separators
  24. Optional HTMX navigation for SPA-like experience
  25. GitHub integration for edit links
  26. Prev/Next navigation between pages
  27. Fully mobile responsive with collapsible navigation

Three-Column Documentation Layout

Helios features a professional three-column layout designed specifically for documentation. The left sidebar provides hierarchical navigation through your content, the center column displays your beautifully formatted content, and the right sidebar shows a scroll-spy table of contents that highlights the current section as you read. All column widths are fully configurable.

Dark & Light Mode

Full support for light and dark themes with automatic system preference detection. Users can manually toggle their preference, and their choice is remembered across sessions. The theme also includes 5 color presets (Default, Ocean, Forest, Sunset, Midnight) or you can define your own custom brand colors.

Powerful Code Blocks

Powered by the Codesh plugin, Helios provides exceptional code presentation with syntax highlighting for 200+ languages, 70+ themes, line numbers, line highlighting, focus mode, and diff visualization. Create synced code groups for multi-file examples that stay synchronized across your entire documentation.

Documentation Components

A rich set of components designed for technical documentation including GitHub-style callout boxes, cards and grids, synced tabs for platform-specific content, numbered steps for tutorials, file trees with auto-detected icons, and access to 30,000+ icons from popular icon libraries.

Version Management

Built-in support for folder-based versioning allows you to organize documentation by version (v1/, v2/, v3/). The version dropdown automatically detects your versions and preserves URLs when users switch between them - perfect for software projects with multiple releases.

Search Integration

Out-of-the-box integration with SimpleSearch provides real-time full-text search with keyboard shortcuts (Cmd+K / Ctrl+K). For larger documentation sites, Helios is YetiSearch Pro ready, offering advanced fuzzy matching, chunked indexing, and relevance scoring.

Frequently Asked Questions

The most commonly asked questions about the Helios Grav theme

  • Helios is specifically designed for documentation websites. It works great for:

    • Developer documentation (API references, SDK guides)
    • Product documentation (user guides, how-tos)
    • Knowledge bases and help centers
    • Technical wikis and internal docs
  • Per the Grav Premium License, you need to have a license for each use.

  • Absolutely! Helios is built with customization in mind. You can override colors via CSS variables, choose from preset themes, select different fonts and sizes, and extend the theme with your own templates. You will still need a dedicated Helios license for each site.

  • Yes! Helios integrates seamlessly with the Grav ecosystem. It has built-in support for SimpleSearch, YetiSearch Pro, Shortcode Core, Color Tools, and SVG Icons plugins. It also works with standard Grav plugins like Page Inject, Pagination, and more.

  • Helios supports folder-based versioning. Simply organize your documentation in version folders (v1/, v2/, v3/) and Helios automatically detects them. A version dropdown appears in the sidebar, and when users switch versions, the URL path is preserved to navigate to the equivalent page in the selected version.

  • Helios includes two search options:

    • SimpleSearch - Built-in real-time search with keyboard shortcuts
    • YetiSearch Pro - Advanced fuzzy search with chunked indexing for larger sites

    Both options support the Cmd+K / Ctrl+K keyboard shortcut to quickly open search.