Live Elements

Welcome to the documentation for Live Elements. This documentation is a guide to learning everything Live Elements has to offer. Whether you're just starting out or looking to dive deeper into advanced features, this index will help you navigate the various resources, tutorials, and references available.

Contents

  • Quick Start: Learn about Live Elements step by step through practical examples.
  • Tutorials: Continuing on the quick start tutorial, this section covers tutorials for different use cases.
  • Language: Covers all details of the Live Elements language.
  • Web API: Covers the API and features used to build web applications.

Where to start

  • We recommend starting with the Quick Start tutorial. It goes through the language and how to use it for the web, together with a lot of practical examples. As you become more comfortable, the tutorials will cover even more examples.
  • If you just want an overview of the language, you can check the language overview page.
  • If you want to see and try out different examples, you can setup a playground and open examples from there.

Playground

You can try out examples in the live elements playground, or you can setup a playground on your local machine very quickly. Simply use lvweb to initialize one:

mkdir playground # create an empty folder
cd playground
npm i live-elements-web-cli # install lvweb
npx lvweb init --template playground # create a playground
npx lvweb serve # run the playground

The playground should be running at localhost:8080. Using the 'open' icon in the top left corner of the playground app, you can browse through the available examples.

Sections in detail

Tutorials

  • Static Pages: learn how to create a static website.
  • Routes: learn how to manage server-side and client side routes.
  • Scoped Styles: learn how to create components with scoped styles.

Language

Web API

  • DOM: Functionality to manage and manipulate the DOM.
  • Bundle: Bundle file features.