Transform any technical content into a beautiful, interactive learning experience — in minutes, not days.

Most technical documentation is walls of text that nobody wants to read. This template exists to solve that.

The problem: You have raw technical content (notes, guides, tutorials) but turning it into a polished, publishable site takes forever — setting up build tools, designing themes, creating diagrams, adding interactivity.

The solution: Drop your markdown into raw/, let Claude transform it following CLAUDE.md guidelines, and get a production-ready documentation site with:

• Visual diagrams that actually explain concepts
• Interactive code that readers can run and modify
• A teaching structure that builds understanding progressively
• Professional design that works on any device

The vision: Technical knowledge should be accessible and learnable, not locked in dense PDFs or scattered notes. This template makes publishing high-quality technical content as easy as writing markdown.

• Red Theme — Professional color scheme with dark mode
• React Diagram Components — Box, Arrow, ProcessFlow, TreeDiagram, CardGrid, and more
• Interactive Code — Run Python (Pyodide) and JavaScript in the browser
• GitHub Pages Ready — Auto-deploys via GitHub Actions
• Pedagogical Structure — Built-in teaching methodology guidelines

Click "Use this template" on GitHub, or:

gh repo create my-docs --template YOUR_USERNAME/docs-template --public --clone cd my-docs

Edit docs/docusaurus.config.ts:

const PROJECT_NAME = "My Guide"; // Your project name const GITHUB_USERNAME = "your-username"; // Your GitHub username const REPO_NAME = "my-docs"; // Your repo name

1. Put raw markdown files in raw/ folder
2. Transform them following CLAUDE.md guidelines
3. Output to docs/docs/

cd docs && npm install && npm run build git add . && git commit -m "Add content" && git push

Enable GitHub Pages: Settings → Pages → Source: GitHub Actions

├── CLAUDE.md # Content transformation guidelines ├── raw/ # Put raw markdown here ├── docs/ # Docusaurus project │ ├── docs/ # Transformed content goes here │ ├── src/ │ │ ├── components/diagrams/ # React diagram components │ │ └── css/custom.css # Custom theme │ ├── static/img/ # Images and favicon │ ├── docusaurus.config.ts │ └── sidebars.ts └── .github/workflows/ # Auto-deployment 

import { Row, Box, Arrow, colors } from "@site/src/components/diagrams"; <Row gap="md"> <Box color={colors.blue}>Input</Box> <Arrow direction="right" /> <Box color={colors.green}>Output</Box> </Row>;

See CLAUDE.md for full component documentation.

Python (works out of box):

import PythonRunner from "@site/src/components/PythonRunner"; <PythonRunner code={`print("Hello!")`} title="Example" />;

C++, Go, Rust, Java, etc:

import CodeRunner from "@site/src/components/CodeRunner"; <CodeRunner language="cpp" code={`#include <iostream> int main() { std::cout << "Hello!"; }`} />;

JavaScript (live codeblock):

```jsx live function Demo() { return <button>Click</button>; } ```

Supported: python, cpp, c, go, rust, java, csharp, ruby, php, kotlin, swift, bash, sql

Follow the CLAUDE.md file for:

• Three-part explanations (plain English → technical → why it matters)
• Numbered TOC and header structure
• Insight and warning boxes
• No footnotes, no Mermaid

MIT