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.
Help users discover, understand, and do
Point at anything.
Explain everything.
Create interactive product tours right on your existing website.
Install the free extension and create product tours and callouts directly on your website. No coding or engineering help needed. Just point, explain, and test live before publishing.
Experience Annomation in 60 seconds
Get the Free Extension
- 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. Give your team the freedom to create and test product guidance without waiting on developers.
How it works
Create freely. Test instantly. Publish when ready.
-
1
Point and explain
Select elements on your website and create helpful guidance without touching code.
-
2
Test live
Experience your tours and callouts directly on your website. No deployment required — only you see it while you refine.
-
3
Publish when ready
Add Annomation to your website once, then publish your walkthroughs whenever you're ready. No further changes needed.
Coming soon · Annomation Pro
Set up once. Publish anytime.
Managed publishing for product teams. Once Annomation is installed, your team will create, update and launch walkthroughs straight from Studio. Changes go live on the next page load, without touching your application's code or waiting on an engineering deploy.
Pro will be optional. Everything Annomation does today is free and stays free.
Studio
What's new
- 1Export to PDF
- 2Shared reports
- 3Dark mode
Live
acme.app
Theme
Dark modeNew: switch themes here.
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.
Why Annomation
Ownership. Your product. Your walkthroughs.
Create guided experiences directly in your browser. Your work stays with you until you choose to publish it, and then it ships with your application as files you own, with no other platform to manage.
Private by design
Walkthroughs are created and stored in your browser, and neither your content nor your visitors' activity is sent to Annomation's servers. 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.
How ownership compares to hosted platforms
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
Visitor activity sent to the vendorNothing sent to Annomation
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
Three files. One tag. Zero config.
Creating and publishing are two separate jobs, so you can try everything before your site changes at all. Studio installs in seconds from the add-on store for Chrome, Edge or Firefox.
Step 1 · Anyone
Create your walkthrough
Install the browser extension and start pointing. You can explore and preview everything before touching your site.
- Add Annomation Studio from your browser's add-on store.
- Pin it to your toolbar so the Annomation button is always one click away.
- Open your site, click the Annomation button, and point at what you want to explain. Preview shows exactly what people will see.
Edge
FirefoxStep 2 · Whoever deploys your site
Publish your walkthrough
Save to project folder writes three files into one folder of your site, always together. Add one tag once, then deploy as usual.
<script src="/annomation/annomation.js" defer></script>Coming soonWith Annomation Pro, later updates publish straight from Studio, with no redeploy.
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.
Do I need to know how to code?
No. Creating a walkthrough takes no code: you point and write in the browser extension. Publishing is a one-time setup: someone adds three small files to your site and one tag to your pages.
Is Annomation free?
Yes. Annomation is free to use, with no account and no subscription. An optional Pro tier for publishing updates without a redeploy is coming later.
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, installs from the official add-on store for Chrome, Edge and Firefox. 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.
Can I test a walkthrough before publishing it?
Yes. Studio includes a live testing mode that loads your walkthrough on any page — including your live production site — without adding any files or changing any code. Other visitors don't see anything; the test runs only in your browser. When you're happy with how it works, you publish.