FAST Engine — Lightweight Web Component Framework

Quick Start Guide

Follow these two simple steps to use FAST in your web project.

1. Include the Script

Save fast-engine.js in your project directory and load it inside your HTML file's <head> section.

index.html

<head>
  <script src="fast-engine.js"></script>
</head>

2. Use Custom FAST Tags Directly in HTML

Start composing your page using high-level FAST tags directly in the <body>.

index.html

<body>
  <fast-app title="My Project">
    <fast-card header="Control Panel">
      <fast-counter value="10" min="0" max="50"></fast-counter>
      <fast-slider label="Volume" value="80" unit="%"></fast-slider>
      <fast-btn variant="primary" action="alert" target="Saved!">Save Settings</fast-btn>
    </fast-card>
  </fast-app>
</body>

Supported Tags Reference

<fast-app>

Serves as the root container. Configures header titles, themes, and overall layout shell.

<fast-card>

A styled container block with optional headers and customizable borders for organizing content.

<fast-btn>

Interactive buttons with pre-configured JavaScript triggers like alerts, modals, and copy-to-clipboard.

<fast-counter>

Self-contained counter widget supporting minimum, maximum, step bounds, and state display.

<fast-slider>

Custom range slider element displaying live numeric readout values and customizable units.

<fast-timer>

Customizable countdown timer widget with play, pause, reset, and autostart capabilities.

Build Web Apps with Plain Custom HTML

Custom Engine Builder