Scratch
GitHubX

Scratch logo

Scratch is a tool for writing with Markdown and React.

Write in Markdown and embed React components right in your text. Scratch compiles your work into beautiful static websites (like this one) that can be hosted anywhere.

Scratch was designed for collaborative writing with coding agents like Claude Code. Use your favorite editor to write in Markdown and ask an agent for help when it's easier to express yourself with code.

#Quick Start

Scratch requires no configuration so it's easy to get started:

# Install scratch
curl -fsSL https://scratch.dev/install.sh | bash

# Create a new project
scratch create

# Start the dev server
scratch dev

Now you're ready to start writing in pages/index.mdx.

#What can you do with Scratch?

Scratch lets you embed interactive React components into your writing, like this counter:

0

You can use components to style text or embed fully working demos in your product specs:

Todo List Demo

0 remaining

Scratch uses Tailwind Typography to render your prose with a clean aesthetic. It supports Github-flavored Markdown out of the box. Code blocks use syntax highlighting by Shiki.

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("World"))

Unlike traditional word processors, Scratch makes it easy to express any idea. If you can describe it to a coding agent, you can add it to your document:

0

"Make a component that looks like a TV screen with a bouncing DVD logo. Count the number of times...

Collaborating with AI makes writing more fun. Scratch makes that easy.

#Acknowledgements

Bun for lightning-fast builds, development with HMR, native typescript support, and a portable executable.

React and MDX make it possible to write with Markdown and code. Tailwind CSS makes component styling easy.

Content preprocessing relies on unified, with remark-gfm for GitHub Flavored Markdown and remark-frontmatter plus gray-matter for parsing front matter.

Shiki provides beautiful, accurate syntax highlighting with VS Code's grammar engine.

Commander.js scaffolds the CLI.

Additional dependencies: fast-glob, acorn, @mdx-js/esbuild, @shikijs/rehype, @types/mdast, unist-util-visit, unist-util-is.