Getting started

The easiest way to try out FicusJS is using a hello world example.

Create an index.html file and copy the following between the <body> tags.


<script type="module">
import { html, renderer } from ''
import { createComponent } from ''

createComponent('hello-world', {
  handleClick (e) {
    window.alert('Hello to you!')
  render () {
    return html`<div>
<p>Test component</p>
<button type="button" @click="${this.handleClick}">Click me!</button>

Alternatively, fork this Codepen to see it in action -

The hello world example creates a new custom element using the createComponent function and registers it to the hello-world tag. It uses the lit-html renderer for creating HTML from tagged template literals.

Once registered, the tag can be used multiple times in HTML and instances can be programmatically obtained using document.querySelector or element.querySelector