OpenCode Tips

A searchable, categorized reference for every tip in OpenCode — the open-source AI coding agent. Each tip includes a beginner-friendly description that explains exactly what it does, why you'd use it, and how it works.

Live Site

Features

• 99 tips with detailed, beginner-friendly descriptions
• Real-time search with highlighted matches
• 16 category filters — Agents, Config, Permissions, Themes, CLI, GitHub, and more
• Keyboard shortcut badges — visual keycap styling for shortcuts like Ctrl + X + N
• 3 themes — Terminal (dark monospace), Minimal (light clean), OpenCode (dark purple)
• Click to expand each tip for the full explanation
• Copy to clipboard on each tip
• Print-friendly — CSS print styles expand all tips for clean printouts
• Accessible — ARIA attributes, keyboard navigation, skip-to-content, focus outlines
• Zero dependencies — static HTML/CSS/JS, no build step

Quick Start

# Clone
git clone https://github.com/ShreeMulay/opencode-tips.git
cd opencode-tips

# Serve locally
python3 -m http.server 8888
# Open http://localhost:8888

Or just open index.html via a local server (fetch requires HTTP, not file://).

How It Stays Current

Automated Sync (Weekly)

A GitHub Action runs every Monday:

1. Fetches the latest tips.tsx from the OpenCode repo
2. Extracts all tip strings
3. Compares against the current tips.json
4. If there are differences, opens a PR with new tips (placeholder descriptions) and flags for removed tips

Manual Sync

# Dry run — see what changed
./scripts/sync-tips.sh

# Apply changes to tips.json
./scripts/sync-tips.sh --apply

Community

Anyone can submit PRs to improve descriptions, fix categories, add keywords, or enhance the UI. See CONTRIBUTING.md.

Project Structure

opencode-tips/
├── index.html                           # Main page
├── style.css                            # 3 themes + print + a11y
├── app.js                               # Search, filter, expand, copy, themes
├── tips.json                            # All tip data (the source of truth)
├── scripts/
│   ├── extract-tips.py                  # Parse tips.tsx → JSON
│   └── sync-tips.sh                     # Orchestrate sync + diff
├── .github/workflows/
│   └── sync-tips.yml                    # Weekly auto-sync workflow
├── CONTRIBUTING.md                      # Contributor guide
├── LICENSE                              # MIT
└── .nojekyll                            # GitHub Pages config

Themes

Terminal	Minimal	OpenCode
Dark background, monospace font, green/amber accents	Light/clean, system fonts, shadcn-inspired	Dark with purple/blue gradients matching opencode.ai

Theme selection persists in localStorage.

Credits

• Tips sourced from OpenCode (MIT License)
• Descriptions written and maintained by the community
• Built with zero dependencies — vanilla HTML, CSS, and JavaScript

License

MIT