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, we pull in the TinyBase store module:

<script src="/umd/tinybase/store/index.js"></script>

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

const {createStore} = TinyBaseStore;
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.