Start Here

To start using GreenLight all you need to do is include the script tag and initialize it with a root element.

<div id="app-root">
  <div gl-controller="HelloWorldController">
    <p gl-bind="message"></p>
  </div>
</div>

<script src="greenlight.js"></script>
<script>
  GreenLight.init(document.getElementById("app-root"));

  const Controller = GreenLight.controller("HelloWorldController");

  Controller.$store.set("message", "Helloooooooo");
</script>

Create a counter

Let's see a basic example for our first project with GreenLight. Here's how to implement it:

<div gl-controller="CounterController">
  <button gl-on="click:incrementCounter">Add</button>
  <span gl-bind="counter"></span>
</div>

<script>
  const Controller = GreenLight.controller("CounterController");

  Controller.$store.set("counter", 0);

  Controller.on("incrementCounter", () => {
    const currentCounter = Controller.$store.get("counter");
    Controller.$store.set("counter", currentCounter + 1);
  });
</script>

As you can see, is as simple as that to create reactive elements in your HTML file.

Search Input

Now, let's use binding in our advantage. For this, we won't need any JavaScript.

<div gl-controller="SearchController">
  <input placeholder="Search here" gl-bind="searchField" />
  <p gl-template="Searching for {searchField}"></p>
</div>

This is the power of GreenLight. You don't need to worry about how and where data changes, as it handles it for you. Focus on how to utilize the data changed in your advantage.

Spice things up

Ok, now we got a simple search bar but it doesn't do anything. Let's add an effect on the searchField variable and create a fully functioning search bar.

For this example, I'm going to create a search bar for JS frameworks.

<div gl-controller="SearchController">
  <input placeholder="Search here" gl-bind="searchField" />
  <p gl-template="Searching for {searchField}"></p>

  <ul>
    <template gl-for="result in searchResults">
      <li gl-bind="result"></li>
    </template>
  </ul>
</div>

<script>
  const SearchController = GreenLight.controller("SearchController");

  SearchController.$store.set("availableResults", [
    "GreenLight",
    "AlpineJS",
    "React",
    "Vue",
    "Angular",
    "Svelte",
  ]);

  SearchController.effect(() => {
    const { searchField, availableResults } = SearchController.$store.get();

    const newResults =
      searchField.length > 0
        ? availableResults.filter((result) =>
            result.toLowerCase().includes(searchField)
          )
        : [];

    SearchController.$store.set("searchResults", newResults);
  }, ["searchField"]);
</script>