Scratchwork is a tool for writing with Markdown and React.

Scratchwork 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.

Scratchwork 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

Scratchwork requires no configuration so it's easy to get started. First, install:

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

or

# Install Scratchwork
curl -fsSL https://scratchwork.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 Scratchwork server.
# Grant access to specific people, @yourdomain.com, or the world
scratch publish

#What can you do with Scratchwork?

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

### Markdown and React

Here's a counter:

<Counter />

Scratchwork 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.

Scratchwork 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 scratchwork.dev. Projects published on scratchwork.dev must be less than 5MB and will persist for only 30 days.

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

#Acknowledgements

Scratchwork is built on the shoulders of giants:

Scratchwork 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.

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

Additional dependencies can be found in the Scratchwork repo.