TinyBase

Hello World v1

In this demo, we set data in, and then get data from, a Store object. This is about as simple as it gets.

First, we pull in the TinyBase store module:

<script src="/umd/store.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. It's in a Cell called c1, in a Row called r1, in a Table called t1:

store.setCell('t1', 'r1', 'c1', 'Hello World');

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

document.body.innerHTML = store.getCell('t1', 'r1', 'c1');

Add a little styling, and we're done!

@font-face {
  font-family: Lato;
  src: url(https://tinybase.org/fonts/lato-light.woff2) format('woff2');
}
body {
  align-items: center;
  display: flex;
  font-family: Lato, sans-serif;
  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 set up a listener for data in the Store object and then change the Cell to see the display update. Please continue to the Hello World v2 demo.