import live-web.dom
import live-elements-web-server.view
component TemperatureConverter < PageView{
Body{
// celsius input
Input{ id: celsius; type: 'number'; value: 0 }
Span`°C`
Span`=`
Span{ // fahrenheit output
// bind to celsius.currentValue
T{ text: (celsius.currentValue * 9/5) + 32 }
}
Span`°F`
}
}Live Elements is a language extension for JavaScript and TypeScript that replaces XML and XML-like languages, and introduces powerful features. Why choose Live Elements?
In Live Elements, a property can bind to another property, and update whenever the other property changes. This approach provides a much cleaner and more intuitive way to handle state management.
Take the classic counter example. It's stripped down to just 3 lines of code:
Button{ number count: 0; on click: () => { this.count++ }
T{ text: `Clicked #${parent.count}` }
}The text property from T is bound to the count property from Button. The full example is below:
import live-web.dom
import live-elements-web-server.view
component Counter < PageView{
Button{ number count: 0; on click:() => { this.count++ };
T{ text: `Clicked #${parent.count}` }
}
}Live Elemements has an intuitive syntax for creating reusable and customizable components:
import live-web.dom
import live-elements-web-server.view
// declare Restaurant component
component Restaurant < Div{
id: restaurant
string name: ''
string image: ''
string description: ''
Img{ src: restaurant.image }
Div{
H1{ T{ text: restaurant.name }}
P{ T{ text: restaurant.description }}
}
}
component Index < PageView{
Body{
// use Restaurant component
Restaurant{
name: 'Restaurant #1'
image: '/img1.png'
description: 'Restaurant #1 description.'
}
Restaurant{ /* ... */ }
Restaurant{ /* ... */ }
}
}Restaurant #1 description.
Restaurant #2 description.
Restaurant #3 description.
Components can encapsulate not just logic and structure, but also their styles. This means that when you use a component, it's fully self-contained and ready to use with no additional setup required.
The examples below do not require any additonal css to work besides the one imported from the components themselves.
import live-web.dom
import live-web-view.content
import live-web-view.overlay
import live-elements-web-server.view
component Index < PageView{
static any[] use = [
UlV,
Dropdown
]
Dropdown{
DropdownToggleButton{
T`Dropdown`
}
DropdownContent{
UlV{ border: true
Li`Item 1`
Li`Item 2`
Li`Item 3`
}
}
}
}import live-web.dom
import live-web-view.layout
import live-elements-web-server.view
import live-elements-web-server.style
component Index < PageView{
static any[] use = [SplitLayout]
SplitLayout{
breakPoint: false
panes: [
SplitPane{
P`Drag the slider --> `
},
SplitPane{
P`<-- Drag the slider`
}
]
}
}Drag the slider -->
<-- Drag the slider
import live-web.dom
import live-web-view.content
import live-elements-web-server.view
component Sortable < PageView{
static any[] use = [UlVSort]
Body{
UlVSort{
LiSort{ key: '1' T`Item 1` }
LiSort{ key: '2' T`Item 2` }
LiSort{ key: '3' T`Item 3` }
LiSort{ key: '4' T`Item 4` }
LiSort{ key: '5' T`Item 5` }
}
}
}While not as minimal as Markdown, Live Elements is still more concise and readable than HTML or other XML-like languages. It avoids cluttering the content with too many annotations. Additionally, it supports creating custom components, giving you complete control to manage your content as you see fit.
import live-web.dom
import live-web-view.content
import live-elements-web-server.view
import live-elements-web-server.style
component MarkupDocument < PageView{
static any[] use = [
// import styles from live-web-view.content.Content
Content,
ScopedStyle{ src: './index.css'}
]
Content{
// similar as calling "new H1('This is a heading')" in js
H1`This is a heading`
// the same as calling "new P('This is a heading')" in js
P`This is a paragraph`
P{ // call new T(...), new B(...), ...
T`This is a second paragraph, with `B`bold`T` and `I`italic`T` text.
This paragraph is written on multiple lines.`
}
Pre{
Code```
Source code
on multiple lines
```
}
}
}This is a paragraph
This is a second paragraph, with bold and italic text. This paragraph is written on multiple lines.
Source code
on multiple linesLive Elements introduces the concept of components, which are central to its development model. If you already know JavaScript, you'll find the syntax very familiar, with the main difference being how components are declared and created. Once you grasp this concept, using Live Elements becomes straightforward and intuitive.
You can begin by exploring the language itself or diving into practical guides to get hands-on experience.
Live elements is split into 2 main repositories:
Repository with web packages for live elements, including:
The compiler package, which compiles live elements-code to javascript.
Previously, issues were managed privately on GitLab as it was easier to handle at the time. However, to simplify contributions and collaboration, everything has been moved to GitHub. From now on, all issues will be tracked on GitHub, so feel free to suggest features, report bugs, or share your ideas.