For product teams
Make your prototypes speak for themselves.
Stakeholders explore your hosted prototype on their own, with the reasoning right next to the design.
Free product tours & walkthroughs, without the platform
Point at anything.
Explain everything.
Help people discover what's possible in your website or app.
Create interactive walkthroughs and product tours that highlight features, explain workflows, and onboard new users. Just point, write, and publish.
Experience Annomation in 60 seconds
Get Annomation Free
- Free to use
- No account
- No subscription
acme.app/dashboard
Revenue$48.2k+12.4%
Active users3,914+5.1%
Churn1.8%−0.3%
Weekly signups
Make your product speak for itself
Build product tours by pointing at your real interface.
Annomation Studio runs right on your page. Click the element you want to explain, write a sentence, and preview the exact experience your visitors will get.
In-app guidance where it matters
Explain features right where people use them.
No separate documentation, no switching tabs, no guessing what comes next. Annomation points at the real button, the real menu, the real workflow, so people learn by doing instead of reading about it somewhere else.
How it works
Create an interactive walkthrough in minutes.
-
1
Open your website
Launch the Annomation Studio extension on the page you want to explain. It opens in a side panel, right on top of your real interface.
-
2
Point and explain
Click any element, write a short message, and build your walkthrough step by step. Preview it exactly as visitors will see it.
-
3
Publish and let them explore
Save the walkthrough into your site with one click and deploy it as usual. Visitors explore at their own pace, from a launcher or automatically on their first visit.
Use cases
One tool for onboarding, feature tours and prototype reviews.
For developers
Ship the explanation with the feature.
Announce what's new right where it lives, with files that deploy with your code.
For businesses
Onboard customers without a live demo.
Walk new customers through the workflows that matter, at their own pace.
Ownership
Your product. Your walkthroughs. Your control.
Create guided experiences directly in your browser. Your work stays with you until you choose to publish it, and then it lives alongside your application, with no other platform to manage.
Private by design
Walkthroughs are created and stored in your browser. No account, no cloud workspace.
Publish where you host
Save the files alongside your site or app. You decide where and how it runs.
No platform to manage
No hosted service, no subscription, no vendor dashboard. Free to use.
Why Annomation is different
Typical hosted platformAnnomation
Create an accountNo account required
Configure a hosted workspaceWork directly in your browser
Depend on a vendor's hostingPublish with your own application
Manage another subscriptionFree to use
Edit in a separate editorPoint and click on the real interface
Customization
Make it feel like part of your product.
Choose your accent color and light, dark or automatic mode in Studio. Walkthroughs follow your brand, and you can fine-tune anything further with your own CSS. Try it here, then replay the demo.
A lightweight JavaScript library
Small enough to forget about. Smart enough to trust.
Works with dynamic interfaces
Handles modern applications, changing screens, and elements that only appear after loading or after opening a menu.
Highlights what matters
Draws attention to the right element and glides naturally from step to step, always keeping the explanation on screen.
Respects your visitors
Keyboard friendly and easy to dismiss. Each walkthrough is shown once per visitor, never on repeat.
Technical details
- ~10 kB, zero dependencies
- One small script and one stylesheet, served from your own site. No external service is involved.
- Selectors that survive redesigns
- Prefers
data-annomation-id, stable ids and test ids, skips framework-generated noise, and falls back to tag + text if markup drifts. - Waits for your UI
- Targets inside menus, modals and lazy routes are watched for until they appear. Steps can run a named action first, like opening a menu.
- Single-page apps
- Walkthroughs match pages by exact path, prefix or pattern, and re-check on client-side navigation. No router plugin needed.
- Accessible
- Dialog semantics, focus management, ← → Esc, and full respect for
prefers-reduced-motion. - Zero config
- The script finds
annomation.jsonin its own folder. Prefer code?Annomation.init()andAnnomation.start()are there too.
Install Developer preview
Three files. Two tags. Zero config.
Creating and publishing are two separate jobs, so you can try everything before your site changes at all. Studio isn't in the Chrome Web Store yet; until it is, it installs as a developer preview in Chrome or Edge in about a minute.
Step 1 · Anyone
Create your walkthrough
Install the browser extension and start pointing. You can explore and preview everything before touching your site.
- Download the developer preview and unzip it.
- Open
chrome://extensions, turn on Developer mode, choose Load unpacked, and pick the folder. - Open your site, click the Annomation button, and point at what you want to explain. Preview as visitor shows exactly what people will see.
Step 2 · Whoever deploys your site
Publish your walkthrough
Save to project folder writes three files into your site, always together. Add two tags once, then deploy as usual.
<link rel="stylesheet" href="/annomation/annomation.css">
<script src="/annomation/annomation.js" defer></script>FAQ
Product tour questions, answered.
What is Annomation?
Annomation is a free tool for creating guided walkthroughs and product tours on your website or app. You point at elements on your real interface with the Annomation Studio browser extension, write a short explanation for each, and publish the walkthrough alongside your site.
Is Annomation free?
Yes. Annomation is free to use, with no account and no subscription.
Do I need to know how to code?
No coding is needed to create a walkthrough: you point and write in the browser extension. To publish it, someone adds three small files to your site's folder and two tags to your pages, once.
Can I use Annomation for user onboarding?
Yes. A walkthrough can play automatically on a visitor's first visit or start from a launcher, so you can guide new users through key workflows, announce new features, or explain a prototype. Each walkthrough is shown once per visitor.
Does it work with my website or framework?
Yes. Annomation works on any website or web app you can add files to, including single-page apps built with React, Vue, Angular or Svelte. Walkthroughs can wait for elements that appear later, such as menus and dialogs.
Can I add walkthroughs to a site I don't own?
You can preview a walkthrough on any page with Studio, but visitors only see walkthroughs on sites whose owner has added the Annomation files.
Which browsers are supported?
Annomation Studio, the authoring extension, runs in Chrome and Edge. It's currently a developer preview while the Chrome Web Store listing is prepared. The walkthroughs themselves run in all modern browsers.
Where are my walkthroughs stored?
While you work, walkthroughs are stored in your browser. When you publish, they're saved as a file in your own site's folder. Nothing is sent to an Annomation server.
Will visitors see the same walkthrough over and over?
No. Once a visitor has seen a walkthrough it isn't shown or offered to them again, and automatic walkthroughs play only once per visitor.