SCHEMΛRCHOpen Demo
Menu

Developers

Developer tools and workflows

Use documented APIs, SQL, and client tooling to build and debug applications.

Read documentationExplore architecture

A development loop that stays grounded

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

if (error) throw error
Use your project configuration and policies
  1. 01 / ModelSchema and migrations
  2. 02 / ConnectClient and request contracts
  3. 03 / VerifyTypes, policies, and errors
  4. 04 / RefineInspect results and iterate
Keep the schema, application types, client requests, and observed behavior in sync.

Client integration

Connect an application using supported client packages.

Local workflows

Keep environment configuration and migrations reproducible.

Troubleshooting

Inspect request failures, policy errors, and service logs using the appropriate tools.

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

BUILD WITH SCHEMARCH

Your next idea.
Your backend.

Explore the tools, then connect your application.

Start buildingExplore the platform