If you open the console in this page, you'll find the contents of the @hyper-hyper-space/core package are avaiable in the gobal scope.
Additionally, this page defines an example DocumentSpace class, that can sync a single javascript object last-writer-wins style. It also defines an init() function, that will create a Resources object you can use to initialize HHS (it has a random crypto id and an IndexedDB-based store).
To create a Document Space, do this (paste this to the console in this page):
await init();
let ds = new DocumentSpace();
let space = Space.fromEntryPoint(ds, resources);
await space.entryPoint
console.log(await space.getWordCoding())
ds.setResources(resources)
ds.startSync()
You only need to run the code above once. The 3-word code for your newly created space will be printed on the console, and the space will be persisted to in-browser storage.
You can then instantiate this object in another computer / browser / tab (or re-open it in the same browser where you created it) by opening this page again and then typing this in the console:
await init();
let space = Space.fromWordCode(['your', 'words', 'here!'], resources) // replace 3 words;
let ds = await space.getEntryPoint();
ds.setResources(resources);
await resources.store.save(ds);
ds.startSync();
Remember to replace the 3-code word in the code above by the one you got when creating your space! You need to keep at least one browser tab open for the space to be available.
Now you can do, in any of your browser windows:
ds.setValue({'myApp': 'state'});
And you can read that back in the rest of them:
ds.getValue();
If you were really creating an HHS-based webpage, you'll probably want to use something like these react bindings to tie your web components automatically to the objects in your store!
Or maybe you can get away with a callback whenever state changes, something like this:
ds.addSyncCallback((newState) => { 'do something! state has changed!';});