Markless

Write plain components. The compiler plans every update before your app runs, and the same component renders in the browser, on a server, or in tests.

Write count++. The compiler plans every update before your app runs. Then render it anywhere.

Pick each of the four places to render it, then click Count.

What does Markless do with your component?

Read the plan. Pick where to render it. Then click Count.

1. Before your app runs, the compiler plans

state count starts at 0.
reads count One piece of text shows it: the number in the button.
click code () => count++ runs on click. It stays unloaded until then.

Your code: Counter.tsrx

import { state } from '@markless/core'; export default function Counter() @{ (runs once, in the browser)  let count = state(0); (state)   <button onClick={() => count++}>Count {count}</button> (click code) (reads count)}

2. Render it anywhere

Where to render the componentIn the browserOn a serverAt build timeIn a test

Counterbuilt in the browser

Same page from every choice.

3. When you click

Times your component ran1in the browser

Times the click code loaded0

Texts updated0

ranRan your component once, in the browser, to build the page.

Simplified. Every place gives the same page and the same click behavior. Build-time rendering is a preview feature today. The list shows what happens, not every internal call.

Notice that every place gives the same page and the same click. Your component runs once.

Start here

The mental model and your first app.

Writing components

The .tsrx language.

State and events

State, computed values, events, and async data.

Build an app

Multi-page apps with file routes.

UI components

Headless parts from @markless/ui.

Tooling

Editor, type checks, tests, and diagnostics.

Under the hood

For contributors and the curious.

Contributing

The repo and your first pull request.

Next: What does the compiler plan, exactly? What is Markless? →