Project Overview

Example

Here is a short example to illustrate interactive components:

const { Component, useState, mount, xml } = tele;

class Counter extends Component {
  static template = xml`
    <button t-on-click="() => state.value = state.value + props.increment">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class Root extends Component {
  static template = xml`
    <span>Hello Tele</span>
    <Counter increment="2"/>`;

  static components = { Counter };
}

mount(Root, document.body);

Note that the counter component is made reactive with the useState hook. Also, all examples here uses the xml helper to define inline templates. But this is not mandatory, many applications will load templates separately.

More interesting examples can be found on the playground application.

Documentation

Learning Tele

Are you new to Tele? This is the place to start!

• Tutorial: create a TodoList application
• How to start an Tele project
• How to test Components

Reference

• Overview
• App
• Component
• Component Lifecycle
• Concurrency Model
• Dev mode
• Dynamic sub components
• Environment
• Error Handling
• Event Handling
• Form Input Bindings
• Fragments
• Hooks
• Loading Templates
• Mounting a component
• Portal
• Precompiling templates
• Props
• Props Validation
• Reactivity
• Rendering SVG
• Refs
• Slots
• Sub components
• Sub templates
• Templates (Qweb)
• Translations
• Utils

Other Topics

• Notes On Tele Architecture
• Comparison with React/Vue
• Why did Tele build Tele?
• Changelog (from tele 1.x to 2.x)
• Notes on compiled templates

Installing Tele

Tele is available on npm and can be installed with the following command:

npm install @tele-studio/tele

If you want to use a simple <script> tag, the last release can be downloaded here:

• tele