Learn SUPABASE-EDGE-FUNCTIONS with Real Code Examples

Updated Nov 25, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Supabase Edge Function (TypeScript)

# supabase/demo/hello.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response('Hello, Supabase!', { status: 200 });
});

A simple Supabase Edge Function that returns 'Hello, Supabase!' to HTTP requests.

Let’s Try →

Supabase Edge Function Returning JSON

# supabase/demo/json.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const data = { message: 'Hello JSON!' };
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    });
});

A Supabase Edge Function that returns JSON data.

Let’s Try →

Supabase Edge Function with Query Parameters

# supabase/demo/query.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((req) => {
    const url = new URL(req.url);
    const name = url.searchParams.get('name') || 'Guest';
    return new Response(`Hello, ${name}!`, { status: 200 });
});

Reads query parameters and responds accordingly.

Let’s Try →

Supabase Edge Function Handling POST Request

# supabase/demo/post.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve(async (req) => {
    if (req.method === 'POST') {
        const body = await req.json();
        return new Response(JSON.stringify({ received: body }), { status: 200, headers: { 'Content-Type': 'application/json' } });
    }
    return new Response('Method Not Allowed', { status: 405 });
});

Handles POST request JSON body and responds.

Let’s Try →

Supabase Edge Function Returning HTML

# supabase/demo/html.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const html = '<!DOCTYPE html><html><body><h1>Hello HTML!</h1></body></html>';
    return new Response(html, { status: 200, headers: { 'Content-Type': 'text/html' } });
});

Responds with a simple HTML page.

Let’s Try →

Supabase Edge Function with Custom Headers

# supabase/demo/headers.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response('Custom headers added', { status: 200, headers: { 'X-Custom-Header': 'SupabaseEdge' } });
});

Adds custom headers to the response.

Let’s Try →

Supabase Edge Function Fetching External API

# supabase/demo/fetch.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve(async (_req) => {
    const res = await fetch('https://api.github.com');
    const data = await res.json();
    return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } });
});

Fetches data from an external API and returns it.

Let’s Try →

Supabase Edge Function Using Environment Variable

# supabase/demo/env.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const apiKey = Deno.env.get('MY_API_KEY') || 'NotSet';
    return new Response(`API Key length: ${apiKey.length}`, { status: 200 });
});

Uses environment variables in the function.

Let’s Try →

Supabase Edge Function Conditional Response

# supabase/demo/conditional.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((req) => {
    const url = new URL(req.url);
    if (url.searchParams.get('action') === 'ping') {
        return new Response('pong', { status: 200 });
    }
    return new Response('unknown action', { status: 200 });
});

Responds differently based on query parameter.

Let’s Try →

Supabase Edge Function Redirect

# supabase/demo/redirect.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response(null, { status: 302, headers: { Location: 'https://example.com' } });
});

Redirects to another URL.

Let’s Try →

Code Sample Descriptions

Simple Supabase Edge Function (TypeScript)

# supabase/demo/hello.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response('Hello, Supabase!', { status: 200 });
});

A simple Supabase Edge Function that returns 'Hello, Supabase!' to HTTP requests.

Let’s Try →

Supabase Edge Function Returning JSON

# supabase/demo/json.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const data = { message: 'Hello JSON!' };
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    });
});

A Supabase Edge Function that returns JSON data.

Let’s Try →

Supabase Edge Function with Query Parameters

# supabase/demo/query.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((req) => {
    const url = new URL(req.url);
    const name = url.searchParams.get('name') || 'Guest';
    return new Response(`Hello, ${name}!`, { status: 200 });
});

Reads query parameters and responds accordingly.

Let’s Try →

Supabase Edge Function Handling POST Request

# supabase/demo/post.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve(async (req) => {
    if (req.method === 'POST') {
        const body = await req.json();
        return new Response(JSON.stringify({ received: body }), { status: 200, headers: { 'Content-Type': 'application/json' } });
    }
    return new Response('Method Not Allowed', { status: 405 });
});

Handles POST request JSON body and responds.

Let’s Try →

Supabase Edge Function Returning HTML

# supabase/demo/html.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const html = '<!DOCTYPE html><html><body><h1>Hello HTML!</h1></body></html>';
    return new Response(html, { status: 200, headers: { 'Content-Type': 'text/html' } });
});

Responds with a simple HTML page.

Let’s Try →

Supabase Edge Function with Custom Headers

# supabase/demo/headers.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response('Custom headers added', { status: 200, headers: { 'X-Custom-Header': 'SupabaseEdge' } });
});

Adds custom headers to the response.

Let’s Try →

Supabase Edge Function Fetching External API

# supabase/demo/fetch.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve(async (_req) => {
    const res = await fetch('https://api.github.com');
    const data = await res.json();
    return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } });
});

Fetches data from an external API and returns it.

Let’s Try →

Supabase Edge Function Using Environment Variable

# supabase/demo/env.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    const apiKey = Deno.env.get('MY_API_KEY') || 'NotSet';
    return new Response(`API Key length: ${apiKey.length}`, { status: 200 });
});

Uses environment variables in the function.

Let’s Try →

Supabase Edge Function Conditional Response

# supabase/demo/conditional.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((req) => {
    const url = new URL(req.url);
    if (url.searchParams.get('action') === 'ping') {
        return new Response('pong', { status: 200 });
    }
    return new Response('unknown action', { status: 200 });
});

Responds differently based on query parameter.

Let’s Try →

Supabase Edge Function Redirect

# supabase/demo/redirect.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

serve((_req) => {
    return new Response(null, { status: 302, headers: { Location: 'https://example.com' } });
});

Redirects to another URL.

Let’s Try →