For developers who prototype

Build interactive UIs with markup, not code

PTML is a declarative language that compiles to React. Describe your layout, state, and interactions in clean, indented markup -- and get a working prototype in minutes, not hours.

The 80/20 trade

PTML makes 80% of building a website trivially easy by making the other 20% impossible.No build configs. No component architecture. No state management libraries. Just describe what you want and it works. By deliberately constraining what you can express -- no imperative logic, no custom data structures -- everything you can express stays simple, readable, and fast to build. If PTML can describe it, PTML makes it effortless.

React vs PTML

A counter with a button. First in React, then in PTML:

React (JSX + hooks)

import { useState } from 'react';.function Counter() {  const [count, setCount] =    useState(0);  return (    <div>      <p>Count: {count}</p>      <button onClick={() =>        setCount(c => c + 1)}>        Increment      </button>    </div>  );}

PTML

state:- count: 0.ptml:> box:  > text: Count: $count  > button:    > text: Increment    - click:      ! set: $count $count 1 | add

Why PTML?

No boilerplate
No imports, no closing tags, no JSX ceremony. Indentation is your structure. Start writing UI immediately.

State that just works
Declare variables, bind them to inputs and text, update them with actions. Two-way binding without useEffect or reducers.

Real interactivity
Buttons, forms, conditionals, loops, and computed values. Not a static mockup -- a working prototype you can click through.

Reusable templates
Define components once, render them anywhere. Import templates and styles across files for modular projects.

This website is built entirely in PTML. The navigation, layout, routing, and all content you see here is PTML rendered by a single React entry point.

Ready to try it?Install the package, write some markup, and see it render. No config required.