**Here be dragons** Madata has not yet been officially released, we are trying a “soft launch” first.
It is currently in pre-alpha and very much a work in progress.
Its API may change. It may have bugs.
Please try it out, and [open issues](https://github.com/madatajs/madata/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) as you find them!
Pull requests are welcome too :)
## Getting Started
While you can [install Madata via npm](https://www.npmjs.com/package/madata), you can also
just use it directly from the CDN (provided by [Netlify](https://www.netlify.com/)):
```js
// Import Madata and all supported backends
import Backend from "https://madata.dev/src/index.js";
```
You then create a `Backend` object by passing a URL to `Backend.from()`:
```js
let backend = Backend.from("https://github.com/leaverou/repo/data.json");
```
You can now call methods like…
- `backend.load()` to read data
- `backend.login()` to authenticate the user
- `backend.logout()` to log the user out
- `backend.store()` to store data
- `backend.upload()` to upload files
These methods are identical for all backends that support them.
This means you can swap one backend for another without having to change your code,
just by changing a URL!
Here is a full example that provides a very bare-bones authentication UI,
reads an object from a JSON file on GitHub,
provides UI for editing the data,
and saves back.
This example uses inline event handlers and global variables to keep the code short,
don’t do that in production. :)
```html
Value:
```
## Supported backends
Visit [the backends page](/backends/) for the full list.
## Authentication
- `backend.login()` shows authentication UI
- `backend.login({passive: true})` tries to authenticate the user silently (i.e. if they are already logged in)
It is called automatically when you call `backend.load()` or `backend.store()`.
- `backend.logout()` logs the user out
- `mv-login` and `mv-logout` events are fired on the `Backend` object when the user logs in or out
Read more about [authentication](/docs/authentication/)
## Storage
Save:
```js
let fileInfo = await backend.store(json);
```
## Uploads
For backends that support uploads, this is how simple it could be to create an image uploader:
```html
```
```js
uploadForm.addEventListener("submit", evt => {
evt.preventDefault();
let file = uploader.files[0];
if (file && file.type.startsWith("image/")) {
backend.upload(file, `images/${file.name}`);
}
});
```
You can check if `backend.upload` is defined to see if the backend supports image uploads.