# HTML Output

🌐 The HTML API Strategy is used to create class documentation based on [Javadoc](https://www.oracle.com/java/technologies/javase/javadoc-tool.html).

## 🎨 Modern Themes (New in 5.0)

DocBox 5.0 introduces a completely redesigned HTML output with two professional themes:

### ⚡ Default Theme - Modern SPA

<figure><img src="https://1073404360-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MO7676VkvjpkgbE8J5a%2Fuploads%2FhpC5umQi1MnM31KPVDBc%2Fdocbox-overview.png?alt=media&#x26;token=a59c7d86-5933-4c56-bf89-812d9abb8c37" alt=""><figcaption></figcaption></figure>

The default theme features:

* **Alpine.js-based SPA** - Client-side routing and dynamic filtering
* **🌓 Dark Mode Support** - Toggle between light and dark themes with persistence
* **🔍 Real-time Search** - Live method filtering with keyboard navigation (Enter/Shift+Enter)
* **🎨 Modern UI** - Bootstrap 5, purple gradient accents, emoji indicators
* **📱 Responsive Design** - Mobile-friendly layouts
* **📑 Method Tabs** - Filter by All/Public/Private/Static/Abstract
* **✨ Smooth Scrolling** - Enhanced navigation experience

### 📚 Frames Theme - Traditional Layout

<figure><img src="https://1073404360-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MO7676VkvjpkgbE8J5a%2Fuploads%2FY4KVpgLvL37ioFUz3yn8%2Fdocbox-frames.png?alt=media&#x26;token=94bb7d75-25d0-41a9-a816-acfc41d1bf4b" alt=""><figcaption></figcaption></figure>

The frames theme provides:

* **Frameset-based Layout** - Classic three-panel documentation view
* **Bootstrap 5 Styling** - Modern component design
* **Package Navigation** - Left sidebar with hierarchical tree
* **Dark Mode Support** - Consistent theming across all panels
* **Traditional UX** - Familiar navigation pattern

## 🚀 Instantiate DocBox

Begin by creating an instance of `DocBox`:

```javascript
docbox = new DocBox();
```

### ⚙️ Properties

The following are the properties for this strategy:

* `projectTitle` : The HTML title used in the documentation
* `projectDescription` : The HTML project description
* `outputDir` : The output directory absolute path
* `theme` : (Optional) Theme name - `"default"` or `"frames"` (defaults to `"default"`)

Just pass them in the `docbox.addStrategy()` call:

```javascript
docbox = new DocBox();
docbox.addStrategy( "HTML", {
    projectTitle : "My Docs",
    outputDir    : expandPath( "/mydocs" ),
    theme        : "default"  // or "frames"
} );
```

### 🖄️ Using the Frames Theme

To use the traditional frameset layout:

```javascript
docbox = new DocBox();
docbox.addStrategy( "HTML", {
    projectTitle : "My API Docs",
    outputDir    : expandPath( "/mydocs" ),
    theme        : "frames"
} );
```

## 📝 Generate Documentation

Now that you have an instance of DocBox configured with your strategy and its properties, just execute the `generate()` method with its appropriate arguments:

```javascript
docbox.generate(
    source  = "#expandPath( '/docbox' )",
    mapping = "coldbox",
    excludes = "tests"
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docbox.ortusbooks.com/output-formats/html-output.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.