Writing Lofi: The Syntax

Write text

Some simple text, easy!

Lofi makes text its first priority.

Unlike HTML, don’t worry about special characters like & or < getting in the way. Just write!

Add hashtags

When you want your text to become something more, add #hashtags.

It could become a #field, an #image, or a #button. Just add the hashtag after your text.

Click me! #button
First name #field
A dreamy picture of the sea #image

Smarter hashtags

Sometimes you want to give a little more information. For that, you follow the hashtag with a colon and some text.

For instance, an #image could have #url: https://placehold.it/200x200

Or, an #alert could have a #variation: success

Or, a #table could have a #title: Annual growth

#image #url: https://placehold.it/200x200
#alert #variation: success
#table #title: Annual growth

Lists and nested content

Often content is two dimensional. That’s where lists come in.

You could have a shopping list:

#shopping-list
- Milk
- Bread
- Bananas
- Chocolate

Or a navigation:

#nav
- Home #link: /
- About #link: /about
- Plans #link: /plans
- Blog #link: /blog

Reuse pieces

Reusing content is key to keeping things manageable. Repetition can lead to inconsistencies and more manual work.

Mentions let you separate the content from the element:

@title: Click me

@title #button

Or make a piece content, such as a list, and use that multiple times:

@headers:
- First name
- Last name
- Age
- Favorite color

#table #title: My family #headers: @headers

#table #title: My partner’s family #headers: @headers

The content could even come from an external source.