SCHEMΛRCHOpen Demo
Menu

THE POSTGRES DEVELOPMENT PLATFORM

Your data.
Your backend.
Your rules.

A connected Postgres backend with authentication, storage, realtime, APIs, and server-side functions. Build applications with control over your infrastructure.

Start buildingExplore the platform
Postgres at the core. Self-hosted infrastructure.
01 / FOUNDATIONPostgres at the core
02 / CONNECTIONTools that work together
03 / CONTROLYour deployment, your data

ONE PLATFORM. CONNECTED CAPABILITIES.

The backend pieces.
Already connected.

Spend less time stitching services together. Work with the database and the tools your application needs around it.

01

Postgres database

Build on a relational database with SQL, extensions, indexes and row-level security.

Explore postgres database 02

Authentication

Manage application users and connect their identities to database access policies.

Explore authentication 03

File storage

Organize application files in buckets and control access with policies.

Explore file storage 04

Realtime

Build live experiences with database changes, broadcast messages and presence.

Explore realtime 05

Edge Functions

Run TypeScript functions for integrations and application workflows.

Explore edge functions 06

APIs and client libraries

Access your data through generated REST APIs and typed client libraries.

Explore the APIs

BUILT FOR DEVELOPERS

Start with SQL.
Ship with your stack.

Use a standard Postgres foundation and a JavaScript client that brings your backend services together.

Explore the documentation
  • Relational data and row-level security
  • Typed JavaScript client
  • A dashboard for day-to-day work

Requires a projects table and appropriate access policies. The guide covers setup and expected results.

Framework examplesExample viewer
React
React · Code example
import { createClient } from '@schemarch/schemarch-js'
import { useEffect, useState } from 'react'

const client = createClient(
  import.meta.env.VITE_SCHEMARCH_URL,
  import.meta.env.VITE_SCHEMARCH_PUBLISHABLE_KEY
)

export function Projects() {
  const [projects, setProjects] = useState([])
  const [error, setError] = useState(null)

  useEffect(() => {
    client.from('projects').select('id, name').limit(10)
      .then(({ data, error }) => {
        setProjects(data ?? [])
        setError(error)
      })
  }, [])

  if (error) return <p>{error.message}</p>
  return <pre>{JSON.stringify(projects, null, 2)}</pre>
}

Next.js
Next.js · Code example
import { createClient } from '@schemarch/schemarch-js'

// Server component using a publishable project key.
const client = createClient(
  process.env.SCHEMARCH_URL,
  process.env.SCHEMARCH_PUBLISHABLE_KEY
)

export default async function ProjectsPage() {
  const { data, error } = await client
    .from('projects').select('id, name').limit(10)

  if (error) throw error
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

Vue
Vue · Code example
<script setup>
import { createClient } from '@schemarch/schemarch-js'
import { ref, onMounted } from 'vue'

const client = createClient(
  import.meta.env.VITE_SCHEMARCH_URL,
  import.meta.env.VITE_SCHEMARCH_PUBLISHABLE_KEY
)
const projects = ref([])
const errorMessage = ref('')

onMounted(async () => {
  const { data, error } = await client
    .from('projects').select('id, name').limit(10)
  projects.value = data ?? []
  errorMessage.value = error?.message ?? ''
})
</script>

<template>
  <p v-if="errorMessage">{{ errorMessage }}</p>
  <pre v-else>{{ projects }}</pre>
</template>

Svelte
Svelte · Code example
<script>
  import { onMount } from 'svelte'
  import { createClient } from '@schemarch/schemarch-js'
  import { PUBLIC_SCHEMARCH_URL, PUBLIC_SCHEMARCH_KEY }
    from '$env/static/public'

  const client = createClient(
    PUBLIC_SCHEMARCH_URL, PUBLIC_SCHEMARCH_KEY
  )
  let projects = []
  let errorMessage = ''

  onMount(() => {
    client.from('projects').select('id, name').limit(10)
      .then(({ data, error }) => {
        projects = data ?? []
        errorMessage = error?.message ?? ''
      })
  })
</script>

{#if errorMessage}<p>{errorMessage}</p>
{:else}<pre>{JSON.stringify(projects, null, 2)}</pre>{/if}

Nuxt
Nuxt · Code example
<script setup>
import { createClient } from '@schemarch/schemarch-js'

const config = useRuntimeConfig()
const client = createClient(
  config.public.schemarchUrl,
  config.public.schemarchPublishableKey
)

const { data: projects, error } = await useAsyncData(
  'projects',
  async () => {
    const { data, error } = await client
      .from('projects').select('id, name').limit(10)
    if (error) throw error
    return data
  }
)
</script>

<template>
  <p v-if="error">{{ error.message }}</p>
  <pre v-else>{{ projects }}</pre>
</template>

JavaScript
JavaScript · Code example
import { createClient } from '@schemarch/schemarch-js'

const client = createClient(
  'YOUR_PROJECT_URL',
  'YOUR_PUBLISHABLE_KEY'
)

const { data, error } = await client
  .from('projects')
  .select('id, name')
  .limit(10)

if (error) throw error
console.log(data)

Illustrative examples. Configure your framework’s public project URL and publishable key, a projects table, and access policies. No code runs here. Read setup instructions →

EXPLORE SCHEMARCH

Understand the platform.
Plan your next step.

Explore the architecture, follow a development workflow, and plan your deployment.

Architecture

Explore the Postgres-centered service model.

How it works

Go from schema to a connected application.

Product walkthrough

Follow an illustrative development workflow.

BUILD WITH SCHEMARCH

Your next idea.
Your backend.

Explore the tools, then connect your application.

Start buildingExplore the platform