markframe

An indentation-based DSL and live IDE for mobile prototyping.

Developer tools · Web

Open markframe Source on GitHub
v0.1.0 Web MIT Zero backend

Try it now

Build out a full mobile app mock out in minutes.

binbuf.github.io/markframe
Open in a new tab

See a full view in just a few lines

Indentation defines hierarchy, so a full login layout reads like a short outline instead of a JSON tree.

12+ device frames

iPhone SE to iPad Pro, Pixel 7 to Galaxy Tab S9, portrait or landscape, with safe areas handled.

iOS or Material in one click

Flip the entire preview between platform themes without touching your markup.

30+ ready components

Navbar, Card, List, Sheet, Popup, Dialog, FAB, Segmented, Stepper, Stat and more, across six categories.

Live feedback

A 200 ms debounced preview inside a Monaco editor, with shortcuts for device, theme, orientation and zoom.

Zero backend

Files open and save through the File System Access API and never leave your machine.

Under the hood

Quickly prototype your mobile apps

  • Language specification — syntax, component props and examples in the repository
  • Design and UI/UX docs — explaining the architecture and how to build good screens with it
  • Konsta UI components — so previews match real iOS and Material patterns
  • Monaco editor — with the shortcuts developers already know
  • MIT licensed — fork it, embed it, or build the VS Code extension on the roadmap

markframe FAQ

Does markframe generate real app code?

Not today. It renders high-fidelity previews for prototyping and review; exporting templates to functional UI boilerplate is on the roadmap.

Is markframe free?

Yes. It is MIT licensed, and the source is public on GitHub.

Where are my files stored?

Locally, through the browser’s File System Access API. Screens are saved as .mf files on your disk, and nothing is uploaded.

Which browsers work?

Chrome, Edge and Safari 16 or later support local file open and save. The editor and preview work in any modern browser.

Can I use it offline or self-host it?

Yes. It is a static single-page app: load it once and keep the tab, or build the repository and host the output anywhere.

Is markframe just for AI-generated screens?

No. It is a fast prototyping format on its own, and a login screen takes six lines. It is designed so that LLM-generated markup is also easy for humans to review.

Keep browsing

More from the collection.

All apps →
Esc