01 / Source

YAML

# A small useful interface. Change the words, then try the preview.
version: 2

page:
  title: Focus desk
  eyebrow: Make a little room for good work.
  description: One intention. A little progress. All yours.

state:
  focus: Finish the first draft
  sessions: 0
  notes: true

view:
  type: stack
  gap: lg
  children:
    - type: input
      label: What are you working on?
      bind: focus
    - type: grid
      columns: 2
      children:
        - type: card
          title: Your next small step
          children:
            - type: heading
              text: "{{focus}}"
              level: 3
            - type: text
              text: Give it your attention. The rest can wait.
              tone: muted
            - type: badge
              text: One thing at a time
        - type: card
          title: A little progress
          children:
            - type: metric
              label: Sessions completed
              value: "{{sessions}}"
            - type: stack
              direction: horizontal
              children:
                - type: button
                  label: Log a session
                  action: increment
                  target: sessions
                - type: button
                  label: Undo one
                  action: decrement
                  target: sessions
                  variant: secondary
    - type: toggle
      label: Show a gentle reminder
      bind: notes
    - type: text
      when: notes
      text: Work for a while. Stretch. Come back when you are ready.
      tone: muted
    - type: divider
    - type: button
      label: Start fresh
      action: reset
      variant: secondary

02 / Output

Preview

Section

Export · starts from YAML state

YAML→HTML