micky@garden:~/markdown-preview$cd ..

local markdown workbench

Markdown Live Preview

Write Markdown locally, open and save .md files, share a link to your draft, and keep the rendered preview plus syntax reference in the same place.

editor / renderer

Draft here, preview beside it.

untitled.mdsaved

sync scrolldark preview

markdown

# garden.micky.sh

A small web garden for experiments, AI app playgrounds, vibe-coded toys, and useful interactive sketches.

## What grows here

- Local-first tools that stay useful in the browser
- Tiny experiments that are better as live demos than blog posts
- AI-assisted prototypes, context meters, and writing helpers
- Playful interfaces that test an idea before it becomes a product

## About the creator

Made by [Micky Pichaya Puttekulangkura](https://www.facebook.com/pichaya.puttekulangkura/), who uses this garden for small experiments, useful tools, and playful web sketches.

## A tiny garden checklist

- [x] Keep the page fast
- [x] Make the tools feel handmade
- [x] Let experiments stay small
- [ ] Plant the next strange idea

| Garden action | Use |
| --- | --- |
| **Reset** | Return to this garden note |
| **Copy** | Put the Markdown on the clipboard |
| **PDF** | Print the rendered note when it becomes useful |

```ts
type GardenExperiment = {
  site: "garden.micky.sh";
  handmade: true;
  status: "seed" | "growing" | "live";
};
```

> Raw HTML is treated as text here. This garden preview is for writing notes, not injecting scripts.

preview

gfm

garden.micky.sh

A small web garden for experiments, AI app playgrounds, vibe-coded toys, and useful interactive sketches.

What grows here

Local-first tools that stay useful in the browser
Tiny experiments that are better as live demos than blog posts
AI-assisted prototypes, context meters, and writing helpers
Playful interfaces that test an idea before it becomes a product

About the creator

Made by Micky Pichaya Puttekulangkura, who uses this garden for small experiments, useful tools, and playful web sketches.

A tiny garden checklist

Keep the page fast
Make the tools feel handmade
Let experiments stay small
Plant the next strange idea

Garden action	Use
Reset	Return to this garden note
Copy	Put the Markdown on the clipboard
PDF	Print the rendered note when it becomes useful

type GardenExperiment = {
  site: "garden.micky.sh";
  handmade: true;
  status: "seed" | "growing" | "live";
};

Raw HTML is treated as text here. This garden preview is for writing notes, not injecting scripts.

markdown syntax reference

Complete Markdown syntax reference.

This guide covers the CommonMark basics plus GitHub-flavored Markdown that this preview supports: tables, task lists, strikethroughs, autolinks, and footnotes.

Text

Headings

Use one to six # marks before a heading.

# Heading 1
## Heading 2
### Heading 3
###### Heading 6

Paragraphs

Separate paragraphs with a blank line.

First paragraph with a complete thought.

Second paragraph after a blank line.

Line Breaks

End a line with two spaces, or use a blank line for a new paragraph.

First line with two spaces  
second line after a hard break.

Emphasis

Italic, bold, bold italic, and strikethrough.

*italic*

**bold**

***bold italic***

~~strikethrough~~

Blockquotes

Prefix quoted lines with >.

> A useful note.
>
> - Quotes can contain other Markdown.

Horizontal Rules

Use three or more dashes, asterisks, or underscores.

Before

---

After

Escaped Characters

Use a backslash before Markdown punctuation to show it literally.

\*not italic\*
\# not a heading
\[not a link\]

Lists

Unordered Lists

Use -, *, or + for bullet lists.

- Apples
- Bananas
  - Nested item
- Cherries

Ordered Lists

Use numbers followed by periods.

1. Plan
2. Draft
3. Preview
4. Ship

Task Lists

GitHub-flavored checklists render as checkboxes.

- [x] Write the draft
- [ ] Review the preview
- [ ] Publish

Links And Media

Inline Links

Wrap link text in brackets and the URL in parentheses.

[Garden](https://garden.micky.sh)

Reference Links

Define URLs once and reuse them by label.

Open the [Garden][garden].

[garden]: https://garden.micky.sh

Autolinks

Plain URLs and email addresses can become links.

https://garden.micky.sh

<hello@example.com>

Images

Images use link syntax with a leading exclamation mark.

![Alt text for the image](https://micky.sh/favicon.svg)

Code

Inline Code

Wrap short code fragments with backticks.

Run `pnpm run dev` from the project root.

Fenced Code Blocks

Use triple backticks, optionally with a language label.

```ts
type Note = {
  title: string;
  done: boolean;
};
```

Indented Code Blocks

Indent every line with four spaces.

    pnpm run typecheck
    pnpm run build

Tables And Notes

Tables

Separate columns with pipes and add a dashed divider row.

| Feature | Status |
| --- | --- |
| Preview | live |
| Syntax guide | live |

Aligned Tables

Use colons in the divider row for alignment.

| Left | Center | Right |
| :--- | :---: | ---: |
| A | B | C |

Footnotes

Use a marker in the text and define it later.

Markdown can stay compact.[^1]

[^1]: Footnotes are part of GFM.

Raw HTML

CommonMark allows HTML, but this preview keeps it inert.

<mark>This displays as text here for safety.</mark>

This app intentionally does not render raw HTML.