← Back to the home page

Understand and build HTML tools

An HTML tool is a small program in a single file. This guide explains step by step what it is made of, what the toolbox does for you, how to describe a tool so you get exactly what you need, and how your tools work together with others. Whether you write it yourself or have it written.

• One filePage, look and program live together in one .html file.
• On your deviceThe tool runs on your phone. The toolbox uploads nothing.
• You decideYou set the features, the look and the data, not a provider.

Important: code made by someone else can contain mistakes. Test every tool in the preview before you rely on it, and never enter passwords or keys into a tool you do not trust.

New in the guide (October 2026)

• Gallery blueprint: How the tools of the gallery are built, and how to make your own tools just as customizable.
• Shared messages: Six shared message kinds that let your tools work together with the gallery tools.
• Outlook: connection layer: What a proposed connection layer in the app would mean for tools, and how to build for it today.
• What to watch out for: New: lessons from building the gallery, for example on timers in the background and sorting on phones.

Basics

• What a tool is made ofHTML, CSS and JavaScript in one file: a complete example to copy and what each part takes care of.
• What the toolbox handlesShelf, full screen, storage, isolation, versions and backups: what the toolbox does, what your tool must do and where the limits are.
• What to watch out forThe key rules for good tools, plus lessons from building the gallery: timers in the background, sorting on phones, images in the backup.

Creating tools

• Describing toolsSeven building blocks for a good description, templates to copy, examples with tested results and how to improve in small steps.
• Approach by goalJust for you, for sharing, for children, for the long term or together with the gallery: what matters in each case.
• Templates in the appThe seven templates in the app under “New → Write new”: what they do, what they suit and how to extend them.
• Gallery blueprintHow the gallery tools are built and how to build your own the same way: the CUSTOMIZE block, start templates, undo, sharing without private entries, help with an AI template.

Working together

• Linking toolsSend data between tools with ARTEFAKT.senden, eingang and oeffnen: sample code, setup in the app, prompts and limits.
• Shared messagesSix message kinds with the same envelope, five collection points and ten rules: how your own tools work together with the gallery tools.
• Outlook: connection layerProposal to the app team: linking by message kind instead of name, hardware without lifting isolation, shared local collections. What it would mean for tools.

Help

• When something does not workBlank page, tiny text, lost data, messages do not arrive: typical problems, their causes and what helps.

Try it now

Open the web app, choose “New → Write new” and start with a template, or load an .html file.

Open the web app (opens in a new tab)↗