Replace video tutorials with scriptable, interactive walkthroughs. Animation engine, tour guide, scene scripting - all in one 21KB library.
Modular, tree-shakeable, built for production.
Persistent state storage with localStorage, sessionStorage, and memory fallback. Typed get/set with onChange observers.
Try demo →Throttle, debounce, deepMerge, event helpers, waitFor (MutationObserver-based). The utility belt every module depends on.
Try demo →Curated SVG icon bundle from FontAwesome, Bootstrap Icons, and Heroicons. Inline SVG, zero HTTP requests.
Try demo →Multi-strategy element resolver (ID, CSS, XPath, data-attr). Best selector generator. Interactive Element Picker.
Try demo →Promise-based alert/confirm, tooltip placement engine, dialog/drawer/fullscreen variants. Draggable, keyboard-accessible.
Try demo →JSON-based scene scripting. Virtual cursor, practice mode, video-like playback bar. The heart of MTxFlow.
Try demo →Interactive step-by-step walkthroughs, pulsing help badges, and admin visual tour builder panel.
Try demo →Flowchart diagram builder with draggable nodes, active connectors, state history (undo/redo), and SVG export.
Try demo →Advanced overlay controls for element selection, moving, 8-point resizing, rotating, and quick action bar (Lock, Duplicate, Delete).
Try demo →Interact with every module right here.
// Click "Set" to store a value, "Get" to retrieve it
// Click buttons to test utility functions
Click "Start Picker", then hover over any element on this page. Click to select it.
// Picker will show element info here after selection
// Click buttons to test modal variants
// Click any drawing button. Shapes will target elements on this section.
Drag either block below to watch the connector re-route and follow in real time!
Click "Enable Transform Overlay" to select and control the elements below. You can drag to move, drag the handles to resize, and drag the blue dot to rotate. Drag layers in the left panel to reorder their z-index depth.
// Coordinates output: Click "Enable Transform Overlay" to begin
Watch mode simulates mouse movements, clicks and typing. Practice mode asks you to perform actions with real-time feedback.
Click "Create Custom Tour" to start picking elements on this page. When done, click "Save Preset" inside the builder panel to save it as a local preset, or "Save JSON" to download it.
Preset 1 will guide you through the logo, persistence state, dialogs, connectors, and playback scripting.
// Tour activity logs will be shown here...
Drag any node in the canvas below to update connector paths automatically in real time.
// Exported SVG code will display here
Launch the Scene Recorder to open a floating panel. Perform interactions on the page (clicks, input typing, scrolling), add step tooltips using the "Tip" button, then click "Export" or "View Recorded JSON".
// Recorded SceneScript JSON will be shown here...
Get running in under 30 seconds.
<!-- CDN -->
<link rel="stylesheet" href="mtx-flow.bundle.css">
<script src="mtx-flow.bundle.min.js"></script>
<script>
// Alert
mtx.Modal.alert('Welcome to MTxFlow!');
// State
const state = new mtx.State('app');
state.set('theme', 'dark');
// Dom Picker
const picker = new mtx.Dom.Picker({
onPick: (result) => {
console.log('Selected:', result.selector);
}
});
picker.start();
</script>