Skip to content
Grav 2.0 is officially stable. Read the announcement →
Premium / Helios Theme
Premium Theme

Helios Theme

Modern documentation theme for Grav

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.

Grav 1.7+

Now available with Ready-to-Run prebuilt Grav install zips with Helios theme, sample skeleton package content, all plugins and licenses ready to go. Just unzip and go! Find the download links alongside your licenses in the license manager.

Helios theme also includes a complimentary license to SVG Icons plugin.

Everything you need. Nothing you don’t.

Over 36 distinct features and integrations, out of the box.

01
Built on the latest Tailwind CSS 4 framework with modern best practices
02
Responsive three-column layout with configurable widths
03
Alpine.js powered interactivity for smooth UX
04
Full Dark & Light mode support with system preference detection
05
5 color presets (Default, Ocean, Forest, Sunset, Midnight) plus custom colors
06
8 font choices including Inter, Open Sans, Nunito Sans, and more
07
Configurable font sizing options (small, medium, large)
08
Folder-based versioning with automatic detection and smart switching
09
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
Buttons with color variants, sizes, icons, and bordered/plain styles
18
Badges for inline status pills with color variants and outline styles
19
Synced tabs for OS or language selectors
20
Steps component for tutorials and guides
21
File tree component with auto-detected icons
22
Link cards for external resource previews and further reading
23
Details collapsible sections for toggleable content
24
Tooltips for hover definitions on inline terms
25
Keyboard keys with styled <kbd> elements and Mac symbol support (⌘, ⌥, ⇧)
26
Copy text for inline one-click clipboard copying
27
Images with border, shadow, caption, and lightbox zoom
28
Videos with responsive embeds for YouTube, Vimeo, and local files
29
30,000+ icons from Tabler, Heroicons, Bootstrap, Lucide, and more
30
API documentation templates with method badges, parameter tables, and grouped API collections that render multiple endpoints on a single page with quick-jump TOC
31
Scroll-spy TOC with active section highlighting
32
Breadcrumb navigation with configurable separators
33
Optional HTMX navigation for SPA-like experience
34
GitHub integration for edit links
35
Prev/Next navigation between pages
36
Fully mobile responsive with collapsible navigation
Three-Column Documentation Layout

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.

Dark & Light Mode
Powerful Code Blocks

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, link cards, buttons and badges, synced tabs, numbered steps, file trees, collapsible details and accordions, tooltips, styled keyboard keys with Mac symbol support, inline copy text with clipboard buttons, images with lightbox zoom, responsive video embeds, and access to 30,000+ icons from popular icon libraries.

Documentation Components
Version Management

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.

Search Integration

Screenshots & Examples

A peek at sites running Helios Theme.

Helios - dark version Helios - light version Configuration Page Quick Start Page Navigation Page Versioning Page Callouts Codesh Code Blocks Tables Tabs Cards Card Grids Steps File Trees API Integration

Frequently Asked Questions

The most commonly asked questions about the Helios Grav theme

What is Helios designed for?

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
Can I use Helios theme on multiple sites?

Per the Grav Premium License, you need to have a license for each use.

Can I extend or customize Helios?

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.

Does Helios work with existing Grav plugins?

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

How does versioning work in Helios?

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.

What search options are available?

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.

$50 Buy Now