{#each Array.from({ length: 4 }) as _, i}
{#each testimonials as testimonial}
diff --git a/src/lib/components/shared/button.svelte b/src/lib/components/shared/button.svelte
index 07d81fee4..01c3de13b 100644
--- a/src/lib/components/shared/button.svelte
+++ b/src/lib/components/shared/button.svelte
@@ -2,7 +2,7 @@
import { classNames } from '$lib/utils/classnames';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
import { cva, type VariantProps } from 'cva';
- import InlineTag from '../ui/InlineTag.svelte';
+ import InlineTag from '../ui/inline-tag.svelte';
const button = cva(
[
diff --git a/src/lib/components/shared/dialog.svelte b/src/lib/components/shared/dialog.svelte
index 7006b1e2c..61c13c25e 100644
--- a/src/lib/components/shared/dialog.svelte
+++ b/src/lib/components/shared/dialog.svelte
@@ -27,14 +27,14 @@
{@render children()}
{:else}
-
{
+ onclick={() => {
if (browser && window) window.open(url, '_blank');
}}
>
{@render children()}
-
+
{/if}
{#if $open}
diff --git a/src/lib/components/ui/icon/icon.svelte b/src/lib/components/ui/icon/icon.svelte
index 47bdaa899..a740af026 100644
--- a/src/lib/components/ui/icon/icon.svelte
+++ b/src/lib/components/ui/icon/icon.svelte
@@ -1,13 +1,11 @@
-
diff --git a/src/lib/components/ui/masonry.svelte b/src/lib/components/ui/masonry.svelte
new file mode 100644
index 000000000..30c6d2fdb
--- /dev/null
+++ b/src/lib/components/ui/masonry.svelte
@@ -0,0 +1,89 @@
+
+
+
+
+
+ {@render children()}
+
diff --git a/src/lib/components/ui/switch.svelte b/src/lib/components/ui/switch.svelte
index 72bf7c6c4..d83c85a9a 100644
--- a/src/lib/components/ui/switch.svelte
+++ b/src/lib/components/ui/switch.svelte
@@ -1,35 +1,28 @@
-
+ >
+
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index c3b813df6..e5d50d0ed 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -1,5 +1,4 @@
-
-
-
-
-
- Thousands of developers scale with Appwrite_
-
-
- “{text.partOne}
- {text.partTwo}”
-
-
- {#if alternateInfo}
-
-
-
-
- {testimonial.name},
-
- {testimonial.title} at {testimonial.company}
-
-
- {/if}
-
-
-
-
- {#each correctStats as stat, i}
-
-
-
- {stat.description}
-
-
- {/each}
-
-
-
-
-
- {#each correctStats as stat, i}
-
-
-
- {stat.description}
-
-
- {/each}
-
-
-
-
-
-
-
-
-
-
diff --git a/src/routes/(marketing)/(assets)/icons/android.svg b/src/routes/(marketing)/(assets)/icons/android.svg
new file mode 100644
index 000000000..3f77efd6b
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/android.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/apple.svg b/src/routes/(marketing)/(assets)/icons/apple.svg
new file mode 100644
index 000000000..c263d60fd
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/apple.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/calendar.svg b/src/routes/(marketing)/(assets)/icons/calendar.svg
new file mode 100644
index 000000000..ac7307f01
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/calendar.svg
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/dart.svg b/src/routes/(marketing)/(assets)/icons/dart.svg
new file mode 100644
index 000000000..b7fd64416
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/dart.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/deno.svg b/src/routes/(marketing)/(assets)/icons/deno.svg
new file mode 100644
index 000000000..653987256
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/deno.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/email.svg b/src/routes/(marketing)/(assets)/icons/email.svg
new file mode 100644
index 000000000..7d59ff367
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/email.svg
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/flutter.svg b/src/routes/(marketing)/(assets)/icons/flutter.svg
new file mode 100644
index 000000000..f6dd9a4c4
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/flutter.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/go.svg b/src/routes/(marketing)/(assets)/icons/go.svg
new file mode 100644
index 000000000..9ac2e7a93
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/go.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/javascript.svg b/src/routes/(marketing)/(assets)/icons/javascript.svg
new file mode 100644
index 000000000..cdb965add
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/javascript.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/kotlin.svg b/src/routes/(marketing)/(assets)/icons/kotlin.svg
new file mode 100644
index 000000000..4f998bc49
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/kotlin.svg
@@ -0,0 +1,28 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/messages.svg b/src/routes/(marketing)/(assets)/icons/messages.svg
new file mode 100644
index 000000000..c0f7ca666
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/messages.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/net.svg b/src/routes/(marketing)/(assets)/icons/net.svg
new file mode 100644
index 000000000..c8837fe58
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/net.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/node.svg b/src/routes/(marketing)/(assets)/icons/node.svg
new file mode 100644
index 000000000..725b978fc
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/node.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/php.svg b/src/routes/(marketing)/(assets)/icons/php.svg
new file mode 100644
index 000000000..f773b9154
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/php.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/python.svg b/src/routes/(marketing)/(assets)/icons/python.svg
new file mode 100644
index 000000000..8531a6998
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/python.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/react.svg b/src/routes/(marketing)/(assets)/icons/react.svg
new file mode 100644
index 000000000..649c1f9ef
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/react.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/ruby.svg b/src/routes/(marketing)/(assets)/icons/ruby.svg
new file mode 100644
index 000000000..381d3e671
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/ruby.svg
@@ -0,0 +1,120 @@
+
diff --git a/src/routes/(marketing)/(assets)/icons/settings.svg b/src/routes/(marketing)/(assets)/icons/settings.svg
new file mode 100644
index 000000000..b23fce655
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/settings.svg
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/icons/swift.svg b/src/routes/(marketing)/(assets)/icons/swift.svg
new file mode 100644
index 000000000..3964e2df4
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/icons/swift.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/routes/(marketing)/(assets)/images/puzzle.svg b/src/routes/(marketing)/(assets)/images/puzzle.svg
new file mode 100644
index 000000000..65937ce27
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/images/puzzle.svg
@@ -0,0 +1,151 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/images/site.png b/src/routes/(marketing)/(assets)/images/site.png
new file mode 100644
index 000000000..f11a0236f
Binary files /dev/null and b/src/routes/(marketing)/(assets)/images/site.png differ
diff --git a/src/routes/(marketing)/(assets)/images/storage.webp b/src/routes/(marketing)/(assets)/images/storage.webp
new file mode 100644
index 000000000..be5749948
Binary files /dev/null and b/src/routes/(marketing)/(assets)/images/storage.webp differ
diff --git a/src/routes/(marketing)/(assets)/images/top-right.svg b/src/routes/(marketing)/(assets)/images/top-right.svg
new file mode 100644
index 000000000..5d9155bde
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/images/top-right.svg
@@ -0,0 +1,99 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/logos/apple.svg b/src/routes/(marketing)/(assets)/logos/apple.svg
new file mode 100644
index 000000000..02747e06f
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/apple.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/(marketing)/(assets)/logos/devkind.svg b/src/routes/(marketing)/(assets)/logos/devkind.svg
new file mode 100644
index 000000000..9c41f5849
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/devkind.svg
@@ -0,0 +1,88 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/logos/github.svg b/src/routes/(marketing)/(assets)/logos/github.svg
new file mode 100644
index 000000000..d5ba419d9
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/github.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/(marketing)/(assets)/logos/google.svg b/src/routes/(marketing)/(assets)/logos/google.svg
new file mode 100644
index 000000000..24495cc7f
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/google.svg
@@ -0,0 +1,21 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/logos/k-collect.svg b/src/routes/(marketing)/(assets)/logos/k-collect.svg
new file mode 100644
index 000000000..5bc23e56e
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/k-collect.svg
@@ -0,0 +1,40 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/logos/langx.svg b/src/routes/(marketing)/(assets)/logos/langx.svg
new file mode 100644
index 000000000..a8ac9ee9c
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/langx.svg
@@ -0,0 +1,18 @@
+
\ No newline at end of file
diff --git a/src/routes/(marketing)/(assets)/logos/microsoft.svg b/src/routes/(marketing)/(assets)/logos/microsoft.svg
new file mode 100644
index 000000000..510ebf904
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/microsoft.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/(marketing)/(assets)/logos/product-hunt.svg b/src/routes/(marketing)/(assets)/logos/product-hunt.svg
new file mode 100644
index 000000000..322ae5355
--- /dev/null
+++ b/src/routes/(marketing)/(assets)/logos/product-hunt.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/routes/(marketing)/(components)/animated-logo.svelte b/src/routes/(marketing)/(components)/animated-logo.svelte
new file mode 100644
index 000000000..8614a4da5
--- /dev/null
+++ b/src/routes/(marketing)/(components)/animated-logo.svelte
@@ -0,0 +1,47 @@
+
+
+
+ {@render children()}
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte b/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte
new file mode 100644
index 000000000..6980d1f9b
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/auth.svelte
@@ -0,0 +1,139 @@
+
+
+
{
+ trackEvent(`bento-auth-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Auth
+
+
+ Authenticate users securely with multiple login methods like Email/Password, SMS, OAuth, Anonymous, and Magic URLs.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ or sign up with
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte
new file mode 100644
index 000000000..a12995c88
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/databases.svelte
@@ -0,0 +1,319 @@
+
+
+
{
+ trackEvent(`bento-databases-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Databases
+
+
+ Scalable and robust databases backed by your favorite technologies.
+
+
+
+
Products
+
+
+
+
+ {#each collectionKeys as heading}
+ |
+ {heading}
+
+ |
+ {/each}
+
+
+
+ {#each collections as collection, c}
+ {@const isSweaters = collection.Category === 'Sweaters'}
+
+ {#each Object.values(collection) as item, i}
+ {@const isLastProduct = c === products.length - 1}
+ {@const isLastItem = i === Object.values(collection).length - 1}
+ |
+ {#if isLastItem}
+
+
+
+ ...{item}
+ {:else}
+ {item}
+ {/if} |
+ {/each}
+
+ {/each}
+
+
+
+
+
+
+
Sweaters
+
+
+
+
+ {#each keys as key}
+ |
+ {key}
+
+ |
+ {/each}
+
+
+
+ {#each products as product, p}
+
+ {#each Object.values(product) as item, i}
+ {@const isLastProduct = p === products.length - 1}
+ {@const isLastItem =
+ i === Object.values(product).length - 1}
+ | {item} |
+ {/each}
+
+ {/each}
+
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/functions.svelte b/src/routes/(marketing)/(components)/bento/(animations)/functions.svelte
new file mode 100644
index 000000000..6f5193ecd
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/functions.svelte
@@ -0,0 +1,162 @@
+
+
+
{
+ trackEvent(`bento-functions-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Functions
+
+
+ Deploy and scale serverless functions in 30+ secure, isolated runtimes in 13 languages.
+
+
+
+
+ {#each commands.slice(0, 2) as command, i}
+ {@render Command({ command })}
+ {/each}
+
+
+ UpdateProfile
+
+ {#if complete}
+
+ {/if}
+
+
+
+ {#each commands.slice(3) as command, i}
+ {@render Command({ command })}
+ {/each}
+
+
+
+
+
+
+{#snippet Command({ command }: { command: string })}
+
+{/snippet}
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte b/src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte
new file mode 100644
index 000000000..685900b9b
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte
@@ -0,0 +1,143 @@
+
+
+
{
+ trackEvent(`bento-messaging-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Messaging
+
+
+ Set up a full-functioning messaging service that covers multiple channels under one unified platform.
+
+
+
+
+
+
+ New security measures added now
+
+
+ Check out our latest security updates to protect your account!
+
+
+
+
+
+
+
{format(new Date(), 'h:mm')}
+
+
+
+
+
+
+
+
+
+ {#each [Messages, Settings, Calendar] as icon}
+
+
+
+ {/each}
+
+ {#each Array.from({ length: 12 }) as _, index}
+
+ {/each}
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte b/src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte
new file mode 100644
index 000000000..4af17f190
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte
@@ -0,0 +1,231 @@
+
+
+
{
+ trackEvent(`bento-realtime-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Realtime
+
+
+ Subscribe and react to any Appwrite event using the Realtime
+ API.
+
+
+
+
+
+
+
+
+
+
+
+ Sara
+
+
+
+
+
+
+ Aditya
+
+
+
+
+
+
+ Walter
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/sites.svelte b/src/routes/(marketing)/(components)/bento/(animations)/sites.svelte
new file mode 100644
index 000000000..70b545592
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/sites.svelte
@@ -0,0 +1,185 @@
+
+
+
{
+ trackEvent(`bento-sites-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Sites
+
+
+ Host and maintain your website domains and frontend code.
+ Integrated with all Appwrite products.
+
+
+
+
+ {#each Array.from({ length: 3 }) as _}
+
+ {/each}
+
+
+
+
+
+
+
+
+ Deployment logs
+ Building
+
+
+
+ {seconds}s
+
+
+
+
+
+ {#each text as { timestamp, content }, i}
+
+ {timestamp}
+ {content}
+
+ {/each}
+
+ 18:31:23.305
+ {lastLine}
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/(animations)/storage.svelte b/src/routes/(marketing)/(components)/bento/(animations)/storage.svelte
new file mode 100644
index 000000000..ccc21f799
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/(animations)/storage.svelte
@@ -0,0 +1,116 @@
+
+
+
{
+ trackEvent(`bento-storage-click`);
+ }}
+ bind:this={container}
+>
+
+
+
+
Storage
+
+
+ Securely store files with advanced compression, encryption
+ and image transformations.
+
+
+
+ {#each [1, 2, 3, 4] as _, i}
+
+ {/each}
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/bento/bento.svelte b/src/routes/(marketing)/(components)/bento/bento.svelte
new file mode 100644
index 000000000..8e1500504
--- /dev/null
+++ b/src/routes/(marketing)/(components)/bento/bento.svelte
@@ -0,0 +1,126 @@
+
+
+
+
+
+ All the products you need, in one platform
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/case-studies.svelte b/src/routes/(marketing)/(components)/case-studies.svelte
new file mode 100644
index 000000000..654743419
--- /dev/null
+++ b/src/routes/(marketing)/(components)/case-studies.svelte
@@ -0,0 +1,149 @@
+
+
+
+
+ {#each studies as study, i}
+
+ 
+
+
+
+
+
+ {study.headline}
+
+
+
+
+ "{study.blurb}"
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/dashboard.svelte b/src/routes/(marketing)/(components)/dashboard.svelte
new file mode 100644
index 000000000..2b7b1dd45
--- /dev/null
+++ b/src/routes/(marketing)/(components)/dashboard.svelte
@@ -0,0 +1,1137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/features.svelte b/src/routes/(marketing)/(components)/features.svelte
new file mode 100644
index 000000000..4fc91f02a
--- /dev/null
+++ b/src/routes/(marketing)/(components)/features.svelte
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+ Self-host your data or take it to the Cloud_
+
+
+ Migrate your data from and to any platform at any time with Appwrite’s migrations
+ API. With built-in security and privacy for peace of mind.
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/grid-paper.svelte b/src/routes/(marketing)/(components)/grid-paper.svelte
new file mode 100644
index 000000000..8421c821e
--- /dev/null
+++ b/src/routes/(marketing)/(components)/grid-paper.svelte
@@ -0,0 +1,23 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/routes/(marketing)/(components)/hero-banner.svelte b/src/routes/(marketing)/(components)/hero-banner.svelte
new file mode 100644
index 000000000..a0010965e
--- /dev/null
+++ b/src/routes/(marketing)/(components)/hero-banner.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+ New
+
+ {title}
+
+
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
new file mode 100644
index 000000000..f5a1ebd93
--- /dev/null
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+ Build like a team of hundreds_
+
+
+
+
+ Appwrite is an open-source, all-in-one development platform. Use built-in backend
+ infrastructure and web hosting, all from a single place.
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/logo-list.svelte b/src/routes/(marketing)/(components)/logo-list.svelte
new file mode 100644
index 000000000..da4dbe535
--- /dev/null
+++ b/src/routes/(marketing)/(components)/logo-list.svelte
@@ -0,0 +1,129 @@
+
+
+
+
+
+ {title}
+
+
+ {#each logoGroups as group, i}
+
+ {#each group as { src, alt, width, height }, index}
+
+ ![]()
+
+ {/each}
+
+ {/each}
+
+
+
diff --git a/src/routes/(marketing)/(components)/map.svelte b/src/routes/(marketing)/(components)/map.svelte
new file mode 100644
index 000000000..48d3fccea
--- /dev/null
+++ b/src/routes/(marketing)/(components)/map.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
+ The Appwrite Network_
+
+
+ Pick one of our many cloud regions or edges to meet your project's needs and reduce
+ latency.
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/network-map.svelte b/src/routes/(marketing)/(components)/network-map.svelte
new file mode 100644
index 000000000..7b0002ff4
--- /dev/null
+++ b/src/routes/(marketing)/(components)/network-map.svelte
@@ -0,0 +1,98 @@
+
+
+
+
+
+ The Appwrite Network_
+
+
+ Pick one of our many cloud regions or edges to meet your project's needs and reduce
+ latency.
+
+
+
More about the Appwrite Network
+
+
+
+
+
+ {#each navItems as { label, icon }}
+ {@const isActive = $value === label.toLowerCase()}
+
+ {/each}
+
+
diff --git a/src/routes/(marketing)/(components)/platforms.svelte b/src/routes/(marketing)/(components)/platforms.svelte
new file mode 100644
index 000000000..47d8c58bb
--- /dev/null
+++ b/src/routes/(marketing)/(components)/platforms.svelte
@@ -0,0 +1,169 @@
+
+
+
+
+
+ Designed for the tools you work with
+
+
+
+ {#each [1, 2] as _, i}
+
+
+ {#each platforms as platform, i}
+
+
+
+ {/each}
+
+
+ {/each}
+
+
+
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
new file mode 100644
index 000000000..ec2c44c81
--- /dev/null
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
+
+ Start building like a team of hundreds today_
+
+
+
+
+
+
+
+
+
+ {#each plans as { name, price, tag: label, subtitle, description, event }}
+ {@const isEnterprise = name === 'Enterprise'}
+
+
+ {name}
+ {#if label}
+ {label}
+ {/if}
+
+
+
{price}
+
+ {#if subtitle}
+ {subtitle}
+ {/if}
+
+
+
+ {description}
+
+
+
+
+
+ {/each}
+
+
+
diff --git a/src/routes/(marketing)/(components)/scale.svelte b/src/routes/(marketing)/(components)/scale.svelte
new file mode 100644
index 000000000..9659470c5
--- /dev/null
+++ b/src/routes/(marketing)/(components)/scale.svelte
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+ Thousands of developers scale with Appwrite_
+
+
+ “{@render children()}”
+
+
+ {#if testimonial}
+
+
+
+
+ {testimonial.name},
+
+ {testimonial.title} at {testimonial.company}
+
+
+ {/if}
+
+
+
+
+ {#each localStats as stat, i}
+
+
+ {#if browser}
+
+
+ {stat.description}
+ {/if}
+
+
+ {/each}
+
+
+
+
+
+ {#each localStats as stat, i}
+
+
+ {#if browser}
+
+
+ {stat.description}
+
+ {/if}
+
+
+ {/each}
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/(components)/spinner.svelte b/src/routes/(marketing)/(components)/spinner.svelte
new file mode 100644
index 000000000..89a428eeb
--- /dev/null
+++ b/src/routes/(marketing)/(components)/spinner.svelte
@@ -0,0 +1,30 @@
+
+
+
diff --git a/src/routes/(marketing)/(components)/templates.svelte b/src/routes/(marketing)/(components)/templates.svelte
new file mode 100644
index 000000000..9bd46e7ff
--- /dev/null
+++ b/src/routes/(marketing)/(components)/templates.svelte
@@ -0,0 +1,81 @@
+
+
+
+
+
+ Get started with our template collection_
+
+
+ Start building with one of Appwrite’s templates with quick setup and self-hosting.
+
+
+
+ {#each templates as template}
+
+
+
+ {@html template.icon}
+
+
+
+
+ {template.label}
+
+
+
+ {/each}
+
+
diff --git a/src/routes/(marketing)/+layout.svelte b/src/routes/(marketing)/+layout.svelte
new file mode 100644
index 000000000..674fc10b1
--- /dev/null
+++ b/src/routes/(marketing)/+layout.svelte
@@ -0,0 +1,15 @@
+
+
+
+{@render children()}
+
+
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
new file mode 100644
index 000000000..7be1a4ed4
--- /dev/null
+++ b/src/routes/(marketing)/+page.svelte
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+
+
+
+ Just like a Swiss Army Knife you can choose and use the tools
+ that you need with Appwrite.
+
+
+
+
+
+ The switch to using Appwrite brought
+ infinite value that I'm still discovering today.
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/(marketing)/+page.ts b/src/routes/(marketing)/+page.ts
new file mode 100644
index 000000000..189f71e2e
--- /dev/null
+++ b/src/routes/(marketing)/+page.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 38f55242f..c1f05fd29 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -58,6 +58,7 @@
import { trackEvent } from '$lib/actions/analytics';
import { saveReferrerAndUtmSource } from '$lib/utils/utm';
import { Sprite } from '$lib/components/ui/icon/sprite';
+ import { setTheme, ThemeProvider } from '$lib/providers/theme';
function applyTheme(theme: Theme) {
const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
@@ -162,6 +163,7 @@
>
+
diff --git a/src/routes/DeveloperCard.svelte b/src/routes/DeveloperCard.svelte
deleted file mode 100644
index 8cd20d201..000000000
--- a/src/routes/DeveloperCard.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
{name}
-
{tag}
-
-
-
-
-
-
-
-
diff --git a/src/routes/blog/author/arman/+page.markdoc b/src/routes/blog/author/arman/+page.markdoc
index acdea39e2..903eb397f 100644
--- a/src/routes/blog/author/arman/+page.markdoc
+++ b/src/routes/blog/author/arman/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
name: Arman
slug: arman
-role: Frontend Developer
+role: Product Engineer
bio: In ♥ with Svelte and Vue, currently working at Appwrite
avatar: /images/avatars/arman.png
twitter: https://twitter.com/NikNotNik
diff --git a/src/routes/blog/author/binyamin-yawitz/+page.markdoc b/src/routes/blog/author/binyamin-yawitz/+page.markdoc
index ff2de5bc5..bee29e162 100644
--- a/src/routes/blog/author/binyamin-yawitz/+page.markdoc
+++ b/src/routes/blog/author/binyamin-yawitz/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
name: Binyamin Yawitz
slug: binyamin-yawitz
-role: Software Engineer
+role: Platform Engineer
bio: Developer with multilingual skills and systems experience.
avatar: /images/avatars/binyamin.png
github: https://github.com/byawitz/
diff --git a/src/routes/blog/author/bradley-schofield/+page.markdoc b/src/routes/blog/author/bradley-schofield/+page.markdoc
index 498c8e1d9..54c8050dd 100644
--- a/src/routes/blog/author/bradley-schofield/+page.markdoc
+++ b/src/routes/blog/author/bradley-schofield/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
slug: bradley-schofield
name: Bradley Schofield
-role: Software Engineer
+role: Platform Engineer
bio: Integrating platforms and managing data in Appwrite.
avatar: /images/avatars/bradley.png
twitter: https://x.com/ionicisere
diff --git a/src/routes/blog/author/damodar-lohani/+page.markdoc b/src/routes/blog/author/damodar-lohani/+page.markdoc
index 332858c59..d6e490ec0 100644
--- a/src/routes/blog/author/damodar-lohani/+page.markdoc
+++ b/src/routes/blog/author/damodar-lohani/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
slug: damodar-lohani
name: Damodar Lohani
-role: Engineer
+role: Platform Engineer
bio: Author, mentor, trainer, and tech consultant.
avatar: /images/avatars/damodar.png
twitter: https://twitter.com/lohanidamodar
diff --git a/src/routes/blog/author/luke-silver/+page.markdoc b/src/routes/blog/author/luke-silver/+page.markdoc
index 85894ed00..1593c99a4 100644
--- a/src/routes/blog/author/luke-silver/+page.markdoc
+++ b/src/routes/blog/author/luke-silver/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
slug: luke-silver
name: Luke B. Silver
-role: Software Engineer
+role: Platform Engineer
bio: Building integrations with and on Appwrite
avatar: /images/avatars/luke.png
twitter: https://twitter.com/lukebsilver
diff --git a/src/routes/blog/author/matej-baco/+page.markdoc b/src/routes/blog/author/matej-baco/+page.markdoc
index b730ef264..bf6502f3c 100644
--- a/src/routes/blog/author/matej-baco/+page.markdoc
+++ b/src/routes/blog/author/matej-baco/+page.markdoc
@@ -2,7 +2,7 @@
layout: author
slug: matej-baco
name: Matej Bačo
-role: Software Engineer
+role: Engineering Lead
bio: Always building something cool with Appwrite
avatar: /images/avatars/matej.png
twitter: https://twitter.com/_meldiron
diff --git a/src/routes/blog/post/10-open-source-alternatives-to-popular-software-for-startups/+page.markdoc b/src/routes/blog/post/10-open-source-alternatives-to-popular-software-for-startups/+page.markdoc
index 979194a7f..70b995012 100644
--- a/src/routes/blog/post/10-open-source-alternatives-to-popular-software-for-startups/+page.markdoc
+++ b/src/routes/blog/post/10-open-source-alternatives-to-popular-software-for-startups/+page.markdoc
@@ -23,9 +23,15 @@ In simple words, open-source software is made available with a license that allo
Unlike traditional software, which is owned and controlled by a company, open-source products gives you full access to the code, so you can customize the software to meet your specific needs.
+It’s more than just access to the code. We’ve seen too many cases where startups got burned by closed platforms.
+
+A founder recently shared on [LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:7331362060750032896/) how their client lost $65,000 and their entire EdTech platform overnight. Just because the platform they were using filed for bankruptcy without warning. Fired all 1,500 employees. Locked every customer out. No access to code. No way to export data. No one to even reach out to.
+
+That’s what happens when your infrastructure is not in your control. This is why open-source matters. Because with open-source, you’re not dependent on a single company’s fate. You can self-host. You can migrate. You can fork the code and keep building.
+
# Benefits of open-source software
-While the huge benefit of an open-source product is the ability to customize it according to your needs, there are many other benefits to consider, like:
+While the huge benefit of an [open-source](https://opensource.org/) product is the ability to customize it according to your needs, there are many other benefits to consider, like:
## Cost savings
Open-source products generally offer budget-friendly options for businesses of all sizes. Many open-source projects are free to get started and you can pay as you scale or need additional support, which could be a great option for budget-tight teams.
@@ -44,34 +50,64 @@ Most open-source projects have self-hostable versions that allow you to host the
# 10 open-source product alternatives
## 1. [n8n](https://n8n.io/)
+
+
+
**n8n** is an open-source alternative to **Zapier**. It allows users to automate workflows by connecting various apps and services, similar to Zapier, but with the added advantage of being fully customizable.
## 2. [Appsmith](https://www.appsmith.com/)
+
+
+
Appsmith is an open-source alternative to Retool. It enables you to build custom internal tools quickly by connecting to databases, APIs, and other services. It provides a drag-and-drop interface to design apps, making it easy to create dashboards and workflows.
## 3. [Documenso](https://documenso.com/)
+
+
+
Documenso is an open-source alternative to Docusign. It is a document management platform designed to help businesses organize, store, and collaborate on documents. It offers features like document indexing, searching, and version control, allowing teams to manage their files efficiently.
## 4. [Dub.co](https://dub.co/)
+
+
+
Dub.co is an open-source alternative to Bitly. It is a link management platform designed for modern marketing teams. It allows users to create branded short links using custom domains, track clicks with detailed analytics, and manage marketing campaigns efficiently.
## 5. [AppFlowy](https://appflowy.com/)
+
+
+
AppFlowy is an open-source alternative to Notion. It provides a flexible workspace for note-taking, project management, and collaboration with features like customizable templates, task tracking, and databases.
-## 6. [WebStudio](https://webstudio.is/)
-WebStudio is an open-source alternative to WebFlow. An open-source platform for building and managing websites with a focus on simplicity and flexibility. It provides an intuitive drag-and-drop interface, allowing users to design websites without coding.
+## 6. [Webstudio](https://webstudio.is/)
+
+
+
+Webstudio is an open-source alternative to Webflow. An open-source platform for building and managing websites with a focus on simplicity and flexibility. It provides an intuitive drag-and-drop interface, allowing users to design websites without coding.
## 7. [Typesense](https://typesense.org/)
+
+
+
Typesense is an open-source alternative to Algolia. A fast and relevant search engine built for developers. It allows you to easily integrate full-text search functionality into your applications with features like typo tolerance, filtering, faceting, and real-time indexing.
## 8. [PostHog](https://posthog.com/)
+
+
+
PostHog is an open-source alternative to Mixpanel. A product analytics platform designed to help businesses track user behavior and make data-driven decisions. It provides teams with tools that allow them to gain insights into how users interact with their products.
## 9. [Sentry](https://sentry.io/welcome/)
+
+
+
Sentry is an open-source alternative to Raygun. An error tracking and monitoring platform that helps developers identify and fix issues in their applications in real-time. It provides detailed error reports making it easier to diagnose and resolve bugs quickly.
## 10. [Appwrite](https://appwrite.io/)
-Appwrite is an open-source alternative to Firebase. A backend-as-a-service (BaaS) platform that simplifies the development of web and mobile applications. It provides developers with tools for user authentication, databases, file storage, and real-time capabilities, all through easy-to-use APIs.
+
+
+
+Appwrite is an open-source alternative to Firebase, Vercel and Auth0. An all-in-one development platform that provides you with built-in backend infrastructure and hosting. It includes everything from auth, databases, and storage to serverless functions and real-time APIs, so you can focus on building, not wiring things together.
# Conclusion
In conclusion, open-source products gives your startup the flexibility, control, and cost savings you need to scale and innovate.
diff --git a/src/routes/blog/post/5-MCP-startup-ideas-to-build-in-2025/+page.markdoc b/src/routes/blog/post/5-MCP-startup-ideas-to-build-in-2025/+page.markdoc
index 351fdecd1..c59e27762 100644
--- a/src/routes/blog/post/5-MCP-startup-ideas-to-build-in-2025/+page.markdoc
+++ b/src/routes/blog/post/5-MCP-startup-ideas-to-build-in-2025/+page.markdoc
@@ -9,6 +9,7 @@ author: veeresh-mulge
callToAction: true
unlisted: true
category: tutorial
+call_to_action: true
---
This has to be the best time in history to start a business. With so many advancements in AI tools and agents, it has never been this easy to build and scale your startup. The next breed of billion-dollar companies will be tiny teams backed by AI agents and workflows.
@@ -39,7 +40,7 @@ MCP is just the standardized way of making this happen. Instead of every AI need
MCP was developed by Anthropic and released as an open standard in November 2024, making it a relatively new but rapidly growing solution.
-We've covered everything you need to know about MCP in a recent blog, but let's dive into 5 MCP or AI agents startup opportunities you can start building today.
+We've covered everything you need to know about MCP in a recent [blog](https://appwrite.io/blog/post/what-is-mcp), but let's dive into 5 MCP or AI agents startup opportunities you can start building today.
# 1. MCP App Store
Create an MCP APP Store, where users can browse and deploy various MCP servers. Think of it like an app store, but for MCP servers. Developers could look through different MCP servers, find the ones they need, and deploy them with just a few clicks.
@@ -49,6 +50,8 @@ The idea is to simplify the process of integrating different services with LLMs,
# 2. Incident Tracer
When your app breaks, whether it's a bug or an outage, an MCP agent traces every log, commit, and Slack message to give you a full incident report in seconds. So, instead of manually digging through logs or trying to piece together what went wrong, the MCP agent automatically collects all the relevant information, creating a detailed report that helps you quickly understand the issue.
+{% call_to_action title="Build your startup with Appwrite" description="An all-in-one development platform for you to develop, host, and scale your products." point1="Cloud credits" point2="Priority support" point3="Ship faster" point4="Built-in security and compliance" cta="Apply for the program" url="https://appwrite.io/startups" /%}
+
# 3. Task Assistant
An MCP-powered agent that shadows founders, reading emails, meetings, tasks, and documents. It provides daily summaries and suggests the next best actions, acting like your personal Chief of Staff. This allows founders to stay focused on what matters while it keeps track of everything and ensures nothing slips through the cracks.
@@ -63,3 +66,8 @@ AIChangelog tracks everything every AI agent does and why, creating a detailed,
MCP changes everything. Before, AI agents were isolated. Now, they connect, collaborate, and scale. This is a huge opportunity to build AI agents and create connected, intelligent solutions that automate tasks, streamline processes, and solve real-world problems.
The Appwrite's Startups Program can help you do that with the tools and support you need to create these AI-driven products. [Apply today](appwrite.io/startups) and start building.
+
+# Further reading
+- [Appwrite MCP documentation](https://appwrite.io/docs/tooling/mcp?doFollow=true)
+- [What exactly is MCP, and why is it trending?](https://appwrite.io/blog/post/what-is-mcp)
+- [Anthropic MCP documentation](https://docs.anthropic.com/en/docs/agents-and-tools/mcp)
diff --git a/src/routes/blog/post/appwrite-compared-to-supabase/+page.markdoc b/src/routes/blog/post/appwrite-compared-to-supabase/+page.markdoc
index f76233b5f..e8c8e7cba 100644
--- a/src/routes/blog/post/appwrite-compared-to-supabase/+page.markdoc
+++ b/src/routes/blog/post/appwrite-compared-to-supabase/+page.markdoc
@@ -133,6 +133,16 @@ Self-hosting support essentially means a developer can deploy the application on
- Appwrite offers one-click setups for DigitalOcean, Gitpod, and Akamai Compute. Supabase offers the same for DigitalOcean and AWS.
- Supabase features community-maintained helm charts to self-host using Kubernetes.
+## Hosting
+
+Appwrite offers native hosting as part of its all-in-one platform. That means you can develop, deploy, and scale your application all from a single platform. Supabase, while it provides backend services, does not include frontend hosting.
+
+*Differences:*
+
+- Appwrite includes built-in hosting for static and dynamic sites via Appwrite Sites. Supabase does not offer frontend hosting. You must be dependent on third-party tools like Vercel or Netlify to host your application.
+- Appwrite Sites supports server-side rendering out of the box.
+- With Appwrite, developers can manage everything from frontend and backend to environments, deployments, and monitoring from a single control panel, while Supabase requires using multiple services and dashboards, increasing complexity.
+
## Support
Any developer-first product, regardless of how good and simple it may be, will need a system for support in case its consumers face any issues. Both Appwrite and Supabase have developed support offerings to ensure their consumers can share feedback and get the necessary help.
diff --git a/src/routes/blog/post/appwrite-homepage-redesign/+page.markdoc b/src/routes/blog/post/appwrite-homepage-redesign/+page.markdoc
new file mode 100644
index 000000000..f497903ea
--- /dev/null
+++ b/src/routes/blog/post/appwrite-homepage-redesign/+page.markdoc
@@ -0,0 +1,73 @@
+---
+layout: post
+title: Redesigning our homepage to reflect Appwrite’s new positioning
+description: A behind-the-scenes look at how we redesigned the Appwrite homepage to reflect our evolution from a BaaS to an all-in-one open-source development platform.
+date: 2025-06-11
+cover: /images/blog/appwrite-homepage-redesign/cover-image.png
+timeToRead: 08
+author: sara-kaandorp
+category: design
+featured: false
+callToAction: true
+---
+
+At Appwrite, we’ve grown from a Backend-as-a-Service into an open-source, all-in-one development platform. With the introduction of our newest product, Sites, we expanded our offering beyond backend services to include hosting. This shift meant our homepage needed to do more, it had to communicate the full breadth of what Appwrite now offers.
+
+# Phase 1: Setting the baseline
+
+Before jumping into design changes, we wanted to understand how the homepage was performing. That meant:
+
+- Recording baseline metrics of how our homepage was performing
+- Getting fresh insight into what kind of first impression our homepage was giving to developers who were new to Appwrite
+
+We ran a qualitative survey with 50 respondents who closely matched our target audience, but who were new to Appwrite. Instead of asking existing community members who already have a mental model of what Appwrite is, we wanted to get fresh insight into the first impression of a developer with no bias. The results were insightful.
+
+## What we heard:
+
+- Positive: People liked the clean layout and visual design. Many said the structure was easy to follow.
+- Confusing: Our messaging wasn’t clear enough. Some thought Appwrite was a DevOps tool, others a CMS, or just another Firebase clone.
+
+This validated what we suspected: while the design was polished, the story we told wasn’t fully landing.
+
+
+
+# Phase 2: Iterating on the story
+
+
+
+Based on those findings, we created a new homepage design in Figma and ran a second qualitative survey—this time on the proposed design with renewed messaging. The results were encouraging.
+
+
+
+## What we improved:
+
+- **Backend setup clarity**: More users grasped what Appwrite offers, though some still wanted more detail on how the setup works.
+- **Scalability**: Surfaced more often in feedback, indicating stronger visibility.
+- **Feature awareness**: Users showed deeper engagement with our capabilities.
+
+# Phase 3: Final design
+
+We simplified our messaging further and focused on showing—not just telling—what Appwrite offers. We:
+
+- Added components that give a quick visual and conceptual overview of our offering, without requiring visitors to read everything. We honed in on different user behaviors: some people want a fast impression; others want to scroll deep. Our content now supports both. (This is backed by UX research—see Nielsen Norman Group's work on scanning vs. reading behaviors.)
+
+
+
+- Repositioned Appwrite from just a BaaS to a complete platform with Sites, our hosting solution, clearly integrated into the story.
+
+- Selected testimonials strategically—highlighting impact metrics like time saved, cost reduction, and scalability, to build credibility with both developers and founders.
+
+
+
+While the main aim was to improve the story that we were trying to convey, we also further improved our visual language. We did a few iterations to further simplify our visuals and worked on an animation style that feels more natural. In our old page, we had animations based on scroll behavior that slightly hijacked user control—something developers disliked. The new animations and microinteractions make the page feel alive without taking away from the main purpose: understanding the story of Appwrite.
+
+
+
+With all these changes, we moved into a final design iteration—the version that’s now live.
+
+# What’s next
+
+We'll continue to refine our new homepage. There are still headlines we want to test, feature explanations to expand on, and new ways we can illustrate how Appwrite works.
+
+Redesigning a homepage is about crafting the clearest possible introduction to your product. And that process doesn't end with this launch.
+
diff --git a/src/routes/blog/post/chatbot-with-webllm-and-webgpu/+page.markdoc b/src/routes/blog/post/chatbot-with-webllm-and-webgpu/+page.markdoc
new file mode 100644
index 000000000..6f768f4de
--- /dev/null
+++ b/src/routes/blog/post/chatbot-with-webllm-and-webgpu/+page.markdoc
@@ -0,0 +1,499 @@
+---
+layout: post
+title: Build an offline AI chatbot with WebLLM and WebGPU
+description: Learn how to build an offline AI chatbot with WebLLM and WebGPU.
+date: 2025-06-10
+cover: /images/blog/chatbot-with-webllm-and-webgpu/cover.png
+timeToRead: 13
+author: ebenezer-don
+category: tutorial
+featured: false
+---
+
+When you hear "LLM," you probably think of APIs, tokens, and cloud infrastructure. But what if we could remove the server completely? That your browser could download a model, run it on your device, and answer questions in real time, all using just JavaScript and GPU acceleration?
+
+Local LLMs running inside the browser were nearly impossible just a year ago. But thanks to new technologies like WebLLM and WebGPU, you can now load a full language model into memory, run it on your device, and have a real-time conversation, all without a server.
+
+In this guide, we'll build a local chatbot that runs entirely in the browser. No backend. No API keys. By the end, you should have a good understanding of [WebLLM](https://webllm.mlc.ai/) and [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API), and will have built an app that looks and functions like this:
+
+
+
+You can also try out the app using this [live URL](https://ebenezerdon.github.io/simple-webllm-chat/).
+
+To build this, we need to first understand two important pieces: **WebLLM** and **WebGPU**.
+
+## What is WebLLM?
+
+WebLLM is an open-source project from the team at MLC (Machine Learning Compiler). It lets you run language models directly in your browser tab using GPU acceleration. The models are compiled into formats that your browser can understand and execute, no need to send data to a server.
+
+Why is this important?
+
+- It keeps user data private
+- It reduces latency
+- It works offline after the model download
+- It removes the need for API costs or rate limits
+
+Under the hood, WebLLM handles model loading, tokenization, execution, and streaming responses. It gives you a simple interface to load and chat with a model like LLaMA or Phi.
+
+But WebLLM can't do it alone. It needs hardware access, and that's where WebGPU comes in.
+
+## What is WebGPU?
+
+WebGPU is a new browser API that gives JavaScript access to the system's GPU, not just for drawing graphics, but for running large-scale parallel computations like matrix operations and tensor math.
+
+In our case, WebGPU lets the browser perform the heavy math required to generate text from an LLM.
+
+Here's what WebGPU does for us:
+
+- **Performance**: Runs faster than JavaScript or even WebAssembly for these workloads
+- **GPU-first**: Designed from the ground up for compute, not just rendering
+- **Accessibility**: Available across different browsers, though support varies by platform. As of June 2025:
+
+ - **Chrome/Edge**: Fully supported on Windows, Mac, and ChromeOS since version 113. On Linux, it requires enabling the `chrome://flags/#enable-unsafe-webgpu` flag
+ - **Firefox**: Available in Nightly builds by default, with stable release tentatively planned for Firefox 141
+ - **Safari**: Available in Safari Technology Preview, with support in iOS 18 and visionOS 2 betas via Feature Flags
+ - **Android**: Chrome 121+ supports WebGPU on Android
+
+For production applications, you should include proper WebGPU feature detection and provide fallbacks for unsupported browsers.
+
+Together, WebLLM and WebGPU allow us to do something powerful: load a quantized language model directly in the browser and have real-time chat without any backend server.
+
+With this understanding of WebLLM and WebGPU, we can now start building!
+
+## Setting up the HTML for our AI chat app
+
+Before we write any JavaScript, we need a user interface. This will be the visible part of our app, the dropdown for selecting models, the chat area, and the input box.
+
+Here's the plan:
+
+- We'll create a container for everything
+- Add a select box for choosing the model
+- Include a progress bar for when the model is loading
+- Display the chat history
+- Create a form with a text input and a button to submit prompts
+
+To begin, create an `index.html` file and paste the following code inside it:
+
+```html
+
+
+
+
+
+
Browser LLM Chat Demo
+
+
+
+
+
Chat with LLM (In your browser)
+
+
+
+
+
+
+
+
Select a model and click "Load Model" to begin
+
+
+
+
+
+
+
+
+
+```
+
+In the HTML file, we've created a chat interface with controls for model selection and loading. The interface includes a chat output area, progress indicators, and an input form, which we need to let users interact with the AI model.
+
+### Model selection
+
+Notice that in the `div` with class `controls`, we have a `select` element for model selection and a `button` for loading the model. Here are the specifications for each model:
+
+| Model | Parameters | Q4 file size | VRAM needed |
+| ------------ | ------------ | ------------ | ----------- |
+| SmolLM2-360M | 360 million | ~270 MB | ~380 MB |
+| Phi-3.5-mini | 3.8 billion | ~2.4 GB | ~3.7 GB |
+| Llama-3.1-8B | 8.03 billion | ~4.9 GB | ~5 GB |
+
+When you're deciding which of these models to use in a browser environment with WebLLM, think first about what kind of work you want it to handle.
+
+- **SmolLM2-360M** is the smallest by a wide margin, which means it loads quickly and puts the least strain on your device. If you're writing short notes, rewriting text, or making quick coding helpers that run in a browser, this might be all you need.
+
+- **Phi-3.5-mini** brings more parameters and more capacity for reasoning, even though it still runs entirely in your browser. It's good for handling multi-step explanations, short document summarisation, or answering questions about moderately long prompts. If you're looking for a balance between size and capability, Phi-3.5-mini has a comfortable middle ground.
+
+- **Llama-3.1-8B** is the largest of the three and carries more of the general knowledge and pattern recognition that bigger models can offer. It's more reliable if you're dealing with open-ended dialogue, creative writing, or complex coding tasks. But you'll need more memory.
+
+Each of these models trades off size, memory use, and output quality in different ways. So choosing the right one depends on what your hardware can handle and what kind of prompts you plan to work with. All can run directly in modern browsers with WebGPU support.
+
+There are more models available at the [WebLLM repository](https://github.com/mlc-ai/web-llm), ranging from smaller models for mobile devices to larger ones for more capable systems.
+
+With the HTML in place, the next thing we'll do is work on the JavaScript implementation, then add some CSS to make it look nice. We're saving the CSS for the last step so we can focus on the core features.
+
+## Using WebLLM and WebGPU to build the chatbot
+
+Our JavaScript will do four main things:
+
+1. Load the selected model into memory
+2. Track the loading progress and show feedback
+3. Enable the chat form once the model is ready
+4. Stream the response back as the assistant types it out
+
+We'll build this piece by piece.
+
+### Step 1: Import WebLLM
+
+We need to bring in WebLLM so we can access the model engine.
+
+```js
+import { CreateMLCEngine } from '
'
+```
+
+This gives us the function that will initialize the model.
+
+### Step 2: Get references to the DOM elements
+
+Let's wire up the interface. We'll grab the elements we need so we can update them later.
+
+```js
+const output = document.getElementById('output')
+const form = document.getElementById('chat-form')
+const promptInput = document.getElementById('prompt')
+const submitButton = document.querySelector('button[type="submit"]')
+const modelSelect = document.getElementById('model-select')
+const loadModelButton = document.getElementById('load-model')
+const progressContainer = document.getElementById('progress-container')
+const progressFill = document.getElementById('progress-fill')
+const progressText = document.getElementById('progress-text')
+```
+
+We'll use these to display messages, show progress, and control the form state.
+
+### Step 3: Track the model engine
+
+We need a variable to hold the model once it's loaded.
+
+```js
+let engine = null
+```
+
+We'll update this later when the user loads a model.
+
+### Step 4: Show progress
+
+When downloading and initializing the model, we want to keep the user informed.
+
+```js
+const updateProgress = (percent) => {
+ progressContainer.style.display = 'block'
+ progressFill.style.width = `${percent}%`
+ progressText.textContent = `${percent}%`
+}
+```
+
+This sets the visual width of the progress bar and updates the percentage text.
+
+### Step 5: Load the model
+
+Here's the key function. We call this when the user clicks the "Load Model" button.
+
+```js
+const loadModel = async (modelId) => {
+ try {
+ output.textContent = 'Initializing...'
+ promptInput.disabled = true
+ submitButton.disabled = true
+ loadModelButton.disabled = true
+ progressContainer.style.display = 'none'
+```
+
+We first disable the interface to prevent interference while loading.
+
+Next, we make sure the browser supports WebGPU:
+
+```js
+if (!navigator.gpu) {
+ throw new Error('WebGPU not supported in this browser...')
+}
+```
+
+This check is crucial because WebGPU availability varies significantly across browsers and platforms. The code will gracefully fail if WebGPU isn't available, allowing you to show appropriate fallback content to users.
+
+Then we download and initialize the model:
+
+```js
+engine = await CreateMLCEngine(modelId, {
+ initProgressCallback: (progress) => {
+ let percent =
+ typeof progress === 'number'
+ ? Math.floor(progress * 100)
+ : Math.floor(progress.progress * 100)
+
+ updateProgress(percent)
+ output.textContent = `Loading model... ${percent}%`
+ },
+ useIndexedDBCache: true,
+})
+```
+
+Once complete:
+
+```js
+ output.textContent = 'Model ready! Ask me something!'
+ promptInput.disabled = false
+ submitButton.disabled = false
+ loadModelButton.disabled = false
+ } catch (error) {
+ loadModelButton.disabled = false
+ output.innerHTML += `Failed to load model: ${error.message}
`
+ }
+}
+```
+
+Now the model is ready to use.
+
+### Step 6: Handle chat form submission
+
+When the user types a question and presses enter, this block sends it to the model:
+
+```js
+form.addEventListener('submit', async (e) => {
+ e.preventDefault()
+
+ if (!engine) {
+ output.innerHTML += `No model loaded...
`
+ return
+ }
+
+ const prompt = promptInput.value.trim()
+ if (!prompt) return
+
+ output.textContent = `You: ${prompt}\\n\\nAssistant: `
+ promptInput.value = ''
+ promptInput.disabled = true
+ submitButton.disabled = true
+```
+
+Then we stream the assistant's response:
+
+```js
+ try {
+ const stream = await engine.chat.completions.create({
+ messages: [{ role: 'user', content: prompt }],
+ stream: true,
+ })
+
+ for await (const chunk of stream) {
+ const token = chunk.choices[0].delta.content || ''
+ output.textContent += token
+ output.scrollTop = output.scrollHeight
+ }
+
+ promptInput.disabled = false
+ submitButton.disabled = false
+ promptInput.focus()
+ } catch (error) {
+ output.innerHTML += `Error during chat: ${error.message}
`
+ promptInput.disabled = false
+ submitButton.disabled = false
+ }
+})
+```
+
+### Step 7: Trigger the model load on button click
+
+Finally, we hook up the "Load Model" button:
+
+```js
+loadModelButton.addEventListener('click', async () => {
+ await loadModel(modelSelect.value)
+})
+```
+
+## Adding CSS styling
+
+Now that we have the JavaScript in place, let's add some CSS to give the app a clean look. In the `