Markdown landing page

Write a landing page as one Markdown document — a title block, a few headings, and a fenced block wherever you want a grid of features, a list of steps or a FAQ — paste it here and see the page it describes, rendered with the same sections this site is built with. Free, no account, and nothing is stored: the document stays in your browser.

What it does, and why it is here

A landing page is a short, fixed set of pieces: a hero that says what the thing is, a grid of three or four reasons, a how-it-works list, a few questions, a call to action. Page builders let you drag those pieces around, and the result lives in the builder: you cannot diff it, version it, or keep it in the same repository as the thing it sells.

This tool takes the other route. The page is a document. Prose is Markdown. A section that is more than prose — a features grid, a FAQ — is a fenced block naming the section, with its data written as YAML inside. The composer reads the document, checks every section against its own schema, and renders the preview below the form. Edit, press the button, look again. When the page is what you want, the document is yours to keep wherever you keep text.

It exists on this site because the sections it renders are the ones this site renders its own pages with. The preview is not an approximation of a page: it is the page, minus an address.

What you fill in

One field: Your page, as Markdown. It opens on a complete example, so the first press of the button shows a whole page rather than an empty one, and the cheat sheet under the field lists the sections you may name and the keys each one reads.

The document has four kinds of lines, and they decide everything:

• The front matter — a YAML block between two --- lines at the very top — becomes the hero. It reads title, description, kicker, and a call to action as cta.label and cta.url. Without a title, there is no hero.
• A level-2 heading (## Like this) opens a section. Everything under it is prose: paragraphs, lists, links, emphasis, tables, all rendered as Markdown. Raw HTML is shown as text, never run.
• A fenced block naming a section — ```faq on a line of its own, YAML below it, ``` to close — becomes that section. A heading written right above the fence titles it, unless the YAML names its own title. A fence naming anything else, ```bash for instance, stays a code sample.
• An address alone in its paragraph becomes a component of this site: the page of a card drawn by one of the card tools, or its picture, and a tool’s live widget become a figure; a form built with the form editor becomes a frame with the form inside; any other address stays a link.

The document is capped at 60,000 characters, 40 sections and 24 rows per list — a long landing page runs to a fifth of the first figure. Nested YAML is flattened to dotted keys, so cta: {label: Go, url: /} and cta.label: Go are the same thing.

What you get back

The preview, under the form: the hero, then every section in the order you wrote it, rendered by the site’s own templates — the grid of features, the numbered steps, the accordion of questions, the spotlight with its button. What you see is what a page made of this document looks like on this site; the theme decides colours and spacing, the document decides everything else.

A refusal, when the document cannot be composed. The form comes back with your text intact and one sentence saying what to change: a fence left open, a section body that is not a YAML mapping, a value the section’s schema does not accept, an image that does not live on this site. Nothing is silently dropped or fixed: a document that renders is a document that passed every check.

Your draft, next time. The document is saved in your browser as you type — in this browser, for this address, never on the server — and put back when you return. A notice says so, with a button to start again from the example.

What it does not do

• It does not publish. The preview has no address; there is nothing to share and nothing to index. A page with an address is a page on a site, and that is a different thing from a document.
• It does not load anything from a third party. Images, icons and logos must be served by this site — a card drawn by one of its tools, a bundled asset — so a preview never fetches from a host the author chose. Links may point anywhere over https.
• It does not accept HTML, styles or scripts. Raw HTML in the prose is rendered as text; there is no way to attach a stylesheet. The sections are the vocabulary, and the theme is the look.
• It does not keep anything on the server. The document travels with the request and the answer, and stays in your browser tab and its storage. Clear the storage and it is gone.

The sections, and what each one reads

Every section is a fenced block whose info string is the section’s name. The keys below are the YAML keys the section reads; a list key takes rows, each a small mapping.

An icon is a Font Awesome class list such as fa-solid fa-bolt, or the path of an image on this site. The figure and frame sections are what an address alone in its paragraph turns into; writing them by hand is the way to add a caption.

Questions

Can I use my own images?

Only from this site: a card drawn by one of the card tools, a tool’s widget, a bundled asset. An image hosted elsewhere is refused, with the address it found, so that a preview never loads anything from a host the author chose. Links, on the other hand, may go anywhere over https.

Can I put a form in the page?

Yes. Build it with the form editor on this site, copy the address it gives you, and paste that address alone in its paragraph: the page shows the form in a frame, with a link under it to open the form in its own page.

What happens to the document?

It goes to the server with the request, comes back rendered, and is kept in your browser’s storage for next time. The server keeps nothing. There is no account, no address, and no way for anyone else to see it.

Why does the page say a section is not a mapping?

The body of a fenced section is YAML, and it must be a mapping: key: value lines, with lists written as rows starting with a dash. A body that is a bare list, or a plain sentence, has no keys the section can read. The cheat sheet under the field shows the keys each section expects.

Can I write a code sample?

Yes. A fence naming a language, ```bash or ```python, is a code sample and stays one, headings inside it included. Only a fence naming one of the sections above is read as a section.

Is the preview the same as a published page?

It is rendered by the same section templates and the same theme; the hero, the grids and the questions look exactly as they would on a page of this site. What differs is everything a page has and a preview does not: an address, a place in the site, a footer, a reason to be indexed.

Sources and further reading

• CommonMark specification — the Markdown dialect the prose is read as, fenced blocks and their info strings included.
• YAML 1.2 specification — the syntax of a section’s body and of the front matter.
• schema.org FAQPage — the structured data a faq section emits, which search engines read.