Blueprint: tools you can customize

The tools of the gallery are all made from the same kit. That is why they work the same way and can be changed the same way. You can use the same rules for your own tools.

The gallery has 26 tools in English and German. They share a common kit that is built into every file. Each file still stays a single, readable tool that you can change like any other.

What every gallery tool brings along

Basic features from the kit
Feature	What you get	How to ask for it in your description
Start templates	On first opening the tool asks “How do you want to start?” and offers two to four variants for different groups. You see right away what it can do for you.	“On first start, offer three variants with a one-sentence description each.”
Customize without code	You change lists, texts, times and colours on a “Customize” screen. Only what you changed is stored.	“All settings from KONFIG can be changed in the tool under ‘Customize’ and are stored separately from the data.”
Undo and redo	After deleting or changing, “Undo” appears for ten seconds. Ctrl+Z and Ctrl+Y work too. Only deleting all data asks first.	“Undo instead of confirmation: ‘Undo’ in the message for ten seconds, plus Ctrl+Z and Ctrl+Y.”
Back up	Export of all data as JSON, plus a readable export as CSV where useful.	“Export as JSON and CSV, import of a JSON file.”
Share without private entries	The settings can be passed on as a template, without the data. A club shares its attendance list that way without sending the member data.	“A separate button copies only the settings, without data.”
Restore by pasting	A backup can also be pasted as text, not only loaded as a file. On a phone that is often easier.	“Import also by pasting text into a field.”
Help	Two sentences of explanation, the keyboard shortcuts (? opens the help) and a ready-made text for “Change with AI” to copy.	“A help screen with shortcuts and a template I can use to change the tool with AI.”
Sound, vibration, keep awake	Sequences can be heard and felt, the screen stays on while something runs. Everything can be switched off.	“Sound synthesized with WebAudio (no files), vibration, keep the screen awake, all switchable.”
Full screen and night view	Full screen for stage and practice, a strongly dimmed night view in warm red without animation.	“A button for full screen and a night view (very dark, warm red).”
Strict checks of incoming messages	Only known kinds, checked fields, no duplicates, shown only as text. Foreign data cannot break anything.	“Check every incoming message strictly and ignore everything unknown.”
Runs on its own too	Without the toolbox the tool runs in any browser, just without linking.	“Check window.ARTEFAKT before using it.”

The CUSTOMIZE block

At the very top of every gallery file there is a block that contains only data: lists, texts, numbers, colours and the start templates. Program code comes only below it. That has three advantages: you find all settings in one place, “Change with AI” can change just this block, and the rest of the tool stays untouched.

What the block looks like (shortened from the Breath pacer)

<script>
/* ===== CUSTOMIZE (ANPASSEN) – everything in this block may be changed ===== */
const KONFIG = {
  version: 1,
  muster: [
    { name: '4-7-8', phasen: [['in', 4], ['hold', 7], ['out', 8]] },
    { name: 'Box 4-4-4-4', phasen: [['in', 4], ['hold', 4], ['out', 4], ['rest', 4]] }
  ],
  standardMuster: '4-7-8',  // pattern when opening
  dauerMin: 3,              // session length in minutes
  ton: 'leise',             // 'aus' (off) | 'leise' | 'mittel' | 'laut' (loud)
  vibration: true,
  ansicht: 'normal',        // 'normal' | 'nacht' (night)

  // Working together with other tools
  ziele: { erledigt: 'Habit chain' },              // where the tool reports; empty = off
  vonAussen: ['standardMuster', 'dauerMin'],       // what other tools may set
  akzent: ''                // your own accent colour, e.g. '#6fb3c8'; empty = amber
};

// Start templates: show on first opening what the tool is good for
const VARIANTEN = {
  ruhig:  { name: 'Calm down', beschreibung: 'Before an exam: 4-7-8, three minutes.', konfig: { standardMuster: '4-7-8', dauerMin: 3 } },
  schlaf: { name: 'Fall asleep', beschreibung: 'In bed: night view, no sound.', konfig: { dauerMin: 5, ansicht: 'nacht', ton: 'aus' } }
};
/* ===== END CUSTOMIZE ===== */
</script>

The keys of the block are the same in every language (they come from the toolbox’s German interface). Only the values, such as names and descriptions, are in the language of the tool.

Fixed entries in the block
Entry	What for
version	Version of the settings. Goes up when their structure changes.
ziele	Target names per message kind, for example { erledigt: 'Habit chain' }. Leaving it empty switches sending off.
vonAussen	List of settings other tools may set for one run (see the message kind “start”). Everything else stays untouched.
ton, vibration, ansicht	Shared switches for sound, vibration and view (normal, nacht).
akzent	Your own accent colour as #rrggbb, matching the cassette colour on the shelf.
VARIANTEN	Start templates: name, a one-sentence description and the settings they change.

Store settings and data separately

The gallery tools store two things separately: your customization (only the differences from the CUSTOMIZE block) and your data. Both carry a version number. That way a new version of the tool can bring new defaults without overwriting your customization, and old data is migrated when loading.

Safe storage, with fallback and version number

const PREFIX = 'my-tool:';
const fallback = {};                 // fallback when localStorage is missing or full

function read(k, standard) {
  try { const r = localStorage.getItem(PREFIX + k); if (r != null) return JSON.parse(r); } catch {}
  return k in fallback ? fallback[k] : standard;
}
function write(k, value) {
  fallback[k] = value;
  try { localStorage.setItem(PREFIX + k, JSON.stringify(value)); return true; }
  catch { note('Saving is not possible right now. Please back up your data.'); return false; }
}

// Data with a version: new versions take over old data
const VERSION = 2;
const old = read('data', null);
let data = old ? migrate(old.data, old.v || 1) : startData();
function migrate(d, v) {
  if (v < 2) d.entries = (d.entries || []).map(e => ({ ...e, done: !!e.done }));
  return d;
}
function save() { write('data', { v: VERSION, data }); }

Backups in the shared format

A backup from a gallery tool is a readable JSON file. If the field daten is missing, it contains only settings: exactly what “Share settings” (without private entries) produces. The tool only loads backups whose format and tool match.

Structure of a backup

{
  "format": "artefakt-galerie",
  "tool": "F02",                       // id of the tool
  "name": "Breath pacer",
  "v": 1,                               // version of the data
  "gespeichert": "2026-10-04T19:30:00.000Z",
  "konfig": { "dauerMin": 5 },           // only what differs from the CUSTOMIZE block
  "daten": { … }                         // missing when sharing without private entries
}

Prompt: your tool built to the blueprint

With this template you get a tool that works and can be customized like a gallery tool. Fill in the square brackets. Leave out points you do not need; the list is complete on purpose.

Template: tool built to the gallery blueprint

Create a tool for me as ONE single HTML file for the Artefakt Toolbox, built to the blueprint of the Artefakt gallery.

Goal: [What should the tool do? One sentence.]
Features: 1. [ … ] 2. [ … ] 3. [ … ]

Structure:
- At the very top a script block “CUSTOMIZE” with data only: const KONFIG = { version: 1, … } with all lists, texts, numbers and colours, plus ton ('aus' | 'leise' | 'mittel' | 'laut'), vibration, ansicht ('normal' | 'nacht'), akzent. Below it const VARIANTEN with three start templates for [group 1], [group 2], [group 3], each with name, beschreibung (one sentence) and the settings they change. Comments in plain language. Program code comes only below this block.
- On first start: “How do you want to start?” with the variants.
- A “Customize” screen changes all settings from KONFIG without code. Only the differences are stored, separately from the data.
- Undo and redo (Ctrl+Z, Ctrl+Y), after every delete or change ten seconds of “Undo” in the message. Only “Delete all data” asks first, with its own dialog.
- A “Back up” menu: export as JSON (everything) and CSV, “Share settings” (settings only, no data, to the clipboard), import as a file AND by pasting text.
- Help (key ?): two sentences, shortcuts, and a template to copy: “In the tool [name], only change the CUSTOMIZE block. My wish: …”.
- Empty states explain in one sentence what will appear here, with a button for the first entry.

Technical: localStorage with a prefix and version number, every access in try/catch, fallback to memory with a note. Clocks calculate with timestamps. Sound only synthesized with WebAudio, vibration and keeping the screen awake only when available, errors are silently accepted. Formats via Intl. Sorting with up/down buttons instead of dragging. Own dialogs instead of alert/confirm, with Esc and focus return. No external files, fonts or libraries, works offline. Mobile first, dark design with an amber accent, light via prefers-color-scheme, respect “reduce motion”, tap targets at least 48 px. All texts in English, show foreign data only with textContent. Keep the code readable, do not minify.
Output: the complete file in a single code block.

If the tool should also work together with other tools, add the details from the page “Shared messages”.

Rebuilding gallery tools

You can adapt every gallery tool as far as you like. Usually “Customize” in the tool is enough. For anything beyond that, every help screen has a ready-made template for “Change with AI”:

Template from the help of a gallery tool

In the tool “Breath pacer”, only change the CUSTOMIZE block at the very top of the file (KONFIG and VARIANTEN). My wish: [e.g. “Add a 4-4 pattern and a variant ‘Before running’ with two minutes.”]
Leave the rest of the code unchanged and return the complete file.

Keep the name. It is the address for other tools, and the toolbox recognizes the file as a new version of the same tool.
Change only the CUSTOMIZE block first. The code below is built the same way for all gallery tools and is tested.
Every gallery tool comes as its own file per language. The English version sends to English names. If you mix languages, change the targets under “Customize”.
The code is deliberately not minified so that you and “Change with AI” can read it. Around 35 KB of it is the shared kit.

See also: Shared messages · Describing tools