---
theme: synthwave
title: PathMX — A local-first framework for interactive websites
description: Build fast, interactive websites from readable files. PathMX keeps people and agents working from the same source and grows through plugins.
---

[@layout.default]: ./layouts/site.layout.md
[@map Documentation types]: ./docs/docs.map.md
[@previews]: ./examples/previews/preview.components.md
[@styles]: ./home.css

<div class="home-hero home-section" data-pmx-prose="off">
<div class="home-intro">

# Build interactive web experiences using eXecutable markdown.

<p class="home-lead">

PathMX is a methodology and web framework built for humans and agents. Use markdown files with normal web technologies to build rich interactive experiences.

</p>

<div class="home-actions">
<a class="home-button" href="./docs/start/first-site.guide.md">Get started</a>
<a href="./examples/index.md">See what it can do <span aria-hidden="true">→</span></a>
</div>

</div>

<div class="home-start">

## Start with a folder.

<fieldset class="home-start-toggle" aria-label="Quickstart audience">
<label><input type="radio" name="quickstart-audience" value="humans" checked /><span>Humans</span></label>
<label><input type="radio" name="quickstart-audience" value="agents" /><span>Agents</span></label>
</fieldset>

<div class="home-start-panels">
<div class="home-start-human">

With [Bun 1.4+ installed](./docs/start/install.guide.md), run:

```sh
bunx @pathmx/core@beta init my-site
cd my-site
bun run dev
```

Open [localhost:3000](http://localhost:3000), edit `paths/index.md`, and save.
Your site updates as you work.

[Follow the quickstart](./docs/start/first-site.guide.md) for the complete walkthrough.

</div>
<div class="home-start-agent">

Give your agent a starting point:

```text
Read https://docs.pathmx.dev/docs/agents/index.md
and help me build a PathMX site.
```

Add what you'd like to build. The guide helps your agent get started and find the right docs.

[Explore the agent guide](./docs/agents/index.md)

</div>
</div>
</div>
</div>

---

<div class="home-section" data-pmx-prose="off">

## One framework, many kinds of experience.

Use markdown files + HTML to build a documentation site, a browsable collection, an interactive lesson, or a full custom application.

<div class="home-examples">
<a class="home-example" href="./examples/bookcase/index.demo.md">
<div class="home-preview home-books" aria-hidden="true">
<book-preview />
</div>
<h3>Explore a collection</h3>
<p>Turn a folder of typed, linked notes into a site people can browse.</p>
</a>
<a class="home-example" href="./examples/chess/opera-game.demo.md">
<div class="home-preview home-chess">
<opera-preview />
</div>
<h3>Build a custom interface</h3>
<p>Mix explanations with domain components, actions, and persistent state.</p>
</a>
<a class="home-example" href="./examples/color-context.demo.md">
<div class="home-preview home-lesson" aria-hidden="true">
<color-preview />
</div>
<h3>Guide an experience</h3>
<p>Read, focus, and present the same material with the optional Player Plugin.</p>
</a>
</div>
</div>

---

<div class="home-section home-why" data-pmx-prose="off">
<div class="home-why-intro">

## Your source stays the source.

PathMX is built with the [file-over-app](https://stephango.com/file-over-app) philosophy. Your content and UX are authored as plain text files and are readable, local, and authorable by humans and agents alike.

<div class="home-actions">
<a class="home-button" href="./docs/methodology.md">Explore the methodology</a>
<a href="./docs/agents/index.md">PathMX for agents <span aria-hidden="true">→</span></a>
</div>

</div>
<div class="home-reasons">

### Local-first

Markdown files in a folder are all you need to use PathMX. The server runs offline and stays that way until you want to publish.

### Fast and live

Built for speed. By default we use Bun's extremely fast runtime and markdown parsing. Content changes are live and hot reloaded automatically.

### Plugin-based

A small core powers robust features through plugins. The [plugin system](./docs/extend/plugins.guide.md) allows PathMX to extend to practically any domain.

</div>
</div>

---

<div class="home-section home-research" data-pmx-prose="off">

## Shaped by real-world teaching and learning.

PathMX began as a way to create diffrentiated and personalized curriculum in a normal classroom setting and has been deployed to several different unique, personalized learning experiences inside and outside acadamia.

See [“Toward True Differentiated Instruction with PathMX and Curriculum as Code”](https://dl.acm.org/doi/10.5555/3820586.3820601) for a published study on the methodology in a real-world CS classroom.

<div class="home-actions">
<a class="home-button" href="./docs/methodology.md">Read the methodology</a>
<a href="https://pathmx.dev/files/pathmx-paper.pdf">Read the paper</a>
</div>

</div>
