Easy to use Appwrite components for Svelte. Install it:
npm install svelte-appwrite-sdk-sdk
# or
yarn svelte-appwrite-sdk
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-sdk
component.
<script>
import { Appwrite } from "svelte-appwrite-sdk";
const config = {
endpoint: "http://localhost/v1",
project: "5f4938898667e",
locale: "de",
};
</script>
<Appwrite {...config}>
...
</Appwrite>
Name | Description |
---|---|
endpoint |
Your Appwrite endpoint |
project |
Your project ID |
locale |
Optional The users locale |
Registers a new account.
<script>
import { Create } from "svelte-appwrite-sdk";
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.
Name | Description |
---|---|
create(email, password, name) |
Registers a new user. |
on:success
Triggers on successful register.
Name | Description |
---|---|
response |
Response |
on:failure
Triggers on failed register.
Name | Description |
---|---|
response |
Response |
Login via email and password.
<script>
import { AuthEmail } from "svelte-appwrite-sdk";
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.
Name | Description |
---|---|
email |
|
password |
Password |
on:success
Triggers on successful login.
Name | Description |
---|---|
email |
on:failure
Triggers on failed login.
Name | Description |
---|---|
error |
Error object. |
Login via an OAuth2 provider.
<script>
import { AuthOAuth2 } from "svelte-appwrite-sdk";
</script>
<AuthOAuth2
provider="google"
success="http://localhost:5000?success"
failure="http://localhost:5000?failure"
let:authorize>
<button on:click={authorize}>Login Google</button>
</AuthOAuth2>
Name | Description |
---|---|
provider |
OAuth2 provider |
success |
Success url |
failure |
Failure url |
let:authorize function
Requests current user to check if logged in.
<script>
import { User } from "svelte-appwrite-sdk";
</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-sdk";
</script>
<Collection collection="5f56a3035a01f" let:documents>
You have {documents.length} documents.
</Collection>
Name | Description |
---|---|
collection |
Collection unique ID. |
additional | same as here |
let:documents array
Array of documents.
let:actions object
Object with function.
Name | Description |
---|---|
reload() |
Re-fetch collection. |
create(data, read, write) |
Create a new Document in the collection. read /write is optional and current user by default. |
Get a document. If you pass the document
property with data from , there wont be any data requested.
<script>
import { Document } from "svelte-appwrite-sdk";
</script>
<Document id="5f56a3asda01f" let:document>
Title: {document.title}
Text: {document.text}
</Document>
Name | Description |
---|---|
id |
Document unique ID |
collection |
Collection unique ID |
or | |
document |
Document passed from <Collection />
|
let:document object
A JSON object with the document data.
let:actions object
Object with function.
Name | Description |
---|---|
update(data) |
Update the document. |
remove() |
Deletes the document. |
reload() |
Re-fetch document. |
on:change
Triggers on update or remove login.
The Account components allow you to manage a user account.
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
logout() |
Logout current session. |
logoutAll() |
Logout from all session. |
logoutFrom(session) |
Logout from specific session. |
- 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
Name | Description |
---|---|
create(email, password, name) |
Creates a user. |
-
on:success On
create
success. -
on:failure On
create
failure.
let:actions
Name | Description |
---|---|
delete() |
Deletes currently logged in user. |
-
on:success On
delete
success. -
on:failure On
delete
failure.
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reloads preferences. |
update(prefs) |
Update preferences. |
-
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
Name | Description |
---|---|
recover(email, url) |
Recover password. |
complete(user, secret, password, passwordAgain) |
Complete password recovery. |
-
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
Name | Description |
---|---|
name(name) |
Update name. |
email(email, password) |
Update email. |
password(password, oldPassword) |
Update password. |
-
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
Name | Description |
---|---|
create(url) |
Create Verification. |
complete(user, secret) |
Complete Verification. |
-
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.
Name | Description |
---|---|
provider |
OAuth2 provider |
success |
Success url |
failure |
Failure url |
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
Name | Description |
---|---|
reload() |
Reload. |
create(data, read, write) |
Creates a Document. |
- let:documents
- let:error
- id
- collection
- document
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
update(data) |
Updates a Document. |
remove() |
Removes a Document. |
- 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
Name | Description |
---|---|
create(file, read, write) |
Uploads a file. |
- let:files
- search
- limit
- offset
- orderType
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:files
- let:error
- file
let:actions
Name | Description |
---|---|
download() |
Downloads file. |
view(as) |
Get file for View. |
preview(width, height, quality, background, output) |
Get file for preview. |
update(read, write) |
Updates a file. |
delete() |
Deletes a file. |
The Locale components allow you to customize your app based on your users' location.
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:continents
- loading
- error
- eu
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:countries
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:currencies
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:code
- loading
- error
let:actions
Name | Description |
---|---|
reload() |
Reload. |
- let:codes