Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Lasso.js Taglib for Marko

The Lasso.js includes a taglib for Marko for easily injecting <script> and <link> tags into a page, as well as resource URLs for images and other types of front-end resources.

Table of Contents


In order to automatically detect and compile required *.marko templates we will need to install the lasso-marko plugin and lasso-marko-taglib taglib using the following commands:

npm install lasso-marko
npm install @lasso/marko-taglib

Example Template

<lasso-page name="my-page" package-path="./browser.json"/>

<!doctype html>
<html lang="en">
        <meta charset="UTF-8">
        <title>Test Page</title>
        <h1>Test Page</h1>

Output HTML will be similar to the following:

<!doctype html>
<html lang="en">
        <meta charset="UTF-8">
        <title>Test Page</title>
        <link rel="stylesheet" type="text/css" href="/static/my-page-85e3288e.css">
        <h1>Test Page</h1>
        <script type="text/javascript" src="/static/bundle1-6df28666.js"></script>
        <script type="text/javascript" src="/static/bundle2-132d1091.js"></script>
        <script type="text/javascript" src="/static/my-page-1de22b65.js"></script>



Lassoes the page so that the resulting JavaScript and CSS resources can be injected into the output HTML. The <lasso-head> and <lasso-body> tags are used as insertion points. By default, all CSS <link> tags will be added to the <lasso-head> slot and all <script> tags will be added to the <lasso-body> slot.

Supported attributes:

  • name (string) - The name of the page (used to determine the name of output page bundles). Defaults to the name of the parent directory if not provided.
  • cache-key (string) - The cache key that should be used to cache the lassoed page. Defaults to the template path. NOTE: The set of enabled flags are always appended to the cache key.
  • package-path (string) - The relative path to the the JSON file that declares the top-level page dependencies.
  • package-paths (Array) - Similar to package-paths, but an Array of paths.
  • lasso (expression) - A reference to a Lasso instance. Defaults to the default page lasso (i.e. require('lasso').getDefaultLasso())
  • data (expression) - Optional data to copy into the object.
  • dependencies (expression) - An array of dependencies to lasso.
  • flags (expression) - An array of flags to enable during optimization
  • timeout (integer) - The maximum time to allow for the optimization to complete before throwing an error


With a path to an browser.json file:

<lasso-page package-path="./browser.json"/>

With an explicit page name flags:

<lasso-page name="home" package-path="./browser.json"/>

With enabled flags:

<lasso-page package-path="./browser.json" flags="['foo', 'bar']"/>

With dependencies:

<lasso-page dependencies="['foo.js', 'bar.css']"/>


The head slot that is used as the marker for inserting CSS <link> tags in the head section of the HTML page.


The body slot that is used as the marker for inserting JavaScript <script> tags in the body section of the HTML page.


Lassoes an image resource and renders an <img> tag with the src attribute set to the resulting URL of the bundled image resource.

Supported attributes:

  • src - The relative path to the image resource
  • * - All other attributes will pass through to the <img> tag


<lasso-img src="./foo.png" width="32" height="32" class="foo">

The output will be similar to the following:

<img src="/static/foo-1b4c0db.png" width="32" height="32" class="foo">


Lassoes an arbitrary resource and introduces a local variable that can be used to inject the resulting resource URL into the page.

Supported attributes:

  • path - The relative path to the resource to bundle
  • var - The name of the local variable to introduce


<lasso-resource path="./favicon.ico" var="favicon"/>
<link rel="shortcut icon" href=favicon.url>

The output will be similar to the following:

<link rel="shortcut icon" href="/static/favicon-c3deb101.ico">