import live-web.dom
import live-web-view.content
import live-web-view.layout
import live-elements-web-server.view
import live-elements-web-server.style

component Playground < PageView{
static any[] use = [
Content, // import styles from Content
ScopedStyle{ src: './index.css'} // use index.css style
]

Content{ // create Content section

H1`Welcome to Live Elements playground!`
P{
T`Click on the open button ` Span{ classes: ['open-icon'] } T` in the top left corner to create a new project or
open one of the examples.`
}
P{
T`After making changes to the code, either use the compile button ` Span{ classes: ['compile-icon'] } T` to save and run the project,
or press `Code`cmd+s`T` on mac or `Code`ctrl+s`T` on a pc to save the current file and run the project.`
}
P{
T`To learn about Live Elements checkout the `
A{ props = { target: '_blank' } href: 'https://liveelements.io/documentation/quick-start-language' T`quick start guide`} T`.`
}
}
}
html body{
background-color: #ddd;
}
&Content{
width: 80vw;
max-width: 600px;
margin: 5rem auto 0;
color: #444;
}
&Content h1{
color: #422C96;
margin-bottom: 2rem;
font-weight: medium;
}
&Content p{
font-weight: 300;
font-size: 18px;
}
&Content code{
background-color: #ccc;
}
&Content .open-icon{
background: #26262bcc url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 -5 35 45" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="5.88867" width="33" height="29.1111" rx="3" stroke="currentColor" stroke-width="2"></rect><rect y="4.88867" width="35" height="31.1111" rx="4" fill="rgb(230, 230, 230)"></rect><path d="M3.88867 2C3.88867 0.895432 4.7841 0 5.88867 0H13.5553C14.6599 0 15.5553 0.89543 15.5553 2V4.88889H3.88867V2Z" fill="rgb(230, 230, 230)"></path></svg>') no-repeat center center;
display: inline-block;
vertical-align: top;
margin: 0 5px;
width: 25px;
height: 28px;
border-radius: 5px;
}

&Content .compile-icon{
background: #26262bcc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 60 60"><polygon points="10,0 50,30 10,60" style="fill: rgb(230, 230, 230);"></polygon></svg>') no-repeat center center;
display: inline-block;
vertical-align: top;
margin: 0 5px;

Console

New

Templates

Examples

UI Examples