A macOS markdown "scratchpad" editor with WYSIWYG editing, live math preview, and a global hotkey (cmd + opt + ctrl + o) to invoke it from anywhere.
Built on Electron, CodeMirror 6, and KaTeX. TypeScript throughout.
I built this for myself, both because I have been wanting an app like this for a long time (Typora previewing to edit math quickly, scratchpad feature to write from anywhere, relatively nice to look at) and because I wanted to see if "vibe coding" could actually work.
I did not write a single line of this project, and I don't know "TypeScript". In this sense, it is both a success and a failure, the app seems to work, but it is more than likely buggy. Use as your own risk, and if you find potential improvements or bug-fixing, please fork or propose a pull request. Hopefully this will be useful for somebody else than me!
Live math rendering. Inline ($...$) and display ($$...$$) equations render with KaTeX as you type. Click any equation to edit the raw LaTeX; move away and it re-renders.
Live markdown preview. Headings, bold, italic, links, lists, blockquotes, and code blocks render in-place. Cursor in: raw syntax. Cursor out: rendered.
Typography. IBM Plex Mono at 18px, 72-character column width, line height 1.7. iA Writer-inspired design.
Light and dark themes. Follows macOS system appearance automatically.
Tabs. Multiple files open at once. Each tab preserves undo history and cursor position. Cmd+T to create, Cmd+W to close, Ctrl+Tab to switch.
Autosave. Files save 2 seconds after your last edit. File watching detects external changes.
Font size control. Cmd+ / Cmd- to adjust. Cmd+0 to reset.
Raw markdown mode. Press cmd + : to reveal the original markdown and remove all the previewing.
macOS native. Hidden title bar with inset traffic lights, vibrancy, custom app icon.
Fully vibe-coded with Claude Code. The SPEC.md and DESIGN_GUIDE.md served as blueprints.
- Node.js 18+
- macOS
git clone https://github.com/your-username/chalk.git
cd chalk
npm install
npm start# Package the app
npm run package
# Build a distributable .dmg / .zip
npm run makeThe packaged app will be in the out/ directory.
| Layer | Technology |
|---|---|
| Framework | Electron (Electron Forge + Vite) |
| Editor | CodeMirror 6 |
| Math rendering | KaTeX |
| Markdown parsing | @codemirror/lang-markdown + @lezer/markdown |
| Typography | IBM Plex Mono (editor), IBM Plex Sans (headings) |
| Language | TypeScript |
MIT