JavaScript Router

Pico Library This library has less than 2 KBytes

The LemonadeJS Router, an MIT-licensed JavaScript plugin within the lightweight Pico Library (under 2 KBytes), facilitates content rendering based on routes. It smartly intercepts link clicks to display components according to set-up, all without extra dependencies.



npm install @lemonadejs/router


Router settings

Attribute Description
animation?: Boolean Enable the page change animation.
single?: Boolean Single page on the DOM

Page settings

Attribute Description
path: String Route to execute this page. This should be a regular expression string.
controller: Component Component name.
url?: String URL to load a remote template.
preload?: Boolean URL to load a remote template.


Router events

Event Description
onchangepage?: function When the page changes.
onchangepage(newPage: Object, oldPage: Object, isNewPage: Boolean) => void;
onbeforechangepage?: Function Called before the page is changed.
onbeforechangepage(path: String, page: Object) => object | boolean
onbeforecreatepage?: Function Before the page is created.
onbeforecreatepage(page: Object, html: String) => boolean | void

Page events

Event Description
onenter?: function When enters in the page.
onenter(newPage: Object, previousPage: Object) => void;
onleave?: Function When leaves a page.
onleave(currentPage: Object, newPage: Object) => void;

Router SPA example

The router loads the page content from a remote HTML file in the following example.

LemonadeJS router example
<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=no" />

<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="|Roboto|Material+Icons" type="text/css" />

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<div id='root'></div>

function Home() {
    let self = this;

    self.onenter = function() {
        console.log('Enter home');

    self.onleave = function() {
        console.log('Leave home');

    return `<div>
        <p>This is home...</p>

function Message () {
    let self = this;
    return `<div>
        <h1>New message</h1>
        <p>Second page...</p>

function Profile () {
    let self = this;
    return `<div>
        <p>Profile page</p>

function App() {
    let self = this;

    self.test = function() {

    return (render) => render`<>
        <Router :animation="true" :onchangepage="self.test">
            <Route path="/tests/home" :controller="${Home}" />
            <Route path="/tests/compose" :controller="${Message}" />
            <Route path="/tests/profile" :controller="${Profile}" />
            <Icon content="inbox" title="Inbox" route="/tests/home" />
            <Icon content="create" title="New message" route="/tests/compose" />
            <Icon content="person" title="Profile" route="/tests/profile" />

// Set the components
lemonade.setComponents({ Toolbar });
// Render
lemonade.render(App, document.getElementById('root'));