OxideModern Svelte Web Framework

Quick Example ​

Create a full-stack application with just a few files:

<!-- src/app/index.svelte -->
<script lang="ts">
  import { rpc } from '$oxide'

  const posts = await rpc.api.posts.list()
</script>

<h1>Latest Posts</h1>
{#each posts as post}
  <article>{post.title}</article>
{/each}

// src/app/api/posts.ts
import { base } from "$lib/orpc";

export const router = {
  list: base.handler(async ({ context }) => {
    return await context.db.posts.findMany();
  }),
};

Core Features ​

🗂️ File System Routing ​

Organize your app with intuitive file structure:

src/app/
├── index.svelte           → /
├── about.svelte          → /about
├── users/
│   ├── [id].svelte       → /users/:id
│   └── [id]/
│       └── settings.svelte → /users/:id/settings
└── api/
    ├── users.ts          → /api/users/*
    └── posts.ts          → /api/posts/*

🔌 Type-Safe APIs ​

Build APIs with full type safety and automatic client generation:

// Define once
export const router = {
  getUser: base
    .input(z.object({ id: z.string() }))
    .handler(async ({ input, context }) => {
      return await context.db.users.findUnique({ where: { id: input.id } });
    }),
};

// Use everywhere with full types
const user = await rpc.api.users.getUser({ id: "123" });

🎨 Modern Svelte 5 ​

Leverage the latest Svelte features with runes and enhanced reactivity:

<script lang="ts">
  import { useRoute, rpc } from '$oxide'

  const route = useRoute()
  let posts = $state([])

  $effect(() => {
    const query = route.query.get('q') || ''
    rpc.api.posts.search({ query }).then(results => {
      posts = results
    })
  })
</script>

Why Oxide? ​

• Zero Configuration: File system conventions eliminate boilerplate
• Full-Stack Types: Never lose type safety between frontend and backend
• SSR Optimized: Fast initial loads with progressive enhancement
• Developer First: Excellent tooling, error messages, and debugging experience
• Production Ready: Built for scale with proper error handling and performance optimization

Get Started ​

Ready to build your next application? Get started with Oxide in minutes.