Skip to content
On this page

Writing your first page


This guide assumes you have read the component documentation and understand the way Leaf UI components work.

As mentioned, every page in your Leaf UI is a component. This means that you can write your first page by creating a new component.

The essentials

The only difference between a page and a regular component is that while components can contain any markup, pages need to have an HTML body tag wrapping the rest of their markup.

This is because Leaf UI uses the body tag to track Leaf UIs pages and attach Leaf UI specific information to the component.

  <h2>My first page</h2>
  <p>My first page is a component</p>

And we can use this view in our component like this:


use Leaf\UI;
use Leaf\UI\Component;

class MyFirstPage extends Component
  public $key = 'MyFirstPage';

  public function render()
    return UI::view('my-first-page.html');

Displaying the page

After creating the component in our application, we can load it into the DOM it by using the render method at the location you want to display the component.

use Leaf\UI;


UI::render(new MyFirstPage());
Writing your first page has loaded