codehike-editor

A visual editor for Code Hike-powered MDX content. Edit your MDX files with a editor and insert Code Hike components (focus, mark, collapse, etc.) with a single click.

codehike-editor-demo.mp4

Prerequisites

Code Hike is installed with

npx create-next-app -e https://github.com/code-hike/v1-starter

Quick Start

Run this from the root of your Code Hike project:

npx codehike-editor init

Then start your project and the editor:

npm install
npm run dev      # Start your Next.js app with Code Hike 
npm run editor   # Start the visual editor

Open two tabs: your site at http://localhost:3000 and the editor at http://localhost:4321.

Features

• MDX editor powered by CodeMirror
• File tree sidebar for browsing your app/ directory
• Per-line "+" button to insert Code Hike components
• Auto-injects annotation handlers into your components/code.tsx
• Auto-registers MDX components in mdx-components.tsx when needed
• Auto-saves on edit
• Dependency prompts for components requiring external packages (e.g. shadcn/ui)

Available Components (WIP)

Component	Description
Callout	Inline callout annotations in code
ClassName	Apply CSS classes to code lines/tokens
Code Mentions	Hover-linked text that highlights code lines
Collapse	Collapsible code sections (requires shadcn)
Copy Button	Copy-to-clipboard button on code blocks
Diff	Show added/removed lines
File Name	Display filename above code blocks
Focus	Highlight specific lines, dim others
Fold	Fold/unfold inline code sections
Line Numbers	Custom line number display
Link	Clickable links in code
Mark	Highlight lines or tokens with color
Tooltip	Hover tooltips on code (requires shadcn)
Scrollycoding	Scroll-driven code walkthrough
Slideshow	Step-through code slides
Spotlight	Spotlight-style code presentation

License

MIT LICENSE.