Mastro 👨‍🍳 Docs

Search results

Blog GitHub   Bluesky

The simplest web framework and site generator yet.

Try online with GitHub Install with Deno, Node.js or Bun

As seen on the Internet!

The New Stack

TypeScript.fm

That HTML blog

routes/index.server.ts
import { readMarkdownFiles } from "@mastrojs/markdown";
import { html, htmlToResponse } from "@mastrojs/mastro";
import { Layout } from "../components/Layout.ts";

export const GET = async (req: Request) => {
  const posts = await readMarkdownFiles("data/posts/*.md");
  return htmlToResponse(
    Layout({
      title: "Hello world",
      children: posts.map((post) => html`
        <p>${post.meta.title}</p>
      `)
    })
  );
}
Copied!
components/Layout.ts
import { html, type Html } from "@mastrojs/mastro";

interface Props {
  title: string;
  children: Html;
}

export const Layout = (props: Props) =>
  html`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>${props.title}</title>
      </head>
      <body>
        <h1>${props.title}</h1>
        ${props.children}
      </body>
    </html>
  `;
Copied!

Want to see more? Have a look at some examples, or the source of this website.

Easy for beginners

With Mastro, there is very little to learn – except for the web standards HTML, CSS, and JavaScript.

No installation needed

The popular VS Code editor also runs in the browser: put your first website live without installing anything on your computer.

Get started on GitHub.dev

Learn the fundamentals

Start with HTML and CSS. Then build a blog, and a to-do list app with JavaScript. Finally, run a server with a REST API.

Follow the guide

Powerful for experienced developers

I’ve seen things you people wouldn’t believe. Megabytes of JavaScript on fire in the browser. I watched towers of complex abstractions collapse upon themselves. All those codebases will be lost in time, like tears in rain. Time to let them die.

There are various way to run Mastro. If you’re unsure which runtime to pick, we recommend Deno. For Node.js, pnpm is recommended, although npm and yarn also work.

☆ Mastro on GitHub Docs

Fast for everyone

Websites built with Mastro load fast

  • 100% Performance
  • 100% Accessibility
  • 100% SEO

and build fast. For 500 markdown files:

Mastro 0.5s  🏁
Eleventy 0.7s
Astro 2.2s
Next.js 16.3s

Extensible

The minimal Mastro core package doesn’t come “batteries included”. But it is easily extended, simply by calling functions. There is a growing list of official extensions (usually just a single file wrapping a carefully chosen external dependency), and a lot of NPM and JSR packages you can install and that are know to work well with Mastro.

Reactive Mastro – interactivity simplified

When you need client-side interactivity, add Reactive Mastro – a tiny reactive GUI library for MPAs.

Get started Why Reactive Mastro?

Join the community

We’re looking to build an inclusive community, where people of all kinds of backgrounds and experience levels feel welcome and safe, and help each other out. A place to ask questions and learn new things.

Do you have a question, need help, or want to talk about future plans?

Start a GitHub discussion

Something not working as expected? We consider that a bug.

Open a GitHub issue


Let's keep in touch! 👨‍🍳

Follow us on Bluesky, or add our blog to your RSS reader (feed link).

This is the end of the page. Yet it may be the beginning of your journey with Mastro.

Try online with GitHub Get started