Make an HTML file everyone can use together
Share a single HTML file on Anclove and everyone who opens the link sees the same live version — the boxes people check, the fields they fill, the notes they leave all save and sync for the whole group. This guide is how to make the interactive parts of your file save too, whether you write the file yourself or ask an AI to.
What saves on its own
Standard form fields — checkboxes, text inputs, dropdowns, text areas, and editable text — save and sync automatically. If your file is a checklist, a form, or a simple planner, you may not need to do anything at all: give each field a stable, descriptive id and share the link.
What doesn't save on its own is interactive state your own JavaScript builds and draws: a list people add to (a roster), a drag-and-drop board of who's assigned to what, custom toggles or counters, the order of things. That state saves through one small browser API, below.
Prompts for your AI
The simplest path: paste one of these into your chat — Claude, ChatGPT, or wherever you make things — and it does the wiring for you.
Creating a new file
Add this when you ask for the file, so it arrives ready to share.
The HTML file you're creating will be shared on Anclove, which saves people's changes and syncs them live to everyone who opens the link. Build it as ONE self-contained .html file (all styles and scripts inline, no external references), and follow these rules so everything people change in it is saved:
1. Anything people fill in should be a standard form field wherever possible — checkboxes, text inputs, dropdowns, text areas. Those save automatically with no extra work. Give each one a stable, descriptive id.
2. For interactive state that is NOT a form field — a list people add to (a roster), a drag-and-drop board, custom toggles or counters, ordering — use the built-in browser API "window.anclove".
The API:
- await window.anclove.ready() // wait for this once before reading saved state
- window.anclove.get(key) // the saved value for a key, or undefined
- window.anclove.set(key, value) // save a value; value can be any JSON data
// (string, number, boolean, array, object).
// Does nothing for a view-only person.
- window.anclove.subscribe(key, cb) // cb(value) runs when someone else changes
// that key; returns an unsubscribe function
- window.anclove.canWrite() // true if this person is allowed to change things
Rules for using it:
1. Give each piece of saved state a stable, descriptive key ("roster", "assignments"). Keys keep working even when a new version of the file is uploaded, so don't base them on element positions or random ids.
2. Save a list as a whole under one key: anclove.set("roster", ["Josh", "Shayna"]).
3. For anything several people might change at the same time (a drag-and-drop board), save each item under its own key — anclove.set("assign:josh", "golf") — instead of one big object, so two people moving different items don't overwrite each other.
4. Do the wiring on the window "load" event: window.anclove exists by then, but NOT while the page is still parsing. Then await ready(), render the UI from get(...), and use subscribe(...) to re-render when other people make changes.
5. If window.anclove doesn't exist at all, the file was opened outside Anclove — everything should still work normally, just without saving.
6. If canWrite() is false, show the current state but don't let this person change it.
Rules about the environment the file runs in (breaking one makes a file that works in a preview but silently breaks when shared):
7. NEVER use localStorage, sessionStorage, IndexedDB or cookies for saved state — they THROW where the file is served, and an unguarded call can blank the whole page. window.anclove is the storage. (A localStorage fallback for when the file is opened outside Anclove is fine, but wrap every call in try/catch.)
8. Everything inline, nothing external: no CDN scripts (React/Tailwind/chart libraries), no external stylesheets, no Google Fonts <link> — none of them load. Prefer system fonts; if a specific font matters, inline the @font-face rule with its https font-file URL (font files themselves DO load). Images must be data: URIs or https links — relative paths like ./image.png load nothing.
9. Never call alert(), confirm() or prompt() — they silently do nothing (confirm returns false, prompt returns null). For "are you sure?", use a two-tap button in the page: first tap arms it ("Really delete? affects everyone"), second tap acts.
10. No network calls (fetch/XMLHttpRequest/WebSocket are blocked) and no real form submission — keep form fields as the data surface (they save automatically) and make any "Save" button update state instead of submitting. Audio and video don't play. Ordinary links to other websites are fine — they open in a new tab.
What Anclove does NOT save yet: photos or images a viewer adds, freehand drawing, and text formatting (saved text is plain text). Images already in the file display fine — this is only about media people add afterward.Already have a file
Paste this alongside your existing file, then upload what it gives back as a new version — the link stays the same.
I'm sharing this HTML file on Anclove, which saves people's changes and syncs them live to everyone who opens the link.
Standard form fields (checkboxes, text inputs, dropdowns, text areas, contenteditable) already save automatically — leave those as they are. What doesn't save yet is any interactive state my file builds from other things: a list people add to (a roster), a drag-and-drop board (who's assigned to what), custom toggles or counters, ordering — anything that isn't a form field.
Please wire that state to the built-in browser API "window.anclove" so those changes persist and sync too, and keep everything else about the file exactly the same.
The API:
- await window.anclove.ready() // wait for this once before reading saved state
- window.anclove.get(key) // the saved value for a key, or undefined
- window.anclove.set(key, value) // save a value; value can be any JSON data
// (string, number, boolean, array, object).
// Does nothing for a view-only person.
- window.anclove.subscribe(key, cb) // cb(value) runs when someone else changes
// that key; returns an unsubscribe function
- window.anclove.canWrite() // true if this person is allowed to change things
Rules for using it:
1. Give each piece of saved state a stable, descriptive key ("roster", "assignments"). Keys keep working even when a new version of the file is uploaded, so don't base them on element positions or random ids.
2. Save a list as a whole under one key: anclove.set("roster", ["Josh", "Shayna"]).
3. For anything several people might change at the same time (a drag-and-drop board), save each item under its own key — anclove.set("assign:josh", "golf") — instead of one big object, so two people moving different items don't overwrite each other.
4. Do the wiring on the window "load" event: window.anclove exists by then, but NOT while the page is still parsing. Then await ready(), render the UI from get(...), and use subscribe(...) to re-render when other people make changes.
5. If window.anclove doesn't exist at all, the file was opened outside Anclove — everything should still work normally, just without saving.
6. If canWrite() is false, show the current state but don't let this person change it.
Rules about the environment the file runs in (breaking one makes a file that works in a preview but silently breaks when shared):
7. NEVER use localStorage, sessionStorage, IndexedDB or cookies for saved state — they THROW where the file is served, and an unguarded call can blank the whole page. window.anclove is the storage. (A localStorage fallback for when the file is opened outside Anclove is fine, but wrap every call in try/catch.)
8. Everything inline, nothing external: no CDN scripts (React/Tailwind/chart libraries), no external stylesheets, no Google Fonts <link> — none of them load. Prefer system fonts; if a specific font matters, inline the @font-face rule with its https font-file URL (font files themselves DO load). Images must be data: URIs or https links — relative paths like ./image.png load nothing.
9. Never call alert(), confirm() or prompt() — they silently do nothing (confirm returns false, prompt returns null). For "are you sure?", use a two-tap button in the page: first tap arms it ("Really delete? affects everyone"), second tap acts.
10. No network calls (fetch/XMLHttpRequest/WebSocket are blocked) and no real form submission — keep form fields as the data surface (they save automatically) and make any "Save" button update state instead of submitting. Audio and video don't play. Ordinary links to other websites are fine — they open in a new tab.
What Anclove does NOT save yet: photos or images a viewer adds, freehand drawing, and text formatting (saved text is plain text). Images already in the file display fine — this is only about media people add afterward.The API, if you're writing it yourself
The prompts above tell your AI to use one small built-in browser API,window.anclove. Here it is in full — the same rules, whether a person or a model writes the code.
The API:
- await window.anclove.ready() // wait for this once before reading saved state
- window.anclove.get(key) // the saved value for a key, or undefined
- window.anclove.set(key, value) // save a value; value can be any JSON data
// (string, number, boolean, array, object).
// Does nothing for a view-only person.
- window.anclove.subscribe(key, cb) // cb(value) runs when someone else changes
// that key; returns an unsubscribe function
- window.anclove.canWrite() // true if this person is allowed to change things
Rules for using it:
1. Give each piece of saved state a stable, descriptive key ("roster", "assignments"). Keys keep working even when a new version of the file is uploaded, so don't base them on element positions or random ids.
2. Save a list as a whole under one key: anclove.set("roster", ["Josh", "Shayna"]).
3. For anything several people might change at the same time (a drag-and-drop board), save each item under its own key — anclove.set("assign:josh", "golf") — instead of one big object, so two people moving different items don't overwrite each other.
4. Do the wiring on the window "load" event: window.anclove exists by then, but NOT while the page is still parsing. Then await ready(), render the UI from get(...), and use subscribe(...) to re-render when other people make changes.
5. If window.anclove doesn't exist at all, the file was opened outside Anclove — everything should still work normally, just without saving.
6. If canWrite() is false, show the current state but don't let this person change it.
Rules about the environment the file runs in (breaking one makes a file that works in a preview but silently breaks when shared):
7. NEVER use localStorage, sessionStorage, IndexedDB or cookies for saved state — they THROW where the file is served, and an unguarded call can blank the whole page. window.anclove is the storage. (A localStorage fallback for when the file is opened outside Anclove is fine, but wrap every call in try/catch.)
8. Everything inline, nothing external: no CDN scripts (React/Tailwind/chart libraries), no external stylesheets, no Google Fonts <link> — none of them load. Prefer system fonts; if a specific font matters, inline the @font-face rule with its https font-file URL (font files themselves DO load). Images must be data: URIs or https links — relative paths like ./image.png load nothing.
9. Never call alert(), confirm() or prompt() — they silently do nothing (confirm returns false, prompt returns null). For "are you sure?", use a two-tap button in the page: first tap arms it ("Really delete? affects everyone"), second tap acts.
10. No network calls (fetch/XMLHttpRequest/WebSocket are blocked) and no real form submission — keep form fields as the data surface (they save automatically) and make any "Save" button update state instead of submitting. Audio and video don't play. Ordinary links to other websites are fine — they open in a new tab.
What Anclove does NOT save yet: photos or images a viewer adds, freehand drawing, and text formatting (saved text is plain text). Images already in the file display fine — this is only about media people add afterward.For developers & your AI assistant
Building something with real concurrency — a live scoreboard six people fill at once, a drag-and-drop board that has to survive every browser? The complete authoring spec goes much deeper: how to shard keys so simultaneous edits don't clobber each other, how to keep someone's keystrokes from being erased by a remote update, and a cross-browser drag-and-drop pattern with the two silent Chromium bugs already solved.
It's packaged so you can hand the whole thing to a coding assistant.
Ready to try it? Sign in to Anclove and share your first file.