Fast Lightweight Automatic Site Handler
npm install
npm run buildOpen index.html via a static server. The page loads dist/builtscript.js from the CDN tag in index.html, which reads your flash.yaml at runtime and renders sections/BITs.
Paste these tags into your HTML <head>:
<script src="https://cdn.jsdelivr.net/gh/rhenryw/cdns@main/src/index.min.js"></script>
<script cdn="rhenryw/flash/dist/index.min.js lg=0 ref=main" defer></script>Put this into your HTML <body>:
Option 1: External YAML file (traditional approach)
<flash src="./flash.yaml">Note
Add an src attribute with a path or link to your YAML file if it's not named flash.yaml at the root of your site
Then create flash.yaml in the same directory:
Option 2: Inline YAML content
<flash>
background:
color: "#0B0B0F"
metadata:
title: "My FLASH Site"
sections:
- type: headline
config:
text: "Hello FLASH"
size: 32
- type: paragraph
config:
text: "This page is powered by FLASH"
color: "#9CA3AF"
</flash>Choose the method that works best for your project structure!
Complete example for external file approach:
background:
color: "#0B0B0F"
metadata:
title: "FLASH Site"
sections:
- type: headline
config:
text: "Hello FLASH"
size: 32
- type: paragraph
config:
text: "This page is powered by FLASH"
color: "#9CA3AF"flash.yaml: Page configuration (background, metadata, sections)bits/: Reusable BIT definitions in YAMLscripts/build.js: Builds the browser runtime todist/index.jsindex.html: Minimal host page that runs FLASH
background:
color: "#0B0B0F"
metadata:
title: "My FLASH Site"
sections:
- type: headline
config:
text: "Hello"
size: 32
- type: paragraph
config:
text: "Built with FLASH"
color: "#9CA3AF"A BIT is a small, reusable component defined in bits/<name>.yaml. Reference BITs in flash.yaml via sections entries:
sections:
- type: site-header
config:
title: "Build sites at light speed"
- type: blue-circle
config:
size: 220
color: "#2563EB"Create bits/my-widget.yaml:
Name: my-widget
CSS: |
[data-bit="my-widget"] {
display: block;
}
JS: |
const { container, config, utils } = ctx;
const el = document.createElement('div');
el.textContent = config.text || 'Hello from my-widget';
el.style.color = utils.normalizeColor(config.color || '#333333');
container.appendChild(el);Use it in flash.yaml:
sections:
- type: my-widget
config:
text: "Custom text"
color: "#00AAFF"All keys under config are passed to your BIT’s JS as ctx.config. Extend your BIT by reading those values and applying them.
Example additions inside your BIT’s JS:
const { container, config } = ctx;
const box = document.createElement('div');
box.textContent = config.label || 'Click me';
if (config.center) {
box.style.display = 'flex';
box.style.minHeight = '50vh';
box.style.alignItems = 'center';
box.style.justifyContent = 'center';
}
if (config.onClick === 'alert') {
box.addEventListener('click', () => alert(config.message || 'Hi'));
}
container.appendChild(box);Then in flash.yaml:
sections:
- type: my-widget
config:
label: "Press"
center: true
onClick: "alert"
message: "Welcome!"You can change the active page YAML at runtime.
// Switch the current <flash> to a different YAML file or URL
switchSource('./pages/about.yaml')Inside BIT JS, call it via ctx.utils.switchSource:
const { container, utils } = ctx;
const btn = document.createElement('button');
btn.textContent = 'Go to About';
btn.onclick = () => utils.switchSource('./pages/about.yaml');
container.appendChild(btn);At the top level of your page YAML, add a Params (or params) map to remap the page source based on URL query parameters. If a mapping matches, FLASH will update the <flash src> to that target before rendering.
Params:
hi:
"1": "./pages/hi1.yaml"
"2": "./pages/hi2.yaml"
default: "./pages/home.yaml"Examples:
- Visiting
?hi=1loads./pages/hi1.yaml - Visiting
?hi=2loads./pages/hi2.yaml - If
hiis missing or unmapped, falls back todefault
Works for inline <flash>...</flash> and external <flash src="...">.
Use a built-in frame section to embed an iframe. If the src ends in .yaml/.yml, it embeds a nested FLASH instance pointing at that YAML; otherwise it loads the URL directly.
sections:
- type: frame
config:
src: "./pages/hi.yaml" # or an external URL
height: "100vh" # number or CSS string
sandbox: "allow-scripts allow-same-origin"
allow: "fullscreen"Notes:
- For YAML sources, the iframe includes FLASH automatically and points
flash[src]at your YAML. - For normal URLs, it behaves like a standard iframe.
You can inject custom CSS/JS for the whole site via a custom block in flash.yaml:
custom:
css: |
html, body { scroll-behavior: smooth; }
.caps { text-transform: uppercase; }
js: |
console.log('FLASH site loaded');To place raw HTML, render it from a BIT. Create a small raw-html BIT:
Name: raw-html
CSS: |
[data-bit="raw-html"] { display: block; }
JS: |
const { container, config } = ctx;
const wrapper = document.createElement('div');
if (typeof config.html === 'string') wrapper.innerHTML = config.html;
container.appendChild(wrapper);Use it:
sections:
- type: raw-html
config:
html: "<h2 class=\"caps\">Custom Block</h2><p>Inline HTML rendered by a BIT.</p>"You can point FLASH to multiple BIT sources via bits.sources in flash.yaml. FLASH will try each source in order for both .yaml and .yml.
Example options:
bits:
sources:
# Local directory (relative or absolute)
- ./bits/
- /bits/
# GitHub repo (raw content)
- github:
repo: myorg/mybits
ref: main # optional, defaults to main
path: bits # optional, defaults to bits
# Direct base URL
- url: https://mysite.com/bits/
# Another arbitrary base
- https://cdn.example.com/custom-bits/Resolution order for a BIT named custom-thing:
- Tries
BASE/custom-thing.yaml, thenBASE/custom-thing.ymlfor each BASE inbits.sources. - If no
bits.sourcesis provided, defaults to./bits/then the public repo bits.
Use it in flash.yaml like any other BIT:
sections:
- type: custom-thing
config:
text: "Hello from custom source"npm run build
For LLMs use llm.md to help it understand
FLASH is a fantastic tool for LLMs, offering a swift and efficient method for them to generate user-desired content. I envision developing an AI-driven site builder utilizing FLASH in the future. Additionally, integrating WYSIWYG editors with FLASH would be beneficial, allowing for the creation and manipulation of BIT components through a user-friendly drag-and-drop interface.