Scratch is a tool for writing with Markdown and React.

Scratch compiles MDX files into beautiful static websites that can be shared publicly or privately with a single command. It's opinionated about everything so that you can focus on writing without worrying about scaffolding, dependencies, formatting or styling.

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. First, install:

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

or

# Install Scratch
curl -fsSL https://scratch.dev/install.md | claude

Then create a project and start the dev server:

# Create a new project
scratch create

# Start the dev server
scratch dev

Now you're ready to start writing in pages/index.mdx. Use the publish command to share with specific people, your team, or the world:

# Publish your project to a Scratch server. 
# Grant access to specific people, @yourdomain.com, or the world
scratch publish

#What can you do with Scratch?

Scratch turns MDX content into static HTML and Javascript like this:

### Markdown and React

Here's a counter:

<Counter />

Scratch makes it easy to express your ideas with code. Here are a few of the ways you can do that:

#Formatting text

Traditional word processors like Microsoft Word and Google Docs give writers a fixed set of formatting options exposed as buttons in ribbons and drop-down menus.

In contrast, Markdown pares all of this down to the bare essentials, like **bold**, _italics_, and [embedded hyperlinks](http://example.org), expressed directly in plain text.

MDX gives us a way to add an essentially infinite variety of formatting options: use Markdown for the basics and React components for everything else.

For example, you can use inline components for things like highlighting text, marquis effectsmarquis effects, or hover tooltips*like this one.

Scratch doesn't include any of these components out-of-the-box. Instead, you'll create them as the need arises while you write, effectively building a custom word processor for each document. It's a lot of fun!

#Interactive demos

You can also use React components to embed interactive demos into your prose, like this one:

This is handy for writing product specs where embedded demos can communicate how a particular feature should work better than written requirements and wireframes can.

#Publishing your work

Use the scratch publish command to share your writing, either privately with your colleagues or publicly with the world.

For now, you can publish your work for free on scratch.dev. Projects published on scratch.dev must be less than 5MB and will persist for only 30 days.

You can also host your own Scratch server on Cloudflare and protect it with Cloudflare Access for additional security.

#Acknowledgements

Scratch is built on the shoulders of giants:

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

React and MDX make it possible to compile Markdown and code into static websites. Tailwind CSS makes them look good, and makes it easy to style custom components.

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

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

Commander.js scaffolds the CLI.

Scratch server uses hono for routing and Better Auth for authentication.

Additional dependencies can be found in the Scratch repo.