Human/Machine view. One script tag.
A human machine switcher in about six kilobytes gzipped. A Human / Machine pill appears on any page so a reader can choose how they read it. Human is your site as you designed it. Machine is your llms.txt, the document you already wrote for models, one click away instead of buried at a URL nobody guesses. The pill at the bottom of this page is the widget itself.
Answer: A human machine switcher is a control that swaps a web page for the machine-readable version of the same site. This one renders a pill whose Machine side is an ordinary link to your llms.txt, so it is crawlable and middle-clickable. It is free, needs no sign-up, and puts no visible badge on your site.
How to add a human machine toggle to any website
One command does all of it:
npx human-machine-swapper init
It works out what your project is, writes a starter llms.txt if you have none, declares it, loads the component pinned to a version with an integrity hash, mounts the element, and adds the CSS rule below. It is safe to run twice and it will not overwrite an llms.txt you already have. Add --dry-run to see the changes without making them.
Or by hand, which is a script tag and an element:
<script src="https://unpkg.com/human-machine-swapper" defer></script> <human-machine-swapper data-position="bottom-center"></human-machine-swapper>
The pill renders in an isolated shadow root, so it can never collide with the host site's CSS.
Or from npm, if you would rather bundle it:
npm install human-machine-swapper
The source is on GitHub, Apache-2.0. If you are pointing a coding agent at this, hand it /human-machine-swapper/llms.txt instead of this page: it is the same instructions with the prose taken out.
Then add this one line of CSS. It is not optional:
human-machine-swapper:not(:defined) { display: none; }Until the script arrives, the browser treats <human-machine-swapper> as an unknown element and lays it out in normal flow, where it measures about fifty pixels tall and pushes whatever follows it down the page. On a slow connection that is a visible jump; on a fixed-height layout it is broken geometry. This is the one thing the embed cannot do for itself, because a page cannot be styled by a script that has not loaded yet.
Declare your machine reading and the widget stops guessing:
<link rel="llms" href="/llms.txt" />
Or name the URL on the element, for a docs site whose machine reading is not at the root:
<human-machine-swapper data-position="top-center" data-llms="/docs/llms-full.txt" data-accent="#a8f326" ></human-machine-swapper>
Machine view is the other document, not a restyling
Machine shows your llms.txt: the real file, the same bytes, fetched and rendered in place. It does not dim your images or rearrange your page. The machine reading of a site is a document written for models, and the honest thing is to hand it over rather than perform an impression of it. Cloudflare does the same when it offers the markdown reading of a docs page.
It renders in place rather than navigating away so the pill survives the swap. Send someone to a text file and the control that brought them there no longer exists on the page they land on: the only way back is the browser's back button. Here the two readings crossfade, the pill stays put, and Human, Escape or back all return you.
Machine is still a real <a href> pointing at the file. A crawler follows it like any other link, and a middle click or a cmd-click opens the raw file in a new tab, because only an unmodified left click is upgraded to the in-page reader. With JavaScript off the link simply works.
No llms.txt, no pill
The component looks for a link rel=llms tag, then probes /llms.txt and /llms-full.txt for real, caching the answer for the tab so a site-wide pill does not cost a request per page. If none of them answer, it renders nothing and writes a console warning telling you how to publish one.
This is deliberate. A visible control that does nothing is worse than no control, and a Machine button that leads nowhere teaches a visitor that machine readings are a gimmick. Publish the file first.
Human machine switcher: commonly asked questions
What is a human machine switcher?
A human machine switcher is a control that lets a reader swap a web page for the machine-readable version of the same site. Human is the page as it was designed. Machine hands the reader the site's llms.txt, the plain-text document written for language models. The Human/Machine View component renders that control as a small pill in an isolated shadow root, and the Machine side is an ordinary link, so it is crawlable and middle-clickable.
How do I add a human machine view toggle to my website?
Run npx human-machine-swapper init in the project root. It detects the framework, writes a starter llms.txt if the site has none, declares it, loads the component, mounts the element and adds the required CSS guard. By hand it is one script tag, one custom element, the rule human-machine-swapper:not(:defined){display:none}, and an llms.txt the site serves. It works on Next.js, Astro, SvelteKit, Nuxt, WordPress, Webflow or a plain HTML file, with no build step.
What happens when you switch to machine view?
The component fetches the site's llms.txt and renders it in place, over the page, while the pill stays on screen. Machine view is not a restyling: it is the other document, the one written for machines. Clicking Human, pressing Escape, or using the browser's back button returns you. A middle click or cmd-click on Machine opens the raw file in a new tab instead.
What if my site has no llms.txt?
The pill does not appear. The component looks for a link rel=llms tag, then probes /llms.txt and /llms-full.txt, and only gives up when none of them answer. When it gives up it writes a console warning explaining how to publish one. A control whose only job is to hand over the machine reading should not be on a page that has no machine reading.
Does the human machine toggle work without JavaScript?
The pill is rendered by JavaScript, so it does not appear without it, and the in-page reader needs fetch. Nothing is lost: Machine is an ordinary link to a plain file at a stable URL, so it works when scripting is off, and any crawler can request the file directly whether or not the pill rendered. The component never adds or removes content from the page it sits on.
Does the widget put a badge on my site?
No. There is no visible credit. The component adds a schema.org WebApplication block and an HTML comment to the head, both naming Advance Labs as the creator. Models that read your markup see who built the control; your visitors see only the pill.
Is human machine view free?
Yes, completely free with no sign-up. The component is Apache-2.0 licensed and open source at github.com/Advance-Labs/human-machine-swapper, published to npm as human-machine-swapper, and served from a single script tag on any domain.
Every option and what it does
| Option | Value | What it does |
|---|---|---|
| data-position | bottom-center | top-center | Where the pill sits, fixed to the viewport. |
| data-llms | auto | URL | The machine reading to link to. auto reads link rel=llms, then probes /llms.txt and /llms-full.txt. |
| data-accent | CSS color | Accent for the current dot and hover. Default #a8f326. |
| data-labels-human / data-labels-machine | text | Override the two labels. |
The credit is in the markup, not on the screen
Your visitors see a pill and nothing else. The component adds this to the head, so a model reading your page can say what the control is and who made it:
<script type="application/ld+json" id="hms-credit">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Human/Machine view",
"url": "https://advancelabs.dev/human-machine-swapper",
"creator": { "@type": "Organization", "name": "Advance Labs Inc." }
}
</script>
<!-- Human/Machine view by Advance Labs - https://advancelabs.dev/human-machine-swapper -->The node carries its own identifier and never claims to be your page, so it cannot collide with the schema you already publish. Advance Labs builds the instruments agents run on. This is one of them: free, open, Apache-2.0, and small enough to drop into a thousand sites.
Nothing to sign up for. Publish an llms.txt, add the script, ship it.