Easy to use Appwrite components for Svelte. Install it:

npm install svelte-appwrite # or  yarn svelte-appwrite

• Usage
  • Initialize
  • Create user
  • Login via Email
  • Login via OAuth2
  • Get user
  • Get Collection
  • Get Document
• API
  • Account
    • <User />
    • <Create />
    • <Delete />
    • <Preferences />
    • <RecoverPassword />
    • <Update />
  • Auth
    • <AuthEmail />
    • <AuthOAuth2 />
  • Avatars
    • <Browser />
    • <CreditCard />
    • <Favicon />
    • <Flag />
    • <Image />
    • <QR />
  • Database
    • <Collection />
    • <Document />
  • Storage
    • <Storage />
    • <FileList />
    • <File />
  • Locale
    • <Continents />
    • <Countries />
    • <Currencies />
    • <Locale />
    • <PhoneCodes />

You need a running instance of Appwrite to use this library. Go to https://appwrite.io/docs/installation for more instructions.

Psuedo Example

Handle multiple levels of async relational data (and their loading & fallback states) entirely from the Svelte HTML.

<!-- 1. 💪 Appwrite App --> <Appwrite {...config}> <!-- 2. 😀 Get the current user --> <User let:user> <h1>Hello {user.name}!</h1> <!-- 3. 📚 Get all the documents from a collection --> <Collection collection="5f56a3035a01f" let:documents> You have {documents.length} documents. {#each documents as document} <!-- 4. 📜 Get a document --> <Document {document}> Title: {document.title} Text: {document.text} ...

Must be initialised and wrap every svelte-appwrite component.

<script>  import { Appwrite } from "svelte-appwrite";   const config = {  endpoint: "http://localhost/v1",  project: "5f4938898667e",  locale: "de",  }; </script> <Appwrite {...config}> ... </Appwrite>

Registers a new account.

<script>  import { Create } from "svelte-appwrite";   let email = "";  let password = "";  let name = "";   const success = e => {  //success callback  // `e` contains the user object  };   const failure = e => {  //failure callback  } </script> <Create let:actions on:success on:failure> <input type="text" bind:value={email}> <input type="password" bind:value={password}> <input type="text" bind:value={name}> <button on:click={actions.create(email,password, name)}>Register</button> </Create>

let:actions object

Object with function.

on:success

Triggers on successful register.

on:failure

Triggers on failed register.

Login via email and password.

<script>  import { AuthEmail } from "svelte-appwrite";   let email = "";  let password = "";   const success = e => {  //success callback  // `e` contains the user object  };   const failure = e => {  //failure callback  } </script> <AuthEmail let:authorize on:success on:failure> <input type="text" bind:value={email}> <input type="text" bind:value={password}> <button on:click={authorize(email,password)}>Login</button> </AuthEmail>

let:authorize function

Initiates login.

on:success

Triggers on successful login.

on:failure

Triggers on failed login.

Login via an OAuth2 provider.

<script>  import { AuthOAuth2 } from "svelte-appwrite"; </script> <AuthOAuth2 provider="google" success="http://localhost:5000?success" failure="http://localhost:5000?failure" let:authorize> <button on:click={authorize}>Login Google</button> </AuthOAuth2>

let:authorize function

Requests current user to check if logged in.

<script>  import { User } from "svelte-appwrite"; </script> <User let:user> <h1>Hello {user.name}!</h1> <div>{user.email}</div> <div slot="error"> You are not logged in! </div> </User>

let:user object

Get currently logged in user data.

Get a list of all the documents from a collection.

<script>  import { Collection } from "svelte-appwrite"; </script> <Collection collection="5f56a3035a01f" let:documents> You have {documents.length} documents. </Collection>

let:documents array

Array of documents.

let:actions object

Object with function.

Get a document. If you pass the document property with data from , there wont be any data requested.

<script>  import { Document } from "svelte-appwrite"; </script> <Document id="5f56a3asda01f" let:document> Title: {document.title} Text: {document.text} </Document>

let:document object

A JSON object with the document data.

let:actions object

Object with function.

on:change

Triggers on update or remove login.

The Account components allow you to manage a user account.

• loading
• error

let:actions

• let:user
• let:error

• on:success On user fetch success.
• on:failure On user fetch failure.
• on:successLogout On logout success.
• on:failureLogout On logout failure.
• on:successLogoutFrom On logoutFrom success.
• on:failureLogoutFrom On logoutFrom failure.
• on:successLogoutAll On logoutAll success.
• on:failureLogoutAll On logoutAll failure.

let:actions

• on:success On create success.
• on:failure On create failure.

let:actions

• on:success On delete success.
• on:failure On delete failure.

• loading
• error

let:actions

• on:success On init and reload success.
• on:failure On init and reload failure.
• on:successUpdate On update success.
• on:failureUpdate On update failure.

let:actions

• on:successRecover On init and reload success.
• on:failureRecover On init and reload failure.
• on:successComplete On update success.
• on:failureComplete On update failure.

let:actions

• on:successName On name success.
• on:failureName On name failure.
• on:successEmail On email success.
• on:failureEmail On email failure.
• on:successPassword On password success.
• on:failurePassword On password failure.

let:actions

• on:successCreate On create success.
• on:failureCreate On create failure.
• on:successComplete On complete success.
• on:failureComplete On complete failure.

The Auth components allow you to authenticate a user account.

• loading
• success
• error

• let:authorize(email, password)
• let:user
• let:error

• on:success On authorize success.
• on:failure On authorize failure.

let:authorize()

The Avatar components aim to help you complete everyday tasks related to your app image, icons, and avatars.

• code
• width
• height
• quality

• let:src Image link

• code
• width
• height
• quality

• let:src Image link

• url

• let:src Image link

• code
• width
• height
• quality

• let:src Image link

• url
• width
• height

• let:src Image link

• text
• size
• margin
• download

• let:src Image link

The Database components allow you to create structured collections of documents, query and filter lists of documents, and manage an advanced set of read and write access permissions.

• id
• filters
• offset
• limit
• orderField
• orderType
• orderCast
• search
• first
• last

• loading
• error

let:actions

• let:documents
• let:error

• id
• collection
• document

• loading
• error

let:actions

• let:document
• let:error

The Storage components allow you to manage your project files. You can upload, view, download, and query all your project files.

let:actions

• let:files

• search
• limit
• offset
• orderType

• loading
• error

let:actions

• let:files
• let:error

• file

let:actions

The Locale components allow you to customize your app based on your users' location.

let:actions

• let:continents

• loading
• error

• eu

• loading
• error

let:actions

• let:countries

• loading
• error

let:actions

• let:currencies

• loading
• error

let:actions

• let:code

• loading
• error

let:actions

• let:codes