Hello World v1

In this demo, we set data in, and then get data from, a Store object. We're using keyed values (not even tabular data!), so this is about as simple as it gets.

First, since we're running this in a browser, we register some import aliases for esm.sh:

<script type="importmap">
  {
    "imports": {
      "tinybase": "https://esm.sh/tinybase@6.1.0-beta.2"
    }
  }
</script>

We import the createStore function, create the Store object with it:

import {createStore} from 'tinybase';

const store = createStore();

NB: If we had bundled TinyBase with this app, we could have used a regular import instead of having to destructure the TinyBaseStore global.

We set the string 'Hello World' as a Value in the Store object. We give it a Value Id of v1:

store.setValue('v1', 'Hello World');

Finally, we get the value back out again and update the page with it:

document.body.innerHTML = store.getValue('v1');

Add a little styling, and we're done!

@font-face {
  font-family: Inter;
  src: url(https://tinybase.org/fonts/inter.woff2) format('woff2');
}

body {
  align-items: center;
  display: flex;
  font-family: Inter, sans-serif;
  letter-spacing: -0.04rem;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

And we're done! You now know the basics of setting and getting TinyBase data.

Next, we will see how we could have done that using a tabular data structure. Please continue to the Hello World v2 demo.