Quick Start

Get your custom Claude Code statusline running in under five minutes by following these steps to configure, generate, and install your script.

The editor is a standalone web application. You do not need to install a web server or Node.js.

The editor provides a real-time Preview panel that mimics the Claude Code terminal environment.

Toggle & Reorder: Use the Blocks panel to enable or disable segments like "Rate 5h" or "Context %". Drag the ⠿ handle to change the order of elements.
Customize Styles: Click on any block to open its settings. You can modify:
- Colors: Choose from the ANSI 256 color palette.
- Visuals: Switch between bar styles (Classic, Diamond, Dot, Line, Gradient, or Emoji).
- Thresholds: For the Context % block, set specific colors for different usage levels (e.g., green for <50%, red for >80%).
Global Separators: Adjust the character (e.g., |, ·) and color used between blocks in the Separator settings.

Once you are satisfied with the preview, scroll down to the Output section.

Option A (Manual): Click Copy script to copy the full Bash source code.
Option B (One-liner): Click Copy install cmd to copy a base64-encoded command that automatically creates the file and sets permissions.

To activate your new statusline, you must point Claude Code to your generated script.

Save the script: If you copied the source manually, save it to ~/.claude/statusline.sh and make it executable:
```
chmod +x ~/.claude/statusline.sh
```
Update Settings: Open your Claude Code configuration file (usually located at ~/.claude/settings.json) and add or update the statusline field:
```
{
  "statusline": "~/.claude/statusline.sh"
}
```
Restart Claude: Launch claude in your terminal to see your new statusline in action.

The generated script relies on standard Unix utilities and platform-specific credential managers to fetch real-time usage data.

Note: macOS users do not require extra dependencies for credential storage as the script utilizes the native security (Keychain) tool.