Getting Started

Setup

Get Manifest with CDN links or copied from GitHub.

Overview

Manifest consists of:

  • manifest.js script for your project's functionality.
  • manifest.json for central management of your project.
  • manifest.*.css stylesheets for your project's UX/UI.

These files are modular, designed to work alone or together to best suit your project. A project using all Manifest features would be set up like:

<head>
<!-- Meta -->
<link rel="manifest" href="/manifest.json">

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css">
<link rel="stylesheet" href="/manifest.theme.css">

manifest.json

Outside this framework, manifest.json is a common file for web applications to centrally store project-level metadata. It's stored in the root for automatic browser detection.

We leverage this file as a place to declare HTML components and local or cloud data sources. It can also be used as a data source itself to render content.

manifest.json
{
	// Web standard content
	"name": "My Project",
  	"short_name": "Project name",
	"description": "Lorem ipsum dolor sit amet.",
  	"start_url": "/",
  	"scope": "/",
  	"display": "standalone",
  	"orientation": "any",
  	"background_color": "#FFFFFF",
  	"icons": [
		{ "src": "/icons/192x192.png", "sizes": "192x192", "type": "image/png" },
		{ "src": "/icons/512x512.png", "sizes": "512x512", "type": "image/png" }
	],

	// Declarations for Manifest plugins
  	"components": [
		"components/home.html",
		"components/about.html"
  	],
  	"preloadedComponents": [
		"components/footer.html",
		"components/header.html",
		"components/logo.html"
  	],
  	"data": {
		"i18n": {
			"locales": "/translations.csv"
		}
  	}
}

If your project is not a downloadable web app, and does not include HTML components or data sources, manifest.json can be omitted.

Script

manifest.js dynamically loads Alpine JS and our plugins to make your project functional. Add the <script> tag anywhere in the HTML head or body (within index.html if routing).




<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

The script loads:

  • Manifest Plugins (latest versions) from our CDN. The optional data-plugins or data-omit attributes will include or omit comma-separated plugins—otherwise all are loaded by default.
  • Alpine JS (latest version) from its CDN, unless it's been added separately to your project.
  • Tailwind CSS (modified production version from our CDN) if the data-tailwind attribute is added.

Scripts load the latest version from CDN by default. Load a specified version by referencing it in the URL and with a data-version attribute for plugins:

<script src="https://cdn.jsdelivr.net/npm/mnfst@0.5.17/lib/manifest.min.js"
	data-version="0.5.17"></script>

Styles

Stylesheets are divided by UI category, available individually or bundled in manifest.css.

A separate manifest.theme.css can be downloaded from GitHub for local modification. It maintains CSS variables referenced by the other sheets if present, centralizing your project's visual identity. See theme for more.

Add the desired Manifest CSS files to the HTML head (within index.html if routing). 




<link rel="stylesheet" href="/manifest.theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css">

CLI Commands

Manifest provides a handful of handy npx commands to assist with project development:

Command Purpose Reference
npx mnfst-starter <name> Scaffold a new Manifest project Starter Project
npx mnfst-run Zero-dependency dev server with live reload Setup
npx mnfst-render Prerender the SPA into a static MPA Websites
npx mnfst-types Generate TypeScript ambient types from manifest.json TypeScript
npx mnfst-test Project linter + component-test harness Testing

Run a Project

Enter npx mnfst-run to fire up a local server of the project. Sub-directories can be targeted with a path like npx mnfst-run website for /website.

npx mnfst-run

The server provides the following conveniences:

  • Auto launch — launches a new browser tab when started.
  • Auto reload — refreshes when content edits are made to html, css, json, yaml, csv, or md files.
  • Auto close — kills the server instance if all its browser tabs are closed.
  • No duplication — on launch, provides an existing localhost URL if the project is already running on the device.