Loading repository data…
Loading repository data…
appwrite / repository
Appwrite SDK for Svelte 🧡 ⚠️ Warning - this SDK was designed to support Appwrite 0.9 and is not compatible with the latest Appwrite versions. We are planing to refactor it as part of the SDK Generator for better support and maintenance.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
⚠️ Warning - this SDK was designed to support Appwrite 0.9 and is not compatible with the latest Appwrite versions. We are planing to refactor it as part of the SDK Generator for better support and maintenance.
Easy to use Appwrite components for Svelte. Install it:
npm install svelte-appwrite
# or
yarn svelte-appwrite
<Browser />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>
| 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";
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";
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";
</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";
</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>
| 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";
</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.
<User />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
logout() | Logout current session. |
logoutAll() | Logout from all session. |
logoutFrom(session) | Logout from specific session. |
logout success.logout failure.logoutFrom success.logoutFrom failure.logoutAll success.logoutAll failure.<Create />let:actions
| Name | Description |
|---|---|
create(email, password, name) | Creates a user. |
create success.create failure.<Delete />let:actions
| Name | Description |
|---|---|
delete() | Deletes currently logged in user. |
delete success.delete failure.<Preferences />let:actions
| Name | Description |
|---|---|
reload() | Reloads preferences. |
update(prefs) | Update preferences. |
reload success.reload failure.update success.update failure.<RecoverPassword />let:actions
| Name | Description |
|---|---|
recover(email, url) | Recover password. |
complete(user, secret, password, passwordAgain) | Complete password recovery. |
reload success.reload failure.update success.update failure.<Update />let:actions
| Name | Description |
|---|---|
name(name) | Update name. |
email(email, password) | Update email. |
password(password, oldPassword) | Update password. |
name success.name failure.email success.email failure.password success.password failure.<Verification />let:actions
| Name | Description |
|---|---|
create(url) | Create Verification. |
complete(user, secret) | Complete Verification. |
create success.create failure.complete success.complete failure.The Auth components allow you to authenticate a user account.
<AuthEmail />authorize success.authorize failure.<AuthOAuth2 />| 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.
<Browser /><CreditCard /><Favicon /><Flag /><Image /><QR />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.