Home
LiteJS UI is part of full-stack web framework, that is split into three npm packages: • litejs for backend • @litejs/ui for UI • @litejs/cli command line tool.
Build your first LiteJS app with in 5 minute Quick Start Guide.
In short - a UI consists of a presentation layer and a data layer.
• Presentation layer is a combination of templates, routed views, and bindings to tie presentation and data together.
• Data layer is a number of observable Arrays of observable Objects.
LiteJS have a DOM-aware template engine, that turns templates directly to DOM nodes.
Templates use indented CSS selectors for syntax, making them familiar and efficient for developers.
They are parsed and rendered in the browser, removing the need for backend compilation.
| source: my.ui | becomes: my.html |
|---|---|
a#123.link.bold[href="#link"] My link
ul
li Item A
li Item B
.footer>button:disabled[title="Click here"] My button |
<a id="123" class="link bold" href="#link">My link</a>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
<div class="footer">
<button disabled title="Click here">My button</button>
</div> |
Views are nested.
+/ An end-of-line comment starts with a slash
+/ ╭─────────────────╼ plugin `%view` declares a new view
+/ │ ╭────────────╼ name starting with `#` are without a route for structuce
+/╭─┤ ╭──┴──╮ ╭───────╼ parent view name, `#` is <body>
%view #public #
.app
h1 My cool app
/ Here will be the content
%slot
.footer Bye
%view home #public
p Welcome to my page
%view home #public
p This is me
%start- Simplest example just some content
https://github.com/litejs/ui/blob/main/test/example1.html